Zenn
🔒

Amplify Hosting のプレビュー機能で Basic 認証を有効化する

2025/03/25に公開

最初に結論

プレビュー機能を設定した上で「ブランチの自動検出パターン」に pr-* を追加すると自動検出のアクセスコントロール設定がプレビュー環境にも適用されました!!

背景

Amplify Hosting について

AWS Amplify Hosting は数クリックで GitHub などのリポジトリと連携して Next.js などの SSR を含むウェブフレームワークアプリケーションや SPA などをデプロイできるサービスです。

要は Vercel の AWS 版のようなものですが、 Next.js の最新機能への追従などは Vercel に劣るものの既に AWS を使っているときなどに簡単に始められてコストも安いので便利です。

アクセスコントロールについて

Amplify Hosting では「アクセスコントロール」の設定によって Basic 認証を設定できるのですが「すべてのブランチのアクセスを管理」というチェックボックスをオンした場合に例外を設定できません。

そのため「本番環境の main ブランチのみをパブリックにし、他のブランチはアクセスを制限する」ということを実現するには「すべてのブランチのアクセスを管理」をオフにして個別にブランチのアクセス設定を管理する必要があります。

この仕様についてはかねてより改善要望の issue が挙がっているようです。

https://github.com/aws-amplify/amplify-hosting/issues/280

プレビュー機能について

Amplify Hosting に新たな環境を追加するには3通りの方法があります。

  • ブランチを手動で追加
  • ブランチの自動検出
    • 設定したパターンにブランチ名が一致する場合に自動で追加
  • プレビュー機能
    • プルリクエスト作成時にターゲットブランチのプレビュー設定が有効な場合に自動で追加

プレビュー機能ではブランチではなくプルリクに紐づいて環境が作成され、プルリクのステータスに表示されたり下記の画像のようにプレビュー用の URL が書かれたコメントが自動で追加されるのが便利です。

しかし前述の通り main ブランチのみをパブリックにしたい場合はアクセスコントロールの設定をブランチ毎に個別で管理する必要があるため、自動追加されるプレビュー環境にはアクセスコントロールが設定されず、プレビュー機能のメニュー内にはそれに関連するような設定もありません。

ワークアラウンド

アクセスコントロールの自動設定はプレビュー機能には存在しませんが、実は「ブランチの自動検出」のほうでは設定が可能です。

ではプレビュー機能ではなくこちらの機能を使えばいいのではないかと思うのですが、プルリクに対するステータスやコメントはプレビュー機能を使わないと連携されないのが何とももどかしいポイントです。

そこで issue コメント にある通りプレビュー機能を設定した上で「ブランチの自動検出」に pr-* を設定すると、プレビュー機能を使いつつアクセスコントロールを自動で設定することが可能です。

これはブランチ設定やプレビュー用の URL でも確認できるようにプレビュー対象のプルリクエストが Amplify Hosting 上では pr-[pr番号] という仮想的なブランチとして扱われることを利用したものです。

確かに Amplify Hosting の画面を見ていれば思いつけそうですが、できるかどうか分からない設定方法なので今までは試しておらず、 issue コメントを見てやってみたところ本当にできました。

まとめ

Amplify Hosting は便利ですが、これまでは本番環境をパブリックにしつつプレビュー環境に認証をかける方法がわからなかったのが懸念点でした。(調べると AWS CLI の aws amplify update-branch を使う方法もあるようですがそれも複雑だと感じていました。)

今回比較的簡単にプレビュー環境に認証をかけられることがわかったため、個人的には今後積極的に利用できる場面が増えそうだと思いました。

しかし意図されたものか怪しいハックな方法なため、プレビュー機能側に正式に設定が追加されるか、「すべてのブランチのアクセスを管理」の例外設定ができるようになるともっと便利ですね。

GENDA

Discussion

ログインするとコメントできます