S3 cloudfront , nginx, certbot(Let's Encrypt) 이용해 mern 배포하기

전체적 s3, cloudfront의 그림

 

 

우리는 S3에 저장된 프론트 파일들을 cloudfront의 도메인 주소를 통해 만나볼 수 있게된다.

직접전 파일 공간을 불러오긴 좀 그러니까, cloudfront의 도메인 주소를 통해 불러오는 것이다.

 

 

---

Let's Encrypt를 사용하여 Express 앱을 배포하고, Nginx를 통해 리버스 프록시 설정을 하며, CloudFront로 콘텐츠를 배포하는 경우의 일반적인 설정 순서는 다음과 같습니다. 로드 밸런서의 필요성은 애플리케이션의 규모와 트래픽 양에 따라 달라질 수 있으니, 반드시 필요한 것은 아닙니다.

 

<백엔드 배포 과정>

1. EC2 인스턴스 및 보안 그룹 설정

• EC2 인스턴스 생성: 원하는 사양으로 EC2 인스턴스를 생성합니다.
• 보안 그룹 설정: 인스턴스에 연결된 보안 그룹에서 Nginx가 사용할 80(HTTP)과 443(HTTPS) 포트로의 인바운드 트래픽을 허용합니다. Express 앱이 3000번 포트에서 실행되더라도, 외부에는 Nginx를 통해 80과 443 포트만 노출됩니다.

2. Express 앱 설정

• Express 앱 배포: Express 앱을 EC2 인스턴스에 배포하고, 앱이 3000번 포트에서 리스닝하도록 설정합니다.

3. Nginx 설치 및 설정

• Nginx 설치: EC2 인스턴스에 Nginx를 설치합니다.
• 리버스 프록시 설정: Nginx 설정 파일(nginx.conf 또는 사이트별 설정 파일)에 리버스 프록시를 설정하여, 80(HTTP) 및 443(HTTPS) 포트로 들어오는 요청을 Express 앱의 3000번 포트로 전달합니다.
•   
• server { listen 80; server_name your_domain.com; location / { proxy_pass http://localhost:3000; ... } }
• nginxCopy code

4. Let's Encrypt SSL/TLS 인증서 발급 및 적용

• Certbot 설치: Certbot을 설치하여 Let's Encrypt 인증서를 자동으로 발급받고 Nginx에 적용합니다.
• SSL/TLS 설정: Nginx 설정에 HTTPS를 위한 SSL/TLS 설정을 추가합니다. Certbot이 이 과정을 자동화할 수 있습니다.

---

<프론트 배포 과정>

5.0 s3 배포. s3 배포를 통해서 넷상에 내 프론트 파일내용을 저장한다.

이때 주의할 점은  localhost:port를 내가 지정한 서버 도메인으로 코드를 수정해야 한다.

예시는 맨 아래에 있으니 참고.

5. CloudFront 배포 생성

• CloudFront 배포 설정: CloudFront 콘솔에서 새 배포를 생성하고, 오리진 소스로 EC2 인스턴스의 도메인 이름(또는 Nginx가 구성된 ELB)을 지정합니다.
• ACM 인증서 (선택적): CloudFront에서 HTTPS를 사용하기 위해, ACM을 통해 발급받은 SSL/TLS 인증서를 CloudFront 배포에 적용할 수 있습니다. Let's Encrypt 인증서는 CloudFront에 직접 적용할 수 없습니다.

6. Route 53을 통한 도메인 이름 설정

• DNS 레코드 설정: Route 53에서 구매한 도메인에 대해 DNS 레코드(A 레코드 또는 CNAME 레코드)를 설정하여, CloudFront 배포 또는 EC2 인스턴스의 IP 주소를 가리키도록 합니다.

 

cname 레코드 과정은 cloudfront 배포, acm 인증서 배포된 후에, 할 수 있으니 먼저 강사가 미리 한다고 따라하지 말자.

route 53에서 인증을 못했는데... 아직 레코드가 있는게 이상한 것이다.

만약 뜬다면 이전 내용이니 기다렸다가

'배포 도메인 이름'을 잘 기억해 놨다가 헷갈리지말고

방금 배포한 CNAME을 구분하도록 하자. 

 

그리고 명심할 점은 cloudfront 인증서 발급 후의, 추가 배포가 엄청 오래 걸리는데 그 전까지 CNAME 레코드 등록은 하지말고 잠시 대기.(많게는 20분 댁소요)

---

s3 배포(왠만하면 영상 사서 보자.)

 

S3 버킷 생성은 하되, 이미지 파일 등록을 위한 S3Client나 multer 등은 

db에서 따로 링크를 들고오는 내게는 필요가 없다.

하지만 버킷 생성자체는 리액트 파일 업로드를 위해서 필요하다.

과정은 아래 내용 참고(s3, cloudfront 배포만 나와있지, 개인적으로 발급한 도메인주소와 연결 및 https는 아래링크에 x)

https://velog.io/@jwo0o0/AWS-S3%EB%A1%9C-React-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[AWS] S3로 React 애플리케이션 배포하기

 

---

 

cloudfront를 통해 s3 내용을 이어주기
https://velog.io/@kimkevin90/React-CRA-%EB%B0%B0%ED%8F%ACAWS-S3-CloudFront

React CRA 배포(AWS S3 & CloudFront)

 

 

---

과정

s3의 과정은 윗 링크 혹은 강의 영상에 있는데,

확인해야 할 점은 s3 정적파일을 만들고서, 열어봤을 때, 화면이 뜨지 않으면 build나 업로드를 다시해주는게 좋다. 

S3에 나의 리액트 build 파일들을 모두 업로드 한 후, *표시를 통해 모든 곳에서 접근할 수 있도록 한다.

그것을 cloudFront의 발급 도메인을 통해서 불러들이게 된다.

S3에 저장된 리액트 관련 indx.html을 렌더링한 모습

 

https://asdfasdfjlqwkerj.cloudfront.net/

(임시 예시 링크이다. 물론 주소는 달라서 안들어가짐)

 

cloudfront.net이라 뜨는 그나마 평소보는 도메인 주소 같은 사이트에 들어가보면 

기존 S3 링크로 들어간 화면과 똑같은 화면이 뜬다.

 

주의사항. cloudfront 생성할 때, 배포가 제법 오래걸린다.(아시아, 미국, 유럽 모든 곳에서 너의 사이트로 접근 가능하도록 수정하는 건데 당연한것이다.)

저 마지막 수정의 배포가 -> 구체적 날짜로 바뀌기 전까지는 도메인에 들어가지 말자. 나중에 레코드 생성이 안먹힌다.

 

 

인증서 요청할 때, 이렇게 route53에서 레코드 생성이라고 뜰텐데 이것을 하고나서 , cname이름을 잘 기억해두자.
여러번 요청할 일이 생길경우, 같은 도메인 주소를 사용하기 때문에 이전 cname은 지우도록하자.

(실수로 이전 s3내용을 지우고 s3 업데이트 및, cloudfront 다시 생성할 때, 이 route53 레코드 생성은 같은 도메인을 사용해서 인증서 및 cloudfront 발급해준거라....  다시 인증서 발급, cloudfront 배포할 시, route53레코드 이전 것을 제거하지 않으면 안뜨기 때문에 헷갈리는 상황이 오니까 잘 기억하자.)

 

혹시나 cname 제거하기 전에, 관련 기호가 ceritficate manager에서의 코드와 일치하는지 확인해보고 제거하자.

이전 내역은 만약 같은 주소를 쓰고 있다면 삭제하자.

---

DNS 적용하기 

레코드를 route53에서 제작해야 한다.

그런데 인증서 적용 및 배포를 완료하고서도 리소스가 보이지 않는다. 그래서 대체 도메인을 설정했다.

@없이 칸을 비우고, 시간이 좀 지나니, 리소스 다시 생김.

대체 도메인을 지정하는 모습. 리소스가 나오지 않아서 레코드 생성을 못하니 만약을 위해 해

 

• A 레코드 (또는 Alias 레코드): 특정 도메인이나 서브도메인이 CloudFront 배포의 URL로 라우팅되도록 설정합니다. 이는 방문자가 해당 도메인으로 접속했을 때 CloudFront를 통해 콘텐츠를 제공받도록 합니다.
• CNAME 레코드 (인증서 발급용): ACM 인증서의 도메인 소유권 검증을 위해 사용됩니다. 이 레코드는 인증서 발급 과정에만 사용되며, 일반적인 트래픽 라우팅에는 사용되지 않습니다.
•  

---

 

A레코드까지 잘 생성 되었으면 A레코드에서 지정한 도메인으로 들어가보면 된다.

---

도메인과 https 적용하기.

 

cloudfront는 인증서를 발급하여 도메인 연결 및 https 적용이 가능해지는데

cloudfront 인증서는 버지니아 북부 리전으로 해서 발급받아야 한다.

 

프론트 용이니 api.주소가 아니라, 주소로 발급을 받자.

 

---

발급은 받았는데

Route53 관련해서 연결을 시켜줘야 한다.

 

 

인증서 발급 받았으면 미국 인증서 적용만 하고난 후 그대로 설정 종료

 

 

---

 

레코드 프론트용 발급.

cname 두개는 api.ge-rang.com , ge-rang.com 두개로 임시로 사용할 수 있도록 해놓은 설정이라 안건드리면 된다.

새롭게 A유형을 생성할 것이다.

 

 

 

 

cloudfront 비활성화 할때 주의사항

1. 오래 걸린다.

2. 그 도메인으로 켜놓고 들어가 있으면 중지는 되지만 수정이 안되니까 거기서 나오자.

---

백엔드 실행

 

EC2 인바운드 보안 그룹 규칙

express 서버는 보통 3000번 포트로 띄우기 때문에 아래와 같이 사용.

 

 

띄우기 성공. 일단 이것을 nginx를 설치하여서 프론트가 접근해오는 포트를 관리하도록 할것이다.

백엔드 용 레코드 생성완료

 

---

<레코드 생성하기>

CNAME 레코드와 A 레코드의 차이

• A 레코드 (Address Record): 도메인 이름을 IP 주소로 매핑합니다. 웹 서버의 실제 IPv4 주소를 지정하는 데 사용되며, 도메인 이름을 입력했을 때 해당 IP 주소로 라우팅하도록 합니다. 예를 들어, example.com이 123.45.67.89라는 IP 주소의 서버를 가리키도록 설정할 수 있습니다.
• CNAME 레코드 (Canonical Name Record): 하나의 도메인 이름(별칭)을 다른 도메인으로 매핑합니다. 주로 서브 도메인을 주 도메인에 연결하거나, 긴 도메인 이름을 더 짧은 별칭으로 사용하기 위해 사용됩니다. CNAME 레코드는 도메인 이름을 다른 도메인 이름으로 리다이렉션하므로, 도메인 이름이 변경되었을 때 유용하게 사용할 수 있습니다. 예를 들어, www.example.com을 example.com으로 리다이렉트할 수 있습니다.

---

route53에서 레코드를 생성해도 ip주소만으로는 못들어간다. 도메인 주소가 ip주소만 가리키고 있기 때문에

도메인주소 + 포트 주소를 추가해줘야 한다.

---

sudo apt update
sudo apt install nginx
sudo service nginx status 
-> active 뜨면 ok

---

certbot : https의 인증서를 발급받아주는 역할 

 

발급을 누르면 https 보안을 위한 내역이 잘 적용됨을 확인.

 

---

<nginx 수행 포트 수정>

 

cd /etc/nginx
cd sites-available
vi default
proxy_pass http://localhost:3000/;

sudo service nginx restart

https://api.도메인주소.com으로 접속했을 때 페이지가 정상적으로 뜨면, SSL/TLS 설정이 Nginx에 성공적으로 추가되어 HTTPS 연결이 활성화된 것이다.

 

 

 

---

코드 업로드 할 때, 주의 사항. 

도메인 코드 수정하고 올려야한다.

 

const res = await axios.delete(

      `http://localhost:3000/user/delete-expense/${id}`

    );

 

이러한 프론트 코드가 있다면 서버 주소인 

 

https://api.도메인주소.com 을 localhost:3000대신 써야 한다.