Next.js & Django, Nginx로 배포하기

프로젝트 개요

이름 : 야미(Yammy)

설명 : 동네 맛집 아카이브 및 추천

스택 : 프론트-NextJs, 백엔드-Django, 웹서버-Nginx

 

Nginx 웹서버 사용이 대중화 되면서 프론트, 백엔드를 막론하고 Nginx를 사용하는것 같다.

나도 사이드 프로젝트 배포를 담당하고 있어서 NextJs를 띄워볼 기회가 생겼다.

 

React랑은 달리 SSR(Server side rendering)을 지원하기에 프론트도 별도 서버를 가동시켜야 한다.

React는 그냥 빌드파일만 Nginx경로 설정을 해주면 빠릿빠릿하게 잘 작동했었지만 넥스트는 별도 설정이 필요한게 차이점이다.

개발쪽에 몸담고나서 느끼는게 있지만 완벽한 자동화라는것은 없으며 완전 자동화가 오히려 사용성을 저해하는 경우가 많다.

소프트웨어도 생물처럼 유지관리가 매우 중요해서 조금이라도 관심을 끄면 제대로 동작하지 않고 죽게 된다.

 

아무튼 각설하고 Next.Js와 Django를 배포하기 위한 Nginx 설정 방법을 알아보자.

 

아래는 80번 기본포트에 대한 설명이다.

server {

    listen 80;

    server_name yammy.com;

    location / {

        proxy_pass http://localhost:3000;  # Next.js 기본 개발 서버의 포트

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection 'upgrade';

        proxy_set_header Host $host;

        proxy_cache_bypass $http_upgrade;

    }

}

 

아래는 만약 사용자가 www를 입력하여 요청한다면 redirect시켜준다.

server {

    listen 80;

    server_name www.yammy.com;

    return 301 http://yammy.com$request_uri;

}

 

아래는 Django 서버이다. 8000번 포트를 열어놓고 gunicorn 소켓을 연결한다.

server {

        listen 8000;

        server_name 13.209.182.117;

        location = /favicon.ico { access_log off; log_not_found off; }

        location /static {

                alias /home/ubuntu/contract/static;

        }

        location / {

                include proxy_params;

                proxy_pass http://unix:/home/ubuntu/contract/run/gunicorn.sock;

        }

}

 

아래는 CORS를 허용하기 위하여 localhost:8000으로 요청하는 경우에 허용하기 위해서다.

server {

        listen 8000;

        server_name localhost;

        location = /favicon.ico { access_log off; log_not_found off; }

        location /static {

                alias /home/ubuntu/contract/static;

        }

        location / {

                include proxy_params;

                proxy_pass http://unix:/home/ubuntu/contract/run/gunicorn.sock;

        }

}