NginX로 Next 배포하기(standalone, export) 맞을까?

안녕하세요.

아주 쉬운 Next / NginX 로 배포하기 

필요사항: 기본 네트워크 서버, nginX설치된 허허헛, 도메인구매 설정

잘 준비해주세요.

 

우선은 Next 프로젝트를 만들어 봅시다.

https://nextjs.org/docs/app/api-reference/cli/create-next-app

CLI: create-next-app | Next.js

 

npx create-next-app@latest [project-name] [options]

 

이 명령어로 만들어봅시담 ㅎ

 

이제 바로 서버에 올릴 에정입니다. 꾸미는것은 잘해주시면 감사하겠습니다.

 

이제 프로젝트 파일 중 next.config.ts or enxt.config.js 파일을 수정해봅시다.

 

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  // output: 'standalone' // 동적으로 내보내기 
  output:"export", // 정적으로 내보내기
  trailingSlash:true // 정적으로 할 시 파일경로를 명확하게 유지하는 옵션
};

export default nextConfig;

 

두가지 방식 정적, 동적 으로 업로드를 할 예정입니다.

 

우선

output: 'standalone'

방식을 알아보겠습니다.

 

https://nextjs.org/docs/pages/api-reference/config/next-config-js/output

next.config.js Options: output | Next.js

 

 

참고해주시고면서 

 

프로젝트 터미널에서

npm run build
cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/

 

명령어 후 Filezilla 등 파일을 옴실수있는 프로그램으로 서버에 파일을 옴겨보겠습니다.

 

저는 ~/SERVICE/[도메인주소]/서브도메인

 

이렇게 만들고 싶네요. 예: ~/SERVICE/lianhomepage.kr/www

 

이럼 www.lianhomepage.kr로 접속을 할  때 쓰는 홈페이지라고 알수 있겠죠?

 

폴더에 standalone 폴더만 넣어둡니다.

 

그리고 node ./standalone/server.js 를 실행하게되면 서버가 완성됩니다. 그러나 저희는 nginX로 도메인까지 설정할 예정입니다.

 

/에서  nginx/sites-available 폴더로 이동 후 [서브도메인].[레벨도메인].[최상위도메인].conf 파일을 만든다.

똑같은 nginx/ 파일 단계에서 sites-enabled/ 로 들어가 만든 파일을 링크걸어준다.

ln ../sites-available/[파일명.conf] ./[파일명.conf] 으로 만들어준다.

 

server {

   listen 80;
   listen [::]:80;

   server_name [서브도메인].[레벨도메인].[최상위도메인];


   access_log /home/[user_name]/SERVICE/[파일]/nginx_log/access.log;
   error_log /home/[user_name]/SERVICE/[파일]/nginx_log/error.log;

   location / {
        # proxy_pass에 접근 IP 및 포트 입력
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
   }
}

 

nginx 재시작

sudo nginx -t

sudo service nginx restart

 

이상없이 되었다면 다행이네요.

 

이제 정적으로 만드는법을 확인해봅시다.

 

output:"export",
trailingSlash:true

https://nextjs.org/docs/app/building-your-application/deploying/static-exports

Deploying: Static Exports | Next.js

 

여기를 참고해주시고여

 

npm run build

 

이렇게 만들면 out 폴더가 만들어집니다. 

 

이번엔 이 아웃폴더 내에있는 파일 전부를 

 

 ~/SERVICE/lianhomepage.kr/www 이 파일에 전부 옴기고 싶네요

 

파일을을 다 옴겼으면 이제 nginx 파일을 수정할 차례입니다.

 

다시 sites-available폴더로 이동후 내가사용할 도메인폴더를 수정합니다. 

server {

   root /home/[user]/SERVICE/lianhomepage.kr/www;
   index index.html;

   listen 80;
   listen [::]:80;

   server_name www.lianhomepage.kr;

   access_log /home/[user]/SERVICE/lianhomepage.kr/nginx_log/access.log;
   error_log /home/[user]/SERVICE/lianhomepage.kr/nginx_log/error.log;

   location / {
        root /home/[user]/SERVICE/lianhomepage.kr/www;

   }
}

 

이렇게하고 도메인주소로 접속하시면 완료~

 

이렇게 서버에 Vercel을 이용하는법 말고 다른방법으로 알아보았습니다.

 

혹시 더 궁금하신것 있으시면 댓글달아두시면 최대한 빨리 알려드리겠습니다. 

 

감사합니다.