GitHubにプルリクを作ったら自動的にAWS Amplifyでプレビュー環境を作成する

kaori
kaori

GitHub にプルリクを作ったら自動で AWS Amplify Hosting を使ってプレビュー環境を作成する方法です。

すでに Amplify Hosting を利用している前提です。

公式が書かれている「プルリクエストの Web プレビュー」のようにやっていけば大丈夫です。

このブログも使っています。環境は GitHub のプライベートリポジトリです。

簡単に流れを記述しておきます。

  1. AWS Amplify のコンソールを開きます。

  2. 「アプリの設定」> 「プレビュー」 > 「プレビューを有効化」でまずは有効化します。

  3. GitHub に飛ばされるので、そこで権限を設定します。関係するリポジトリのみ有効にしたほうがいいと思っています。

  4. AWS Amplify のコンソールに戻ると「プレビュー」でブランチが見れるようになるのでプルリク先のブランチを選択し、管理ボタンをクリックしてプルリクエストのプレビューを有効にします。

ブランチのプレビュー設定を管理

  1. 新しく GitHub 上でプルリクを作ると、自動的にホスティングされます。GitHub のプルリクにもコメントとしてホスティングされている URL が表示されます。

GitHubプルリク上でのAWS Amplify botからのコメント例

おまけ：feat ブランチを作ったときにプレビュー環境を作成する方法

こちらは、プルリクを作成したときではなく、特定のブランチ（例えば feat/xxx）が存在するときに、自動で AWS Amplify が環境を構築してくれる方法です。

  1. AWS Amplify のコンソールを開きます。

  2. 「アプリの設定」 > 「全般」 > 編集ボタンをクリックして編集します。

  3. 「リポジトリ設定」で、「ブランチの自動検出」 > 「パターンセットに一致する Amplify ホスティングにブランチを自動的に接続します。」をチェックします。

  4. 自分の期待するブランチパターンを記述します。たとえば、feat/** など。

リポジトリの設定

  1. ブランチパターンにマッチするブランチをリポジトリにプッシュすると自動的にホスティングされます。