[SDLC] AWS CloudFront + S3 배포하기

 

[SDLC] Google OAuth2 & HTTPS와 SSL/TLS

 

 

자, 드디어 SSL이 적용된 도메인도 있겠다,
잘 만들어진 프론트 페이지도 있겠다,
진짜로 나의 웹사이트를 호스팅 해보자!

---

살면서 처음으로 AWS를 사용해봐서 기록으로 남겨본다.

S3 배포 하기
1. 나의 프론트 프로젝트를 Static File 로 내보낸다

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export', // Add this line
    webpack: (config) => {
...
}

export default nextConfig;

웹 폴더 안에 `next.config.js` 파일에 `output: 'export'` 를 추가해준다.

그리고 나서

inhwa.son@inhwas-air web % yarn build
...
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (7/7)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    1.88 kB         114 kB
├ ○ /_not-found                          871 B          88.1 kB
├ ○ /auth/callback                       1.23 kB         114 kB
└ ○ /dashboard                           25.4 kB         393 kB
+ First Load JS shared by all            87.2 kB
  ├ chunks/23-66c706b5a1650c94.js        31.6 kB
  ├ chunks/fd9d1056-f2795c81bc854f11.js  53.6 kB
  └ other shared chunks (total)          2.03 kB


○  (Static)  prerendered as static content

✨  Done in 12.89s.

이런 식으로 정상적으로 빌드가 된 것을 확인한다.

 

2. `out` 폴더를 AWS S3에 올린다.

AWS에는 진짜 수십개의 앱이 있는데 S3는 그냥 저장소라고 생각하면 좋을 것 같다.

Amazon S3

`out` 폴더 전체 내용 Upload

 

3. URL 생성 확인

Properties 탭 아래에 보면 Static website hosting이 있다.

아래 사진 처럼 클릭 가능한 웹사이트 url이 뜨면 내가 방금 업로드한 `out` 폴더의 `index.html`로 웹사이트가 열리는 것을 확인할 수 있다.

---

CloudFront 연결하기

내가 이해한 바로는 좀 더 안전하게 웹 사이트를 지키고 도메인 네임 연결을 위해서는 CloudFront가 필요하다.

https://aws.amazon.com/ko/cloudfront/

CDN 서비스 | CloudFront | Amazon Web Services

 

1. CloudFront 생성

없다면 Create Distribution

2. CloudFront와 S3 연결

좀전에 업로드한 S3가 자동으로 목록에 띄워준다.

 

3. 나머지 쭉쭉 하고 나서 생성 완료 확인

정상적으로 생성이 완료되면 이렇게 Distribution domain name이 생긴다.

요 사이트는 https로 보안이 있는 상태로 배포됐다.

 

여기까지는 이 친구가 참 자세히 잘 설명해준다.

 

---

 

ACM 설정

이제 내가 발급 받은 domain을 CloudFront에 연결해주기 위해서는 ACM을 통해 내가 발급받은 인증서를 가져와야 한다.

인증 관리자 - AWS Certificate Manager - AWS

나는 이미 발급받은 SSL이 있으므로 'Import'를 통해 가져와야 한다

여기서 약간 헷갈렸었다.

1. Certificate body: 이메일로 날라온 내 인증서 전체
2. Certificate Private Key: CSR 생성시 받은 private key. 잘 보관해 뒀어야 한다!!
3. Certificate chain: 나는 name.com 에서 생성받아서 여기 넣어줘야 정상 작동을 한다. 메일로 날라온 SSL에 보면 총 4개의 파일이 있는데 아래처럼 두개를 엮어서 체인을 만든 다음 전체 내용을 복사해주면 된다.

cat SectigoRSADomainValidationSecureServerCA.crt USERTrustRSAAAACA.crt > certificate_chain.crt

 

---

그렇게 우리의 웹사이트는 https://www.dragonai.live 로 잘 올라갔다!