サーバーレスのウェブアプリケーションを構築１ AWS Amplify を使った静的ウェブホスティング

こんにちは。イムチェジョンです。
今回のブロブはサーバーレスのウェブアプリケーションを構築のハンズオンをやってみます。
ハンズオンが結構な長いので、ブログを分けてモジュールごと進めようと思います。
このブログでは AWS Amplify について整理をし、静的ウェブホスティングまで行います。

[サーバーレスのウェブアプリケーションを構築シリーズ]
１. AWS Amplify を使った静的ウェブホスティング
２. Amazon Cognito を使ったユーザー管理
３. バックエンドの構築 (AWS Lambda、Amazon DynamoDB)
４. RESTful API (Amazon API Gateway、 AWS Lambda)

アジェンダ

1. 今回の目標
2. AWS Amplify とは
3. AWS Amplifyで静的ウェブホスティング
4. まとめ

0. 今回の目標

目標：AWS Amplifyを勉強し、静的ウェブホスティングを行う。

1. AWS Amplify とは

AWS Amplify

• モバイル及びフロントエンドウェブ開発者がAWSで起動される安全で拡張可能なフルスタックアプリケーションを開発するようサポートするツール、サービスの集合
• Amplifyを使用すると数分でアプリのバックエンドを構成してアプリを接続し、クリック数回で静的ウェブアプリを配布してAWSコンソール外部でアプリコンテンツを簡単に管理可能になる
• JavaScript, React, Angular, Vue, Next.js などに対応
• Android, iOS, React Native, Ionic, Flutter などのモバイルプラットフォームに対応

AWS Amplifyの長所

• クリックだけでデプロイ
  • アプリのリポジトリに連結することだけでGit 基盤のワークフローで静的ウェブサイト及び単一ページのウェブをホスティング可能
• 簡単にフロントエンド連結
  • Web、Android、iOSアプリでAmplifyライブラリを使用することで、コード数行だけで新規·既存のAWSリソースに接続可能
• コンテンツ管理
  • 管理UIを使用することで、未開発者にAWSアカウントがなくてもアプリのユーザーとアプリのコンテンツを管理できる管理アクセス権限を提供
• 早いバックエンド構成
  • Amplify管理UI及びCLIのワークフローワークフローを使用して認証、ストレージ、データ、その他一般的な使用事例に拡張可能なAWSバックエンドを設定

2. AWS Amplifyで静的ウェブホスティング

2-1. Gitリポジトリ作成

Gitリポジトリを作成しましょう。 今回はAWSが提供しているCodeCommitを使って進めます。

CodeCommitページでリポジトリを作成します。

リポジトリ名はamplify-siteで入力します。

次はIAMユーザーを作成します。
ユーザー名：amplify-user
アクセスの種類：プログラムによるアクセスをチェック

ポリシーでCodeCommitの権限のためにAWSCodeCommitFullAccessを選択する。

AWS CodeCommit の　HTTPS Git 認証情報の部分で認証情報の生成をクリックし、ユーザー名とパスワードを覚えておきます。

そしてCodeCommitのリポジトリでアドレスをコピーする。

ローカルでGitをCloneする。

$ git clone {リポジトリでアドレス}
Username for 'リポジトリでアドレス': [ 自分のユーザー名入力 ]
Password for 'リポジトリでアドレス': [ 自分のパスワード入力 ]
warning: You appear to have cloned an empty repository.

上のHTTPS Git 認証情報で覚えていたユーザー名とパスワードを入力します。 warningが出る理由はリポジトリが空いているからなので、大丈夫です。 これでGitリポジトリを作成しました。

2-2. Gitリポジトリに静的ウェブ保存

次はGitリポジトリにウェブを保存してみましょう。

まず、自分の静的ウェブを作ります。 その後、gitのコマンドでGitリポジトリに保存します。

$ git add .
$ git commit -m "site upload"
$ git push
Enumerating objects: 101, done.
Counting objects: 100% (101/101), done.
Delta compression using up to 8 threads
Compressing objects: 100% (100/100), done.
Writing objects: 100% (101/101), 6.65 MiB | 16.52 MiB/s, done.
Total 101 (delta 9), reused 0 (delta 0), pack-reused 0
To {リポジトリでアドレス}
* [new branch]  master -> master

これでGitリポジトリに静的ウェブ保存完了です。

2-3. AWS Amplify コンソルを利用し、静的ウェブホスティング

次にAWS Amplifyを利用し、静的ウェブホスティングしましょう。

AWS Amplifyページでホスティングをするので、Deliverを選択します。

このリポジトリの種類を使うかを選択します。 ここではCodeCommitにリポジトリを作ったのでCodeCommitを選択しました。

次にリポジトリとブランチを選択し、他の設定を基本にして作成します。

静的ウェブホスティングが完了できました。

実際に入ってみると、成功的にサイトに接続できました。

2-4. サイト修正

今回はサイトを修正してcommitしてみましょう。

git add .
git commit -m "update site"
git push

pushをする瞬間Amplifyに入っているとプロビジョン、ビルド、デプロイ、検証まで自動的に行います。

サイトを確認してみると成功的に変更されました。

3. まとめ

今回はGitCommitにリポジトリ作成し、AWS Amplifyで静的ウェブをホスティングしてみました。 次のブログではAmazon Cognitoを使ってユーザー管理をしてみます。