AWS Amplify에서 hosting한 Next.js의 SPA가 '403 Access Denied'가 되었을 때의 대처법

Next.js에서 SPA를 생성하고 AWS Amplify에서 hosting을 시도한 결과 '403 Access Denied'가 표시되었습니다.

원인과 해결 방법을 요약합니다.

재현 절차

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가 표시됩니다.

어쩔 수 없었습니까?

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"
  }
}

게다가 .gitignore 에 out 를 추가해 둡시다.

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 로 수정합시다.

동작 확인

위의 3 가지 점을 수정하고 다시 배포 한 후 SPA가 성공적으로 표시되었습니다