정적 Next.js를 AWS S3에 배포하는 방법

Next.js React 기반의 멋진 오픈 소스 프레임워크를 사용하면 전체 애플리케이션을 관리할 수 있습니다! 프런트엔드와 백엔드 모두 자바스크립트 개발자에게 적합하고 이 모든 것이 고성능이지만 이 기사에 도착하면 확실히 알고 있어야 합니다. 그렇지 않다면 홉, documentation

목차

이 튜토리얼에서는 Node.js가 필요합니다.

Next.js 앱 만들기

AWS S3 butcket 정적 웹 사이트 설정

S3 버킷에 Next.js 애플리케이션 게시

Next.js 앱 만들기

Next.js에서 권장하는 대로 create-next-app를 사용하여 프로젝트를 생성합니다.
프로젝트를 초기화하는 방법에는 두 가지가 있습니다.

npx create-next-app
# or
yarn create next-app

그런 다음 지침을 따르고 마지막으로 프로젝트로 이동하여 시작하십시오.

cd my-project && yarn dev

서버는 포트 3000에서 시작하므로 http://localhost:3000로 이동합니다.



축하합니다 🎉 ! 이제 이 정적 Next.js 애플리케이션을 aws S3 버킷에 배포해 보겠습니다.

AWS S3 버킷 정적 웹 사이트 설정

자습서를 계속하기 위해 aws 콘솔로 이동합니다. 이 섹션에서는 관리 콘솔에 액세스할 수 있는 AWS 계정이 이미 있다고 가정합니다.

관리 콘솔에 액세스

서비스 찾기에서 S3 검색

버킷 만들기를 클릭합니다.

이름을 입력하십시오. 버킷 이름(예: my-awesome-nextjs-app)은 고유해야 합니다.

모든 공개 액세스 차단을 선택 해제하여 공개 액세스를 활성화하고 유효성을 검사하고 수신 확인을 확인하면 버킷을 생성할 수 있습니다

.

목록에서 버킷

을 선택합니다.

속성 > 정적 웹 사이트 호스팅으로 이동하고 정적 웹 사이트 호스팅 활성화를 선택하고 인덱스 문서에서 정적 웹 사이트로 호스트 및 광고할 수 있는 오류 문서index.html , 변경 사항 저장

이제 권한 > 버킷 정책 편집으로 이동하여 이를 추가하고 리소스를 버킷 이름으로 변경합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[bucket-name]/*"
        }
    ]
}

이제 Next.js 앱을 내보내고 버킷에 추가할 준비가 되었습니다 🎉

S3 버킷에 Next.js 애플리케이션 게시

이 자습서를 완료하기 위해 package.json를 사용하여 Next.js 앱을 내보내고 내보낸 앱을 S3 버킷으로 가져옵니다.

시작하려면 파일package.json을 수정하여 빌드 스크립트를 변경해야 합니다.

    "build": "next build && next export"

이 빌드 스크립트는 앱을 빌드하고 애플리케이션을 실행하는 데 필요한 모든 정적 파일(폴더 아웃)을 생성합니다.



S3 Bucket으로 이동하여 out 폴더의 콘텐츠를 업로드합니다.



업로드를 클릭하면 로드 후 종료할 수 있습니다.



애플리케이션에 액세스하려면 속성> 버킷 링크가 표시되는 정적 웹 사이트 호스팅으로 이동하십시오.



이 링크로 이동해 보겠습니다.



🎉 축하합니다 🎉 정적 Next.js 앱을 aws S3 버킷에 업로드했습니다.

정적 애플리케이션을 코딩하고 내보내고 버킷에 추가하기만 하면 됩니다.

결론

보시다시피 aws에서 정적 Next.js 앱을 호스팅하는 것은 매우 쉽습니다. 다음 기사에서는 Next.js 앱에서 지속적인 통합을 사용하기 위해 github 작업을 사용하는 방법을 볼 것입니다. main 애플리케이션이 버킷에서 업데이트됩니다.

이 기사를 팔로우해 주셔서 감사합니다. 주저하지 말고 피드백을 보내주세요. 마음에 들면 공유하고 팔로우하세요.