11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

AWS AmplifyでhostingしたNext.jsのSPAが「403 Access Denied」となったときの対処法

Next.jsでSPAを作成してAWS Amplifyでhostingを試みたところ「403 Access Denied」が表示されました。
Mozilla_Firefox.png
原因と対処法をまとめます。

再現手順

Next.jsのアプリケーションは予め作成されており、Githubにpush済みであることを前提とします。

以下コマンドを実行して、プロジェクトを初期化します。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project next-app
? Enter a name for the environment production
? Choose your default editor: Visual Studio Code
? Choose the type of app that you\'re building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

以下コマンドを実行して、hostingを追加します。

$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository

Amplify Consoleの画面がブラウザで開くので、Github認証をしてデプロイ対象を選択します。
リポジトリとブランチの選択以外はデフォルトのままです。

デプロイが完了して、デプロイ先のURLにアクセスすると「403 Access Denied」が表示されます。
Mozilla_Firefox.png

なにがいけなかったのか?

Next.jsを静的HTMLにエクスポートできていないことと、エクスポート先のディレクトリを指定できていないことが原因です。

ハマリポイントは3点あります。

1. package.json に記載されているbuildコマンドに静的HTMLへのエクスポートコマンドが含まれていない

create-next-app で自動生成された package.json をそのまま使用していたのですが、 build のコマンドが next build のみとなっています。

next build コマンドは .next ディレクトリにハイブリッドページの起動を前提としたファイルをビルドするだけなので、静的HTMLは出力してくれません。
build のコマンドに next export を追加することで、out ディレクトリに静的HTMLを出力するようになります。

package.json
{
  // 省略
  "scripts": {
    "dev": "next",
    "build": "next build && next export", // 修正
    "start": "next start",
    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
  }
}

加えて .gitignoreout を追記しておきましょう。

echo "out\n" >> .gitignore

2. amplify initしたときのDistribution Directory Pathが誤っている

amplify init したときの選択肢「Distribution Directory Path」にデフォルトである build をそのまま入力していました。
next export コマンドは out ディレクトリに静的HTMLを出力するのでこのディレクトリを指定する必要があります。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project next-app
? Enter a name for the environment production
? Choose your default editor: Visual Studio Code
? Choose the type of app that you\'re building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: out # 修正
? Build Command:  npm run-script build
? Start Command: npm run-script start

3. amplify hostingしたときのビルドの設定が誤っている(Continuous deployment を選択したときのみ該当)

Amplify ConsoleでContinuous deploymentの設定をするときに、アプリのビルド設定が自動検出されるのですが、ここのディレクトリ指定も build となっています。
静的HTMLの出力先である out に修正しましょう。

AWS_Amplify_Console.png

動作確認

以上3点を修正して、再度デプロイしたところ無事にSPAが表示されました :tada:
My_page.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?