들어가기에 앞서...
해당 글은 AWS의 EC2를 통해 전체적인 배포 플로우에 대해 기록하기 위한 글로 프로젝트 코드는 Next.js with-supabase 템플릿을 사용한다.
전체 플로우
[인프라 설정 및 EC2 준비]
1. AWS EC2 인스턴스 생성
2. 키 페어 생성 및 보관
3. 보안 그룹 설정
4. 탄력적 IP 할당
[서버 환경 구성]
1. 서버 접속
2. 패키지업데이트 및 Node.js 설치
3. Git설치 및 프로젝트 클론
4. 환경변수 파일 직접 생성
[프로젝트 빌드 및 실행 (Node.js 서버 실행)]
1. 종속성 설치
2. 프로젝트 빌드
3. 프로세스 관리자 설치(pm2)
4. 프로젝트 실행
5. 웹 서버 설정 -> NGINX 사용
6. 도메인 연결 및 HTTPS 설정
[앱라우터와 Supabase 연결]
수파베이스에서 프로젝트를 생성하면 아래와 같이 프로젝트 URL과 API키를 발급 받을 수 있다.
아래와 같이 .env.local에 넣어주자. 이때 반드시 .gitignore에 해당 파일은 제외하도록 작성해야한다.
이렇게 되면 프로젝트 코드의 준비는 끝났다.
[인프라 설정 및 EC2 준비]
AWS EC2 인스턴스 생성 + 키 페어 생성 및 보관 + 보안 그룹 설정
이제 인스턴스를 만들자.
대부분 기본 선택사항은 건들지 말고 우리가 필요한 사항들만 설정해주자.
-
인스턴스의 이름과 사용할 OS를 선택한다.
-
Key pair도 만들어주자.
-
보안그룹을 따로 만들어줘야한다.
아웃바운드 규칙은 따로 만들지 않고 인바운드(->외부에서 해당 인스턴스로 접근할때 적용할 보안 규칙) 규칙만 만들면 된다.-
ssh로 접속해서 인스턴스를 조작해야 한다.
-
http접속을 통해 유저가 접근할 경우 NginX가 HTTPS로 리다이렉트 시켜줘야한다 + 80포트를 통해 Certbot도구를 활용해 인증서를 발급 받아야한다.
-
최종적으로 클라이언트는 https를 통해 해당 웹 사이트를 이용할 수 있어야한다.
다음과 같은 이유들로 아래와 같이 보안 그룹을 설정한다.
-
필요한 인스턴스 구성은 끝냈으니 이제 인스턴스를 생성한다.
탄력적 IP 할당
아래 사진과 같이 새로운 인스턴스가 만들어졌다. 하지만 지금 인스턴스의 IP는 고정된 IP가 아니다. 즉 인스턴스가 만약 꺼졌다가 다시 실행되면 완전히 새로운 IP로 설정된다. 이렇게 되면 나중에 우리 페이지를 도메인에 등록할 텐데 IP가 바뀌면서 도메인에 등록한 IP와 현재의 인스턴스 IP가 일치하지 않는 문제가 발생한다.
그래서 탄력적 IP를 할당해야한다.
이제 발급 받은 이 IP를 우리의 인스턴스에 등록하자.
인스턴스 탭에서 우리가 만든 인스턴스를 선택하자.
다시 인스턴스 대시보드에서 우리가 만든 인스턴스의 IP를 보면 일라스틱IP가 제대로 할당됨을 확인할 수 있다.
이제 직접 인스턴스에 접속해서 우리의 프로젝트를 인스턴스에 넣어주자.
[서버 환경 구성]
인스턴스에 접속한다.
Node 설치
먼저 node.js 환경에서 프로젝트를 실행시켜야해서 node.js를 설치해준다.
공식문서에 나와있는 방법대로 설치 해주면 된다.
이때 nvm을 설치한뒤에 nvm 환경 변수를 현재 쉘에 적용해줘야한다.
Git설치 및 프로젝트 클론
Git 도 공식 문서에 나와있는 방법으로 설치한다.
-> 각 인스턴스의 운영체제에 맞는 방법으로 설치하면 된다.
이제 깃허브에서 실제로 배포할 프로젝트를 클론하자.
환경변수 파일 직접 생성
클론한 디렉토리를 살펴보면 환견변수 파일이 빠져있음을 확인 할 수 있다. 이제 우리가 직접 수동으로 환경변수를 추가해 주면 된다.
# 환경변수 파일 생성
vi .env.local#-------vi 편집기 사용
NEXT_PUBLIC_SUPABASE_URL=슈퍼베이스 url 입력
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=api키 입력이제 인스턴스의 프로젝트 코드 설정은 모두 끝났다.
도메인 연결
기존의 도메인의 호스팅 영역에서 새로운 레코드를 생성한다. 이때 원하는 경로 이름을 설정하고, ec2의 IP를 설정해준다.
[프로젝트 빌드 및 실행 (Node.js 서버 실행)]
종속성 설치
인스턴스에서 프로젝트를 실행시키기 위한 종속성을 설치해준다.
npm i프로젝트 빌드
해당 앱라우터 프로젝트를 빌드해준다.
npm run build성공적으로 빌드가 실행됨을 알 수 있다.
프로세스 관리자 설치 + 프로젝트 실행
해당 프로젝트를 관리하는 도구를 이용해 서비스를 운영하게 될텐데 우리는 pm2를 이용해 해당 프로세스를 백그라운드에서 관리한다. 이렇게 되면 더욱 안정적으로 프로세스를 관리할 수 있다.
pm2공식문서를 가이드를 따라서 설치하자.
npm install pm2 -g
이제 우리는 직접 npm start 와 같은 명령어를 직접 입력하는게 아니라 pm2 에 이런 명령어를 전달해서 pm2가 해당 프로세스를 관리하도록 해야한다.
pm2 start npm --name "my-supabase-server" -- start위의 명령어의 뜻은 다음과 같다.
-
pm2 start npm: pm2이 실행할 주 프로그램은 npm이다.
-
--name "my-supabase-server" : 실행하는 프로세스의 이름을 전달한다.
-
-- start : npm 프로그램에 전달할 인자는 start이다.
성공적으로 실행이 되면 status에 online으로 적혀 있다.
웹 서버 설정 -> NGINX 사용
이제 우리가 할 작업은 유저가 직접 우리의 넥스트
서버에 접근하도록 하지 않고 항상 NginX 웹서버를 통해서 접근하도록 해야한다.
nginx를 먼저 설치한다.
$ sudo apt update
$ sudo apt install nginx이때 nginx의 설정파일을 조작해 리버스 프록시를 설정해야한다. 설정파일은 최상위 경로인 루트 디렉토리의 /etc에 존재한다.
우리는 다음과 같은 목적을 수행하기 위해 Nginx의 설정파일을 수정해야한다.
- 외부에서 도메인의 80포트(http)로 접근시 Nginx는 이 요청을 내부의 3000번 포트로 연결해줘야한다.
- 인증서 발급 목적: 우리는 Certbot을 통해 인증서 발급을 하게 된다. 이때 http://example_domain.com 으로 접속해 인증 절차를 하게되는데, 이 nginx설정이 있어야만 certbot의 확인 요청이 우리의 서버에 도달할 수 있다. (80포트의 요청이 내부의 3000번 포트로 이어지지 않으면 인증 작업이 성공 할 수 없다.)
그래서 다음과 같이 nginx의 설정파일을 열고 아래와 같이 내용을 추가한다.
sudo vi /etc/nginx/sites-available/default
- listen 80 : 80포트(HTTP)로 들어오는 요청을 받는다.
- server_name supabase.y-minion.link : supabase.y-minion.link주소로 들어온 요청만 처리한다.
- proxy_pass http://127.0.0.1:3000 : 들어온 요청을 내부에서 실행중인 앱으로 전달한다.
설정을 완료하면 설정 파일 문법 검사를 한뒤 Nginx를 재시작 한다.
# 설정 파일 문법 검사
sudo nginx -t
# Nginx 재시작
sudo systemctl restart nginx이제 설정한 우리 인스턴스에 등록한 도메인인 http://supabase.y-minion.link 에 접속해보자.
리버스 프록시를 설정하기 전에는 아래와 같이 Nginx의 초기 화면이 나왔지만,
설정을 완료하고 Nginx를 재시작하면 아래와 같이 올바르게 리버스 프록시가 설정되어 인스턴스 내부의 우리 웹 프로젝트로 연결해준다.
Certbot 실행 및 자동 설정
우선 들어가기에 앞서 Certbot 공식 레퍼런스에 들어가서 현재 상황에 맞게 항목들을 선택하면 어떻게 해야 인증서를 발급받을 수 있는지 친절하게 설명해준다.
Certbot 설치
우리는 Nginx의 설정파일을 수정해 80포트로 접근하면 내부에서 실행중인 어플리케이션으로 접근하도록 조작을 완료 했다.
Certbot을 사용해 Let's Encrypt 서버에 해당 도메인으로 인증서를 발급받아야한다. 이때 앞에서 설정한 80포트를 통해 인증절차가 실행된다.
다음과 같은 절차를 실행하여 Certbot을 설치한다.
# snapd 설치 및 업데이트
sudo snap install core; sudo snap refresh core
# 기존 certbot-auto 또는 OS 패키지 삭제 (설치한 적이 있다면)
sudo apt-get remove certbot
# Certbot 설치
sudo snap install --classic certbot
# Certbot 명령어 링크 생성
sudo ln -s /snap/bin/certbot /usr/bin/certbotCertbot 실행 및 인증서 발급
아래 명령어를 실행하면 Certbot이 앞에서 우리가 설정한 Nginx 설정 파일을 분석하여 server_name에 명시된 도메인에 대한 인증서 발급을 시도하고, 성공하면 Nginx 설정에 HTTPS 관련 내용을 자동으로 추가해 준다.
sudo certbot --nginx위 명령어를 입력하면 다음과 같은 질문이 등장한다.
읽어보고 알맞게 대답을 하면 된다.
위의 과정을 모두 완료하면 웹 서비스의 도메인에 접속시 HTTPS 연결이 활성화된다.
성공적으로 https로 접근이 완료된 것을 확인 할 수 있다.
HTTP -> HTTPS 리다이렉트 설정
만약 사용자가 http로 접근하는 경우가 발생할 수 있다. 이때 우리는 Nginx가 해당 유저의 요청을 https로 리다이렉트 하도록 설정해 줘야한다.(보안 이슈 목적)
그래서 nginx의 설정파일에서 80포트(HTTP)로 요청이 오면 HTTPS로 리다이렉트 한다는 옵션을 추가해주면 된다.
# Nginx의 사이트 설정파일을 열자.
sudo vi /etc/nginx/sites-available/default하지만 이미 Certbot이 올바르게 http의 요청을 https로 리다이렉트 하도록 설정했음을 확인 할 수 있다.
이렇게 모든 과정을 수행하고 https://your_domain.com으로 접속하면 자물쇠가 걸린 안전한 사이트가 완성됩니다.
