Amazon S3에서 정적 Next.js 웹 사이트 구성

Cloud Resume Challenge를 통과하면서 멀티 블로그 시리즈의 시작입니다. 광고된 바와 같이 Cloud Resume Challenge은 인증에서 클라우드 채용으로 전환하는 인기 있는 16단계 프로젝트입니다.

저는 이미 직업이 있고 두 개의 AWS 시험에 합격했습니다. 그래도 몇 달 전, 나는 거기에 무엇이 있는지 모험을 떠났고 오 이런, 인터뷰에서 대답할 수 없는 클라우드 질문의 수는 나를 정말로 생각하게 만들었습니다. "나는 내 물건을 몰라. 여기에서 정말 좋은 일을 할 수 있도록 관련된 사람들에게."최악의 부분은 내가 맹목적으로 이력서를 보내지 않았고 이 회사들이 나에게 전화하기를 바라지 않았다는 것입니다. 나는 내 연결에 손을 뻗어 거기에 내 이름을 넣어달라고 요청했습니다. 그 중 일부는 아직 공개되지 않은 기회와 함께 저에게 돌아왔습니다. 저는 이 인터뷰에서 저조했지만 이제 이 회사들이 무엇을 찾고 있는지 알고 있습니다.

어쨌든, 나는 내가 더 나은 후보자가 되기 위해 앞으로 나아갈 일에 관한 것이기 때문에 내가 이 인터뷰를 어떻게 되풀이했는지에 대해 장황하게 말하고 싶지 않습니다. 그래서 내가 다시 모험을 하기로 결정할 때마다 준비하겠습니다!

청크 1: 프런트엔드 구축

청크 1의 이 부분에 대한 최소 요구 사항은 일부 CSS가 포함된 HTML 페이지가 있고 Amazon S3 버킷에서 파일을 제공하는 것입니다.

충분히 간단하게 들리지만 저는 프론트엔드 개발을 좋아하기 때문에 개발자 모드를 추가하기로 결정했습니다. HTML과 CSS 대신 JavaScript 프레임워크를 사용하여 웹사이트를 구축하겠습니다.

스택:

Next.js

아마존 S3

Next.js 시작하기

내가 지금까지 가지고 있는 것을 보고 싶다면 GitHub 저장소here를 만들었습니다. Chunk 1의 이 부분에서는 Next.js 앱이 필요하고 build 및 export 앱만 있으면 됩니다.

create-next-app를 사용하여 새 Next.js 앱을 만듭니다. 우리는 pnpm 에서 Telescope 을 사용해 왔으며 단순히 npm 로 돌아갈 수 없습니다.

pnpm create next-app

pnpm run dev를 실행하여 http://localhost:3000에서 개발 서버를 시작하고 초기 Next.js 응용 프로그램을 봅니다.

build 파일에서 package.json 스크립트를 업데이트합니다.

  "scripts": {
    ...
-    "build": "next build",
+    "build": "next build && next export",
    ...
  },

실행pnpm run build은 정적 웹 사이트에 필요한 모든 것이 포함된 out 디렉토리를 생성합니다.

cloud-resume-challenge
  ├── .next
  ├── node_modules
+ ├── out
+ │   ├── _next
+ │   ├── favicon.ico
+ │   ├── index.html
+ │   └── vercel.svg
  ├── pages
  ├── public
  ├── styles
  ├── .eslintrc.json
  ├── .gitignore
  ├── next.config.js
  ├── package.json
  ├── pnpm-lock.yaml
  └── README.md

Amazon S3에서 Next.js 웹 사이트 호스팅

이 부분은 주로 Tutorial: Configuring a static website on Amazon S3을 따랐습니다. 그러나 이후 블로그 게시물에서 CloudFront 배포를 진행하려면 S3 버킷에 대한 모든 퍼블릭 액세스를 차단해야 합니다.

Amazon S3 console에서 버킷 생성을 선택하고 다음을 입력합니다.

버킷 이름: cindy-crc

AWS 지역: 미국 동부(버지니아 북부) us-east-1

모든 공용 액세스 차단을 선택 취소합니다.

버킷 버전 관리: 활성화

만들기를 클릭합니다.

버킷이 생성되면 out 폴더에서 버킷

으로 모든 항목을 업로드합니다.

목록에서 새로 생성된 버킷을 클릭하고 속성 탭으로 이동합니다

.

정적 웹 사이트 호스팅 및 정적 웹 사이트 호스팅 활성화

에서 맨 아래까지 이동합니다.

색인 문서를 index.html로 지정

변경 사항을 저장하면 http://cindy-crc.s3-website-us-east-1.amazonaws.com/과 같은 Bucket 웹 사이트 엔드포인트가 표시되어야 합니다.

버킷의 권한 탭에서 새 버킷 정책을 추가하고 변경 사항을 저장합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
-                "arn:aws:s3:::Bucket-Name/*"
+                "arn:aws:s3:::cindy-crc/*"
            ]
        }
    ]
}

http://cindy-crc.s3-website-us-east-1.amazonaws.com/

를 방문하여 웹 사이트 끝점을 테스트하십시오.

Amazon S3에 정적 웹 사이트가 있는 것에 만족하는 경우 여기에서 멈출 수 있지만 CloudFront 사용으로 이동하는 Cloud Resume Challenge의 목적을 위해 버킷 정책을 제거하고 모든 공개를 차단해야 합니다. 다시 액세스하십시오.