CI/CD를 사용하여 5분 이내에 AWS Amplify에 Next JS 앱 배포

S3 또는 Amplify를 사용하여 AWS에 정적 앱/웹 사이트를 배포할 수 있습니다. 저는 AWS Amplify를 선호하며 이 자습서에서는 CI/CD를 사용하여 5분 이내에 AWS Amplify에 Next.js 앱을 배포하는 방법을 빠르게 보여드리겠습니다.

이미 next.js 앱이 준비되어 있다고 가정합니다. 그렇지 않은 경우 clone this sample app .

1 단계:

AWS 콘솔에서 "AWS Amplify"로 이동합니다.


AWS Amplify 홈페이지에서 "시작하기"를 선택합니다.


그런 다음 '전송' 섹션에서 '시작하기'를 클릭합니다.

2 단계:

GitHub를 선택한 다음 "계속"을 클릭합니다. 도움이 필요한 경우 Github를 승인하라는 메시지가 표시됩니다.

3단계:

저장소, 분기를 선택한 후 "다음"을 클릭하십시오.

4단계:

AWS Amplify는 빌드 스크립트를 자동으로 생성하지만 약간 변경해야 합니다. "편집"을 클릭하고 build 및 artifacts 섹션을 변경합니다.


최종 빌드 설정은 다음과 같아야 합니다. 👇🏽

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run export
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

빌드 설정을 업데이트했으면 "저장"을 클릭합니다.


"다음"을 클릭하십시오

5단계:

"저장 및 배포"를 클릭합니다.


그게 다야. 모든 단계를 통과하면 링크를 클릭하고 앱이 작동하는 것을 볼 수 있습니다.


CI/CD(기술적으로는 CD만 해당)가 작동하는지 테스트하려면 앱을 변경하고 리포지토리에 푸시합니다. 모든 단계가 지나간 후에야 생중계됩니다.


ℹ️ 참고 사항:

yarn를 사용하지 않는 경우 그에 따라 빌드 설정을 변경하십시오(npm )

사용중입니다Next.js static export

모든 프런트 엔드/정적 앱(React, Vue, Angular 등)을 호스팅하는 데 동일한 절차를 사용할 수 있습니다. 심지어 Nuxt.js 앱을 배포할 수도 있습니다

.

static exports를 사용하지 않고 SSR이 필요한 경우 read this