はじめに

今年3月、AWS WAF とAWS Amplify ホスティングの統合が GA されました。

AWS Amplify でホストされたサイト向けのファイアウォールサポート

もともと Amplify と WAF は統合されておらず、Amplify でホストしたアプリへのアクセスを WAF で保護したい場合は、 WAF の前段に WAF アタッチ済みの CloudFront を置くなどの対応が必要でした。
2024年末ごろ、この Amplify と WAF の統合がプレビューという形で提供が開始され、一部の機能が使えるようになりました。
今回ついに GA となったということで、 Amplify でホストしたアプリに直接 WAF をアタッチすることができるようになりました。

わざわざ CloudFront を用意する必要がなくなったのは嬉しいですね…！
実際の設定方法について気になったので試してみることにしました。
今回は、まず AWS が推奨する WAF をコンソールから追加してみます。
その後、アクセス時にメンテナンス画面を返すメンテナンス用 WebACL を作成し Amplify にアタッチしてみて、挙動を確認してみようと思います。

何ができるようになったのか

AWS WAF と Amplify Hosting の統合によって利用可能になった機能について説明します。
上記のブログから、以下のことが確認できました。

  • WAF と Amplify が統合されたことで、 Amplify アプリが AWS WAF のすべての機能にアクセスできるようになった
    • SQL インジェクションやクロスサイトスクリプティング (XSS) などの脆弱性に対するマネージドルールなど全て
  • 独自のカスタムルールを作成することもできる
  • Amplify コンソールから推奨設定の WAF を簡単にアタッチできる

Amplify コンソールをみたところ、ファイアウォールが設定できるようになっています。


上の画面の通り、AWS 推奨設定の WAF を簡単にアタッチできます。
また、Amplify アプリがデフォルトで払い出す amplifyapp.com のドメインについて、これまではアクセス制限はできなかったと思いますが、WAFの統合によりアクセス制限ができるようになりました。
これにより、Amplify アプリへのアクセスを、別途設定するカスタムドメインからのみに絞ることができます。

それから、「既存の WAF 設定を使用」を選択すれば、既存の WAF をアタッチすることもできます。

検証内容①：amplifyapp.comドメインのアクセス制限設定

Amplify コンソールから、サクッと WAF を追加してみます。
「Amplify が推奨するファイアウォール保護を有効化」と「amplifyapp.com へのアクセスを制限」を両方有効化した後、そのドメインにアクセスしてブロックされることを確認します。

事前準備

まずは検証用の Amplify アプリをデプロイします。
Quickstart
Amplify には上記の QuickStart ページが用意されていますので、こちらを利用してサンプルアプリをデプロイします。
デプロイ手順は割愛しますが、以下のブログに記載していますので、参考にしていただければと思います。
Amplifyで構築したアプリにカスタムドメインでアクセスさせよう！

Amplify アプリがデプロイされると、Amplify 側で自動的にドメインを払い出してくれます。
これが amplifyapp.com です。
ドメインは Amplify コンソールの「カスタムドメイン」メニューから確認できます。

対象のドメインにアクセスしてみました。
サンプルアプリが表示されています。

amplifyapp.com ドメインへのアクセス制限をする WAF 設定を追加

ではこの状態の Amplify アプリに、amplifyapp.com ドメインへのアクセス制限をする WAF 設定を追加してみます。
これにより先ほどはアクセスできた amplifyapp.com ドメインがアクセスできなくなるはずです。

すぐに WAF 設定が始まりました。
設定中のため「Associating」になっています。

しばらく待つと「Enabled」になりました。

それでは、先ほどはアクセスできた amplifyapp.com ドメインにアクセスしてみましょう。

予想通り、エラーとなりました！
WAF が機能していますね。

検証内容②：メンテナンスページを返す WAF を作成しアタッチ

Amplify コンソールから、Amplify に簡単に WAF がアタッチできることは確認できました。
しかしもっと複雑なルールの WAF をアタッチしたい場合はどうすれば良いでしょうか。
Amplify コンソールでは AWS 推奨設定や amplifyapp.com ドメインへのアクセス制限などシンプルな設定はできますが、それ以外の複雑な設定はできません。

もっと複雑な WAF 設定を導入したい場合は、まず WAF コンソールで要件に沿った WebACL を作成し、その後 Amplify アプリにアタッチする必要があります。

ではそのパターンも試してみましょう。
今回は Amplify でホストしているアプリのメンテナンスを想定してみます。
メンテナンスの間、対象アプリアクセスをブロックし、レスポンスとしてメンテナンス画面を返します。
この要件を WAF の WebACL で達成してみます。

事前準備

先ほど Amplify アプリに設定した WAF については削除します。
Amplify コンソールのファイアウォール設定のページにて、アクションからファイアウォールの関連付けを解除をクリックします。

WebACL 作成

アクセスをブロックしてメンテナンス画面を返すWebACLを作成します。
WAFのコンソールから、Create web ACL をクリックします。

Amplify にアタッチする場合は、リソースタイプをリージョナルではなくグローバルリソースで指定する必要があります。

続いてルールを作成します。
「HTTP メソッドが OPTIONS の時のみリクエストを許可する」というルールにすることで、 CORS エラーは回避しつつ、それ以外のメソッドの際はカスタムレスポンスを返すようにします。

OPTIONS 以外のメソッドの時に返すカスタムレスポンスボディを作成します。

カスタムレスポンスボディを作成します。

参考までに、メンテナンスページの HTML コードを以下に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メンテナンス中</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
        }
        .container {
            max-width: 600px;
            padding: 2rem;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 1rem;
        }
        p {
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="icon">🔧</div>
        <h1>メンテナンス中</h1>
        <p>現在、システムのメンテナンスを行っております。</p>
        <p>ご不便をおかけして申し訳ございませんが、<br>しばらくお待ちください。</p>
    </div>
</body>
</html>

レスポンスコードとしては 503 を指定します。

ルール優先度はデフォルトにします。

CloudWatch メトリクスについてもデフォルトとします。

レビュー画面を確認し、問題なさそうなので WebACL を作成します。

WebACL を作成できました。

Amplify へのアタッチ

作成した WebACL を Amplify にアタッチしてみます。
Amplify コンソールにてファイアウォール設定画面を開き、「既存の WAF 設定を使用」を選択します。
WAF 設定として、先ほど作成した WebACL を選択しました。

Enabled になるまで待ちます。

2、3分待って、 Enabled になりました。

アクセス確認

では対象のアプリにアクセスしてみます。

メンテナンス画面が表示されました！
WebACL のカスタムレスポンスとして設定した HTML が正しく返ってきていますね。

終わりに

Amplify に直接 WAF がアタッチできるようになったということで、いろいろ試してみました。
ただアタッチできるようになっただけでなく、簡単にアタッチできるように推奨設定が用意されているのは便利で良いですね。
また、今回の統合により Amplify アプリを間単にメンテナンス状態に変更できるようになったため、アプリメンテナンスの切り替えに利用できそうです。

参考になれば幸いです。