AWS Amplifyにサイトを公開する
ゴール
WEBサイトを作成（今回はAngular）し、Amplify上に自動デプロイする。
前提
開発環境(Windows)の設定は完了済みとします。
AWSアカは作成済みとします。
CodeCommitのGit認証情報も予め作成済みとします。
手順
1.Amplify CLIのインストール
2.Gitの準備
ソースコードを管理するGitリポジトリを作成します。
AWS Code Commitを利用します。
Gitリポジトリの作成
aws codecommit create-repository --repository-name amplify-test --repository-description "Amplifyテストリポジトリ" --region ap-northeast-1
実行に成功した場合に返却される下記値を使ってクローンを作成します。
後で利用します。
"cloneUrlHttp": "https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/amplify-test"
3.公開するサイトを作成する
WEBに公開するためのサイトを作成します。
今回は簡単なデモ用の作成に留めます。
①Angularプロジェクトを作成します。
以下のコマンドを使用します。
ng new プロジェクト名
ng new amplify-test
今回の設定値は以下の通りです。
②作成したAngularプロジェクトに移動します。
cd amplify-test
③ローカルでテストサーバを起動しアプリケーションを実行]
npm start
ブラウザから以下のURLにアクセスします。
正常に実行できた場合、以下が表示されます。
4.Amplifyプロジェクトの設定
以下のコマンドでAmplifyプロジェクトの初期設定を行います。
amplify init
今回の設定値は以下の通りです。
これでAmplifyスタックの作成が始まり、Amplifyプロジェクトが作成されます。
※Amplifyコンソールでアプリにsampleappが登録されたことを確認できます。
4.サイトをホスティングする
Amplify Web Hosting を使ってサイトのホスティングと自動デプロイする
作成したアプリケーションをGitリポジトリに接続します。
git remote add origin https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/amplify-sample
Git リポジトリにプッシュする
メインブランチにプッシュします。
git add .
git commit -m "first"
git push origin main
必要であれば、開発環境用のdevブランチを作成します。
git checkout -b dev
git push origin dev
ここまででGitの準備は完了。
Amplifyのコンソール画面での設定
Amplifyのコンソール画面にアクセスし、今回作成したamplifysampleを選択します。
Hosting environmentsタブを選択し、AWS CodeCommitを選択、「ブランチを接続」を選択します。
作成したリポジトリを選択します。
ブランチはdevを選択します。
次へを選択します。
このブランチで使用するバックエンドを選択します。
新しいロールを作成を選択します。
※ロール名「amplifyconsole-backend-role-test」とし、ポリシーにAdministratorAccessを追加します。
作成したロールを選択し、次へを選択します。
保存してデプロイを選択します。
正常に終了した場合、devブランチに自動デプロイされます。
devブランチのURLを選択し、デプロイされていることを確認します。
コードの修正を行い、リポジトリにPUSHをすれば、自動デプロイによりAmplifyHosting上に反映されます。
git add .
git commit -m "XX修正"
git push origin dev
問題
新規にプロジェクトを作成した場合、うまく動作するが、
既存のサイトをAmplifyに自動デプロイできない。
よって、以下の方法で仮対応
以下のコマンドを実行します。
静的コンテンツ用のS3の設定を行います。
amplify add hosting
結果は以下のようになります。
> amplify add hosting
? Select the plugin module to execute ... (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3
Amazon CloudFront and S3を選択します。
結果は以下のようになります。
√ Select the plugin module to execute · Amazon CloudFront and S3
√ hosting bucket name · xxxxx-hostingbucket
Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.
You can now publish your app using the following command:
Command: amplify publish
以下のコマンドを実行します。
S3上に静的コンテンツをアップロードします。
amplify publish
無事にCloudfront上にサイトが公開されました。
参考
Discussion