OCI로 Next.js 배포하기

date

Mar 31, 2023

slug

oci로-nextjs-배포하기

status

Published

배포할 플랫폼 선정하기

Next.js를 사용하여 프로젝트를 진행하고 있는데 배포하는데 있어 문제가 발생했다.

백엔드 서버에 https를 적용하지 않아서 https가 자동으로 적용되는 배포 플랫폼(Vercel, AWS Amplify 등)은 Mixed Content Error로 인해 사용할 수 없었고, SSR을 사용하기 때문에 정적 페이지 호스팅 플랫폼(GitHub Pages, Netlify, AWS S3 등)도 사용할 수 없었다.

따라서 클라우드 서버(AWS EC2, OCI, NCP 등)를 통해 배포를 진행하기로 결정했고, 여러 클라우드 서버 중에서 OCI(Oracle Cloud Infrastructure)가 무료로 사용할 수 있는 인스턴스의 성능이 다른 서비스들 보다 좋기 때문에 해당 클라우드 서버를 사용하기로 결정했다.

OCI(Oracle Cloud Infrastructure) 인스턴스 생성

1. 인스턴스 생성

cloud.oracle.com에 접속하여 로그인을 진행하고 시작하기 화면 아래에 VM 인스턴스 생성을 클릭하여 인스턴스 생성을 진행한다.

2. 이미지 및 구성 설정

생성 페이지로 진입하면 이미지 및 구성에서 편집을 클릭하여 이미지와 구성을 설정한다.

이미지 변경을 클릭하여 원하는 OS를 선택한다.

그 다음 Change Shape를 클릭하여 구성을 변경한다.

기본으로 선택되어 있는 VM.Standard.E2.1.Micro는 프리티어에서 최대 2개까지 무료지만, 성능이 좋지 않다. VM.Standard.A1.Flex는 프리티어에서 OCPU 4개, 메모리 24GB까지 무료이고 성능이 좋지만, 리전별로 인스턴스 생성 제한이 있어서 제한을 초과하면 생성할 수 없다.
인스턴스 생성 제한이 초과되어 생성할 수 없는 경우 인스턴스 생성 자동화 스크립트로 제한이 풀릴 때까지 생성을 자동으로 시도할 수 있다. 관련 글: https://svrforum.com/cloud/319909

처음 인스턴스를 생성하는 경우 새 가상 클라우드 네트워크 생성을 선택한다.

사용하고 있는 공용 키가 없는 경우 각 키를 다운로드 받는다.

볼륨 크기는 프리티어의 경우 계정 당 200GB까지 사용 가능하므로 늘리고 싶다면 늘린다.

맨 아래 생성을 클릭하여 인스턴스를 생성한다.

3. ssh 접속


ssh -i 'key 파일 경로' ubuntu@<공용 IP 주소>

생성한 인스턴스로 배포하기

1. 포트 열기

먼저 80포트로 접속할 수 있게 포트를 열어준다.

인스턴스 세부정보에서 서브넷 클릭 → 보안 목록에서 이름 클릭 → 수신 규칙 추가

2. 우분투 방화벽 열기

우분투의 경우 ufw로 방화벽을 설정하면 되는데, ufw가 잘 작동하지 않아서 firewall-cmd를 사용하기로 했다.

firewall-cmd 설치


sudo apt install firewalld

방화벽 열기


sudo firewall-cmd --permanent --zone=public --add-port=80/tcp
sudo firewall-cmd --reload

node.js에서 1024번 이하 포트를 사용하려는 경우 root 유저가 아니면 권한 설정이 필요하므로 권한 설정을 해주거나 포트포워딩이 필요하다.

포트포워딩


sudo firewall-cmd --zone=public --add-forward-port=port=80:proto=tcp:toport=<사용할 포트> --permanent
sudo firewall-cmd --reload

3. 빌드 및 실행

이후 프로젝트를 빌드하고 forever, pm2 등을 통해 결과물을 백그라운드로 실행한다.

(Optional) 서버에 dev 브랜치, main 브랜치 2개 배포하기

한 서버에 2개의 서비스를 제공하기 위해 NGINX와 같은 웹서버에서 제공하는 reverse proxy와 virtual host 기능을 사용한다.

💡

Reverse proxy 클라이언트 요청을 대신 받아 내부 서버로 전달해주는 것

💡

Virtual host 한 서버에 여러 도메인을 등록하여 사용하는 것

1. repo clone 및 실행

dev 브랜치를 추가로 서비스하기 위해 레포지토리를 새로 클론하고 기존에 서비스하고 있는 포트와 다른 포트로 실행한다.

2. 도메인 연결

dev 브랜치 배포용 도메인을 추가로 등록, 기존 도메인과 다른 도메인을 같은 IP 주소에 연결

3. NGINX 설치

서버에 NGINX를 설치한다. (글 작성 기준 NGINX 버전 1.18.0)


sudo apt-get update
sudo apt-get install nginx -y
sudo service nginx start

서버가 재시작될 때 자동으로 실행시키기 위해 다음 명령어를 입력한다.


sudo systemctl enable nginx

4. nginx.conf 설정

설정 파일을 연다.


sudo vim /etc/nginx/nginx.conf

Virtual Host Configs 주석 다음에 해당 내용이 없다면 추가해준다.


include /etc/nginx/sites-enabled/*

5. reverse proxy용 virtual host 설정

/etc/nginx/sites-available 경로에 원하는 이름으로 다음과 같은 파일을 생성한다.

2개의 서비스를 제공해야하므로 파일을 2개 생성한다.


server{
    listen [::]:80;
    listen 80;
        
    server_name [도메인 명];
        
    location / {
        proxy_pass http://localhost:[서비스가 실행 중인 포트번호];
    }
}

모두 생성했다면 /etc/nginx/sites-enabled 경로에 심볼릭 링크를 각 파일마다 생성해준다.


sudo ln -s /etc/nginx/sites-available/[파일명] /etc/nginx/sites-enabled/[파일명]

그 다음 NGINX를 재시작하여 변경 사항을 적용한다.


sudo systemctl restart nginx

6. 포트포워딩 삭제

기존에 추가했던 포트포워딩 규칙을 삭제해준다.


sudo firewall-cmd --permanent --remove-forward-port=port=80:proto=tcp:toport=8080
sudo firewall-cmd --reload