1. 본 기사는

create-next-app

에서 작성한 Next.js의 각종 파일을 github에 업로드하고 AWS Amplify에서 배포하는 파이프라인을 만들 때 주저했던 포인트(빌드 설정)의 메모.

2. Next.js 다양한 파일을 github에 업로드

github에서 새 리포지토리 만들기

terminal을 열고 파일을 저장할 위치로 이동 (이하 terminal의 명령)

package.json 내의 "build"에 추가 여기 주의!

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

을

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

로 편집합니다.
4. create-next-app [アプリ名] 로컬에 각종 파일을 작성
5. git init .git 파일의 작성
6. git remote [リポジトリのurl] 원격 리포지토리 저장
7. git add . 모든 파일을 커밋 대상으로
8. git commit -m [コメント]로 커밋
9. git push remote origin master 에서 master 브랜치에 푸시

3 원격 리포지토리와 Amplify 연결

AWS Management Console을 열고 サービス에서 AWS Amplify를 선택

アプリを作成 누르기

'From your existing code'에서 GitHub를 선택하고 Continue

"GitHub 인증에 성공했습니다."라는 메시지가 나타나면 "리포지토리"풀다운 메뉴에서 만든 리포지토리를 선택하고 次へ를 누릅니다.

저장소의 풀다운 메뉴에서 master를 선택하고 次へ를 누르십시오

'Select a backend environment'에서 백엔드 환경을 선택(없으면 만든다)

"Select an existing service role or create a new one so Amplify Console may access your resources."는 기본 역할을 선택합니다.

「빌드의 설정」 여기 주의!

  artifacts:
    baseDirectory: build

을

  artifacts:
    baseDirectory: out

로 바꿉니다.

9. 次へ10. 保存してデプロイ

4. 기도하고 기다린다

이미지와 같은 페이지로 전환하면 프로비저닝에서 검증까지 진행할 수 있기를 바랍니다.
모든 과정이 끝나면 왼쪽에있는 https://master...의 url을 누르십시오. 이것이 이제 생성 된 Next.js 앱의 url이됩니다.
자체 도메인 설정도 Amplify 콘솔에서 할 수 있습니다.

5 요약

주의하는 것은 「 여기 주의!」라고 쓴 2점.
빌드 단계에서 정적 html을 만들 때 next export라는 명령이 필요하며 이러한 파일의 출력 대상을 out로 지정해야한다고합니다.