이 포스트는 프로젝트를 배포하는 과정에서 참고한 여러 개의 포스트를 종합한 글입니다. 이번 글에서는 Nginx를 활용하여 Next.js 애플리케이션을 배포하는 방법을 상세히 설명합니다. 특히 SSL 인증서 설정과 Reverse Proxy 설정을 통해 보안성과 성능을 강화하는 방법을 다룹니다.
목차
- Nginx 역할
- SSL 인증서 파일 생성
- /etc/nginx/nginx.conf 파일 설정
- /etc/nginx/conf.d/domain.conf 설정
- Next.js 프로젝트를 4000번 포트로 실행
- Nginx 실행
- Nginx 관련 명령어
- 레퍼런스
Nginx 역할
Nginx는 고성능의 웹 서버이자 Reverse Proxy 서버로, 다양한 용도로 활용됩니다. 이번 프로젝트에서는 Next.js와 함께 Nginx를 사용하여 다음과 같은 역할을 수행합니다:
- 웹 서버 구축: Next.js는 JavaScript 기반의 서버리스 프레임워크로, 자체적으로 서버 기능을 제공하지 않습니다. 따라서 Nginx가 Next.js 애플리케이션을 실행해주는 역할을 합니다.
- 클라이언트 요청 처리: 사용자가 브라우저의 주소창에 URL을 입력하면 Nginx가 중간에서 요청을 받아 Linux 환경(OCI)에서 실행 중인 Next.js 프로젝트로 전달합니다.
- 정적 파일 제공: 클라이언트로부터의 요청에 맞는 정적 파일을 응답해주는 HTTP Web Server로 활용됩니다.
- Reverse Proxy 및 로드 밸런서: Nginx를 Reverse Proxy 서버로 설정하여 WAS(Web Application Server)의 부하를 줄이고, 로드 밸런싱을 통해 성능을 최적화할 수 있습니다.
!https://velog.velcdn.com/images/loocia1910/post/36580837-83d8-47c6-8a4b-9e6c566edafe/image.png
SSL 인증서 파일 생성
보안성을 강화하기 위해 SSL 인증서를 설정합니다. 이번 프로젝트에서는 회사에서 구매한 .pfx 파일을 이용하여 SSL 설정을 진행하였습니다.
.pfx 파일로 .crt, .rsa 파일 생성하기
.pfx 파일을 사용하여 .crt와 .rsa 키 파일을 생성합니다.
openssl pkcs12 -in /usr/local/nginx/ssl/xxx.pfx -clcerts -nokeys -out /usr/local/nginx/ssl/xxx.crt
openssl pkcs12 -in /usr/local/nginx/ssl/xxx.pfx -nocerts -nodes -out /usr/local/nginx/ssl/xxx.rsa
인증서 정확성 검증
443 포트가 사용 중인 경우, 프로세스를 종료하고 인증서의 정확성을 검증합니다.
openssl s_server -www -accept 443 -cert /usr/local/nginx/ssl/xxx.crt -key /usr/local/nginx/ssl/xxx.rsa
/etc/nginx/nginx.conf 파일 설정
Nginx의 메인 설정 파일인 nginx.conf를 수정하여 기본 설정을 적용합니다. 이 파일은 최상위 Nginx 실행 파일로, 다른 설정 파일들을 포함하고 있습니다.
// /etc/nginx/nginx.conf
user root;
worker_processes auto;
error_log /var/log/nginx/error.log notice; // nginx 에러 로그 위치
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
autoindex on;
keepalive_timeout 65;
include /etc/nginx/conf.d/*.conf; // 하위 conf 파일들 포함
}
/etc/nginx/conf.d/domain.conf 설정
서버 블록(Server Block)을 설정하여 도메인 별로 Nginx를 구성합니다. 이 설정 파일은 conf.d 디렉토리에 위치하며, 도메인 이름으로 파일명을 지정하는 것이 좋습니다.
// /etc/nginx/conf.d/domain.conf
server {
listen 80;
listen [::]:80;
server_name www.domain.com domain.com; // 도메인 명
// 301 리다이렉트를 통해 HTTP를 HTTPS로 전환
return 301 https://$host$request_uri;
}
server {
listen [::]:443 ssl;
listen 443 ssl;
server_name www.domain.com domain.com;
root /www/domain_2022/; // 프로젝트 디렉토리
location / {
proxy_pass <http://localhost:4000>; // 4000번 포트에서 실행 중인 Next.js 프로젝트로 연결
}
ssl on;
ssl_certificate /etc/ssl/domain.crt; // 생성한 SSL 인증서
ssl_certificate_key /etc/ssl/domain.rsa; // 생성한 SSL 키
ssl_prefer_server_ciphers on;
}
Next.js 프로젝트를 4000번 포트로 실행
Next.js 애플리케이션을 특정 포트(여기서는 4000번)에서 실행하여 Nginx가 이를 프록시하도록 설정합니다. package.json 파일을 수정하여 포트를 설정합니다.
// package.json
{
"name": "homepage-2022",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p ${PORT:-4000}", // 4000번 포트에서 실행
"lint": "next lint"
},
"dependencies": {
// 생략
},
"devDependencies": {
// 생략
}
}
프로젝트 실행 절차
- 프로젝트 디렉토리로 이동합니다.
- 프로젝트를 빌드합니다.
- 프로젝트를 백그라운드에서 실행합니다.
cd /www/domain_2022/
npm install
npm run build
npm run start &
Nginx 실행
Nginx는 어느 디렉토리에서든 실행할 수 있습니다. 설정이 완료된 후, Nginx 서비스를 시작합니다.
sudo systemctl start nginx
Nginx 관련 명령어
Nginx 서비스는 systemctl 명령어를 통해 관리할 수 있습니다. 주요 명령어는 다음과 같습니다:
# 시작
sudo systemctl start nginx
# 종료
sudo systemctl stop nginx
# 재시작
sudo systemctl restart nginx
# 리로드 (변경된 설정을 적용하는 경우 사용. 기존 연결을 끊지 않음.)
sudo systemctl reload nginx
# 기본적으로 서버 시작 시 Nginx가 자동으로 실행되는데, 이를 막고 싶은 경우
sudo systemctl disable nginx
# 서버 시작 시 자동으로 Nginx를 실행하고 싶은 경우
sudo systemctl enable nginx
레퍼런스
- How To Install Nginx on Ubuntu 20.04
- How To Secure Nginx with Let’s Encrypt on Ubuntu 20.04
- How To Set Up Nginx with HTTP/2 Support on Ubuntu 20.04
이 글이 Ubuntu 20.04에서 Nginx를 설치하고 설정하는 데 도움이 되었기를 바랍니다. 추가적인 질문이나 도움이 필요하시면 댓글로 남겨주세요!
