<h2 id="%E6%9C%80%E5%88%9D%E3%81%AB%E7%B5%90%E8%AB%96" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%88%9D%E3%81%AB%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 最初に結論</h2>
<p data-line="2" class="code-line">プレビュー機能を設定した上で「ブランチの自動検出パターン」に <code>pr-*</code> を追加すると自動検出のアクセスコントロール設定がプレビュー環境にも適用されました！！</p>
<h2 id="%E8%83%8C%E6%99%AF" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h2>
<h3 id="amplify-hosting-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="6" class="code-line">
<a class="header-anchor-link" href="#amplify-hosting-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> Amplify Hosting について</h3>
<p data-line="8" class="code-line"><a href="https://aws.amazon.com/jp/amplify/hosting/" target="_blank" rel="nofollow noopener noreferrer">AWS Amplify Hosting</a> は数クリックで GitHub などのリポジトリと連携して Next.js などの SSR を含むウェブフレームワークアプリケーションや SPA などをデプロイできるサービスです。</p>
<p data-line="10" class="code-line">要は <a href="https://vercel.com/" target="_blank" rel="nofollow noopener noreferrer">Vercel</a> の AWS 版のようなものですが、 Next.js の最新機能への追従などは Vercel に劣るものの既に AWS を使っているときなどに簡単に始められてコストも安いので便利です。</p>
<h3 id="%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> アクセスコントロールについて</h3>
<p data-line="14" class="code-line">Amplify Hosting では「アクセスコントロール」の設定によって Basic 認証を設定できるのですが「すべてのブランチのアクセスを管理」というチェックボックスをオンした場合に例外を設定できません。</p>
<p data-line="16" class="code-line">そのため「本番環境の main ブランチのみをパブリックにし、他のブランチはアクセスを制限する」ということを実現するには「すべてのブランチのアクセスを管理」をオフにして個別にブランチのアクセス設定を管理する必要があります。</p>
<p data-line="18" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/42386358153d-20250322.png" loading="lazy" class="md-img"></p>
<p data-line="20" class="code-line">この仕様についてはかねてより改善要望の issue が挙がっているようです。</p>
<p data-line="22" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__26a6a4dc9e6e6" src="https://embed.zenn.studio/card#zenn-embedded__26a6a4dc9e6e6" data-content="https%3A%2F%2Fgithub.com%2Faws-amplify%2Famplify-hosting%2Fissues%2F280" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/aws-amplify/amplify-hosting/issues/280" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/aws-amplify/amplify-hosting/issues/280</a></p>
<h3 id="%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="25" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> プレビュー機能について</h3>
<p data-line="27" class="code-line">Amplify Hosting に新たな環境を追加するには3通りの方法があります。</p>
<ul data-line="29" class="code-line">
<li data-line="29" class="code-line">ブランチを手動で追加</li>
<li data-line="30" class="code-line">ブランチの自動検出
<ul data-line="31" class="code-line">
<li data-line="31" class="code-line">設定したパターンにブランチ名が一致する場合に自動で追加</li>
</ul>
</li>
<li data-line="32" class="code-line">プレビュー機能
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line">プルリクエスト作成時に<strong>ターゲットブランチのプレビュー設定が有効な場合</strong>に自動で追加</li>
</ul>
</li>
</ul>
<p data-line="35" class="code-line">プレビュー機能では<strong>ブランチではなくプルリクに紐づいて環境が作成され、プルリクのステータスに表示されたり下記の画像のようにプレビュー用の URL が書かれたコメントが自動で追加される</strong>のが便利です。</p>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ab99900034f3-20250322.png" loading="lazy" class="md-img"></p>
<p data-line="39" class="code-line">しかし前述の通り main ブランチのみをパブリックにしたい場合はアクセスコントロールの設定をブランチ毎に個別で管理する必要があるため、自動追加されるプレビュー環境にはアクセスコントロールが設定されず、プレビュー機能のメニュー内にはそれに関連するような設定もありません。</p>
<h2 id="%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89" aria-hidden="true"></a> ワークアラウンド</h2>
<p data-line="43" class="code-line">アクセスコントロールの自動設定はプレビュー機能には存在しませんが、実は「ブランチの自動検出」のほうでは設定が可能です。</p>
<p data-line="45" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/0e931ffe77c4-20250322.png" loading="lazy" class="md-img"></p>
<p data-line="47" class="code-line">ではプレビュー機能ではなくこちらの機能を使えばいいのではないかと思うのですが、プルリクに対するステータスやコメントはプレビュー機能を使わないと連携されないのが何とももどかしいポイントです。</p>
<p data-line="49" class="code-line">そこで <a href="https://github.com/aws-amplify/amplify-hosting/issues/280#issuecomment-2669433010" target="_blank" rel="nofollow noopener noreferrer">issue コメント</a> にある通り<strong>プレビュー機能を設定した上で「ブランチの自動検出」に <code>pr-*</code> を設定すると、プレビュー機能を使いつつアクセスコントロールを自動で設定することが可能</strong>です。</p>
<p data-line="51" class="code-line">これはブランチ設定やプレビュー用の URL でも確認できるように<strong>プレビュー対象のプルリクエストが Amplify Hosting 上では <code>pr-[pr番号]</code> という仮想的なブランチとして扱われる</strong>ことを利用したものです。</p>
<p data-line="53" class="code-line">確かに Amplify Hosting の画面を見ていれば思いつけそうですが、できるかどうか分からない設定方法なので今までは試しておらず、 issue コメントを見てやってみたところ本当にできました。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="55" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="57" class="code-line">Amplify Hosting は便利ですが、これまでは本番環境をパブリックにしつつプレビュー環境に認証をかける方法がわからなかったのが懸念点でした。（調べると AWS CLI の <code>aws amplify update-branch</code> を使う方法もあるようですがそれも複雑だと感じていました。）</p>
<p data-line="59" class="code-line">今回比較的簡単にプレビュー環境に認証をかけられることがわかったため、個人的には今後積極的に利用できる場面が増えそうだと思いました。</p>
<p data-line="61" class="code-line">しかし意図されたものか怪しいハックな方法なため、プレビュー機能側に正式に設定が追加されるか、「すべてのブランチのアクセスを管理」の例外設定ができるようになるともっと便利ですね。</p>


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

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

Discussion