dayjournal memo

Total 986 articles!!

Try #111 – AWS Amplify Gen2の公開設定

Yasunori Kirimoto's avatar

2024年、AWS AmplifyはGen2へと進化しました。

Gen2はGen1と比べ、TypeScriptファーストの開発、開発者ごとの分離されたsandbox環境による開発、Gitブランチベースの自動デプロイ、AWS CDKベースでのAmplifyネイティブ以外の機能統合など、多くの点で進化しています。コード主導のフルスタック開発により、フロントエンドとバックエンドのシームレスな統合と生産性向上を実現しています。

2年前にAWS Amplify Gen1の公開設定の記事を書きました。今回は、Gen2になったAmplifyの公開設定について紹介します。今後、他の機能も試していこうと思っています。

img

事前準備

事前に、GitHubでリポジトリ作成とコードを反映します。 img

Amplify Console(Gen2)でGitHubを利用した公開

Amplify Console(Gen2)でGitHubを利用した公開をする方法です。

AWSマネジメントコンソール → AWS Amplifyをクリック。 img

「新しいアプリを作成」をクリック。 img

「GitHub」をクリック → 「次へ」をクリック。 img

GitHubの認証画面が表示されるので「Authorize」をクリック。 img

事前準備していた対象リポジトリとブランチを選択 → 「次へ」をクリック。 img

「次へ」をクリック。 img

「保存してデプロイ」をクリック。 img

デプロイ完了後「デプロイされたURLにアクセス」をクリック。 img

デプロイしたWebSiteが表示されます。 img

Amplify Console(Gen2)でBasic認証公開

Amplify Console(Gen2)でBasic認証公開をする方法です。

アクセスコントロール → 「アクセスの管理」をクリック。 img

アクセス設定を制限に設定。ユーザーとパスワードを設定 → 「保存」をクリック。 img

設定を確認。 img

URLにアクセスするとユーザーとパスワードの入力画面が表示されます。 img

設定したユーザーとパスワードを入力するとWebSiteが表示されます。 img

Amplify Console(Gen2)でプレビュー機能追加

Amplify Console(Gen2)でプレビュー機能追加をする方法です。

プレビュー → ブランチを選択 → 「設定を編集」をクリック。 img

プルリクエストのプレビューを有効 → 「確認」をクリック。 img

ファイルの一部を変更しプルリクエストを作成します。 img

作成後プレビューのリンクが表示されます。 img

Amplify Consoleでプレビュー用のデプロイ環境も確認できます。 img

再デプロイ

プルリクエストをマージすると環境が再デプロイされます。

デプロイ完了後「デプロイされたURLにアクセス」をクリック。 img

更新後のWebSiteが表示されます。 img



他にも記事を書いています。よろしければぜひ。

tags - AWS Amplify



book

Q&A