このモジュールでは、継続的デプロイのビルトインでウェブアプリケーションの静的リソースをホストするように AWS Amplify を設定します。Amplify コンソールには、継続的デプロイと、フルスタックのウェブアプリをホストするための Git ベースのワークフローが用意されています。後続のモジュールでは、JavaScript を使用してこれらのページに動的機能を追加し、AWS Lambda と Amazon API Gateway で 構築されたリモート RESTful API を呼び出します。
このモジュールのアーキテクチャは、非常に単純です。静的ウェブコンテンツ (例: HTML、CSS、JavaScript、イメージなどのファイル) はすべて、AWS Amplify コンソールで管理されます。その後、エンドユーザーは AWS Amplify コンソール によって公開されているパブリックウェブサイトの URL を使用してサイトにアクセスします。サイトを使用できるようにするため、ウェブサーバーを実行したり他のサービスを使用したりする必要はありません。
最も現実に近いアプリケーションでは、サイトをホストするためにカスタムドメインがよく使用されます。独自ドメインの使用に関心がある場合は、Amplify のカスタムドメインのセットアップの手順を参照してください。
モジュールの所要時間: 15 分
使用されるサービス: AWS Amplify
以下に示すステップバイステップ手順に従い、静的ウェブサイトをホストします。各ステップの番号をクリックして、セクションを展開してください。
-
ステップ 1:リージョンを選択する
このウェブアプリケーションは、このアプリケーションで使用されるサービス (AWS Amplify、AWS CodeCommit、Amazon Cognito、AWS Lambda、Amazon API Gateway、Amazon DynamoDB など) をすべてサポートするどの AWS リージョンでもデプロイできます。
各リージョンでサポートされているサービスを確認するには、リージョン表を参照してください。サポートされているリージョンのうち、選択できるリージョンは以下のとおりです。
- 米国東部 (バージニア北部)
- 米国東部 (オハイオ)
- 米国西部 (オレゴン)
- 欧州 (フランクフルト)
- 欧州 (アイルランド)
- 欧州 (ロンドン)
- アジアパシフィック (東京)
- アジアパシフィック (ソウル)
- アジアパシフィック (シドニー)
- アジアパシフィック (ムンバイ)
AWS マネジメントコンソールの右上隅にあるドロップダウンの一覧からリージョンを選択してください。
(クリックして拡大)
-
ステップ 2: Git リポジトリを作成する
このモジュールのソースコードを管理するには、AWS CodeCommit (無料利用枠を含む) または GitHub の 2 つのオプションがあります。このチュートリアルでは CodeCommit を使用してアプリケーションコードを保存しますが、GitHub でリポジトリを作成しても同じことができます。
a.AWS CodeCommit コンソールを開く
b.[リポジトリを作成] を選択する
c.[リポジトリ名*] に「wildrydes-site」を指定する
d.[作成] を選択する
e.リポジトリが作成されたら以下の手順に従って IAM コンソールで Git の認証情報を使用し IAM ユーザーをセットアップする
f.CodeCommit コンソールに戻り、[クローン URL から] ドロップダウンで、[HTTPS のクローン] を選択する
g.ターミナルウィンドウで以下に示すように Git クローンとリポジトリの HTTPS URL を実行する
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
Username for 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
Password for 'USERID': XXXXXXXXXXXX
warning: You appear to have cloned an empty repository.
-
ステップ 3: Git リポジトリを事前設定する
Git リポジトリの作成に AWS CodeCommit または GitHub.com のいずれかを使用し、ローカルでクローンを作成したら、このワークショップに関連付けられた一般がアクセスできる既存の S3 バケットからウェブサイトのコンテンツをコピーし、リポジトリにコンテンツを追加する必要があります。
a.ディレクトリをリポジトリに変更し、次に示すように S3 から静的ファイルをコピーします。
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb.Git サービスにファイルをコミットします
$ git add .
$ git pushCounting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
ステップ 4: AWS Amplify コンソールでウェブホスティングを有効にする
次に AWS Amplify コンソールを使用して、先ほど Git にコミットしたウェブサイトをデプロイします。Amplify コンソールが静的ウェブアプリケーションコードを保存するための場所のセットアップ作業を実施し、アプリケーションのライフサイクルを簡略化するとともに、ベストプラクティスを有効にする便利な機能を多数提供します。
a.Amplify コンソールページをローンチする
b.Amplify コンソールを使用したデプロイの下で [始める] をクリックする
c.今日使用したリポジトリサービスプロバイダーを選択し、[次へ] を選択する
d.GitHub を使用した場合、GitHub アカウントに AWS Amplify を認証する必要があります
e.ドロップダウンから作成したばかりの [リポジトリとブランチ] を選択する
e.[ビルド設定の構成] ページでは、すべてをデフォルトのままにして、[次へ] を選択する
f.確認ページで、[保存とデプロイ] を選択する
g.Amplify コンソールで必要なリソースが作成され、コードをデプロイするため、このプロセスには数分かかります。
完了したら、Wild Rydes サイトをローンチするためにサイトのイメージをクリックします。
[マスター] のリンクをクリックすると、ブランチに関連するビルドとデプロイの詳細、そして、さまざまなデバイスのアプリのスクリーンショットが表示されます。
-
ステップ 5: サイトを変更する
AWS Amplify コンソールは接続されたリポジトリで変更が検出されると、アプリを再ビルドし、再デプロイします。このプロセスを確かめるためにメインページに変更を加えてみましょう。
a.「index.html」ページを開き、タイトルの行を次のように変更します: <title>Wild Rydes - Rydes of the Future!</title>
b.ファイルを保存し、Git リポジトリに再度コミットします。Amplify コンソールはリポジトリへの変更を検出するとすぐにサイトのビルドを開始します。これはすぐに起こります。 プロセスを確認するために Amplify コンソールページに戻ります。
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c.完了したら、Wild Rydes サイトを再度開き、変更点を確認します。
-
まとめ
このモジュールでは Wild Rydes ビジネスのベースとなる静的ウェブサイトを作成しました。AWS Amplify コンソールを使用することで、継続的統合と配信モデルに沿って静的ウェブサイトをデプロイしやすくなります。アプリケーションをベースにより複雑な JavaScript フレームワークを「構築する」ための機能を備え、機能ブランチのデプロイ、簡単なカスタムドメインの設定、即席デプロイ、パスワード保護などの機能が備わっています。
