トップ > AWS > Amplify Console でデプロイした SPA が403エラーになった原因と対策

Amplify Console でデプロイした SPA が403エラーになった原因と対策

AWS AWS Amplify
記事タイトルとURLをコピーする

こんにちは、技術1課の加藤です。
最近 Amplify を使ったアプリケーション作成をしているんですが、Amplify Console を使って SPA をデプロイしようとしたら 403 に引っかかってしまいました。

結局リダイレクト設定が問題だったわけですが、何が起こったのか・どう解決したのか、備忘録がてらお伝えしていきます。

何が起きたか

Amplify Console 利用前の状況

現在、趣味と実益を兼ねて Amplify を使った SPA アプリケーションを作成しております。ちょっとずつ勉強しながら使っているので、最初は Amplify Console の存在を知りませんでした。Amplify CLI を用いて、以下のコマンドでホスティング設定をしていました。

$ amplify add hosting
$ amplify publish

こちらで作成したエンドポイントを使っていても特に問題なかったので、何事もなく開発を進めておりました。

Amplify Console を知りデプロイを行う

そんな中 Amplify Console を知ります。フロントエンドの CI/CD が簡単に実現できると聞き、それは便利だと。導入してみたわけです。

アプリケーションのデプロイは CLI からすでにしていたので、Console 導入の手順は以下の通り。

  1. アプリケーションの詳細画面を開き [Frontend Environment] タブから GitHub を選択し [Connect branch]
  2. GitHub との連携をすませ、リポジトリ・ブランチを選択し [次へ]
  3. Backend deployments は必要なかったため [Deploy updates to backend resources with your frontend on every code commit] のチェックを外し [次へ]
  4. 確認画面で設定内容を確認の上 [保存してデプロイ]

これでデプロイが走ります。

発行されたURLにアクセスするも 403 が…

アプリケーションがデプロイされると https://[branch].xxxxxxxxxx.amplifyapp.com というURLが発行されます。
この URL にアクセスするとちゃんとトップ画面が表示されました。やったね。

ですがトップページ以外のページ、例えば作成したアプリケーションに存在するはずの https://[branch].xxxxxxxxxx.amplifyapp.com/about というURLにアクセスすると。

無情にもAccess Denied エラー (403) が発生してしまいました…。

原因

そもそも論ですが、 SPA は Single Page Application の名の通り単一ファイルで描画を行うのが特徴のWebアプリケーションです。
つまり、各URLに対応した HTML ファイルは実際には存在しません。index.htmlファイルのみを用意し、このファイルに書かれた JavaScript のコードが、各URLに対応したページを描画していきます。

以上ふまえると、今回エラーが発生したのは https://[branch].xxxxxxxxxx.amplifyapp.com/about にアクセスしたものの、純粋に /about.html というファイルが存在しないためでした。

解決

結局 index.html ファイルしか存在しないため、全てのパスへのアクセスを / にリダイレクトしてあげる必要があります。

さてどうすればいいのやら…と思っていたら、AWS の Amplify のページにそのための設定方法が載っていました。
リダイレクトを使用する | AWS Amplify

簡単にいうと、 Amplify Console にはリダイレクト設定を行うページがあるので、そちらに指定された設定値を埋め込めばOKという形になります。

設定の仕方

  1. Amplify Console 左側のメニューから [書き換えて、リダイレクト] を選択します
  2. [書き換えを追加して、リダイレクト] を選択し、以下の値を入力し[保存] を押して設定を保存します。
    (※日本語がおかしいのはご愛嬌です)
  • 送信元アドレス**
    • </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  • ターゲットアドレス**
    • /index.html
  • 入力**
    • 200 (Rewrite)

これで / 以外のパスにアクセスしても(例えば /about にアクセスしても) / にリダイレクトがかかり、正しくページが表示されるようになりました。

ちなみに

Amplify Console を用いて SPA をホスティングする場合はリダイレクトを自分で設定してあげる必要がありますが、CLIを用いて add hostingすると、その辺りの設定もいい感じにやってくれます。

Console の側でもうまく設定してくれるようになってくれたら嬉しいですね。