[Next.js] Next 프로젝트 시놀로지에 배포한 척 하기

-리액트 배포는 쉬웠는데...

일단 리액트 프로젝트를 공부한답시고 시놀로지에 배포를 해본 적은 있었기 때문에 비교적 어렵지 않았습니다.

React 프로젝트를 시놀로지에 배포하는 방법은 먼저  React 프로젝트를 build 하여 말아주고 시놀로지의 Docker 를 사용하여 컨테이너를 하나 만들어줍니다.

도커 생성 시 마운트 경로를 위의 사진과 같이 /home/node/app 으로 설정해 줍니다.

이 때 port 번호는 사용 할 포트번호를 입력해주고

 

그리고 해당 디렉토리에 위와같이 node_modules을 설정해주고 index.js 파일을 설정해주고...

같은 위치에 React build 디렉토리를 넣어준 후 Docker를 실행하면 프로젝트 배포가 됩니다.

 

도커를 사용하니 따로 ssh를 사용하여 nohup을 사용하거나 하지 않아도 됬는데 Next.js 를 해보면서 배포를 해보려하니

뭔가 불가능했습니다.

 

그래서 생각한방법은 Docker를 사용하는게 아닌 일반적으로 그냥 프로젝트 자체를 ssh를 통해서 start 시키는 방법을 선택했습니다.

 

일단 Next.js 프로젝트를 시놀로지에 ssh를 통하여 접속 한 후 원하는 디렉토리에 git pull 하여 받은 후

 

package.json 파일에서 scripts 부분에 사용할 port 번호를 입력해주세요.

따로 port 번호를 입력하지 않을 경우 자동으로 3000 번 부터 실행됩니다.

{
	...
      "scripts": {
        "dev": "next dev -p 3030",
        "build": "next build && next export",
        "start": "next start -p 사용 할 포트번호",
        "lint": "next lint"
      },
      ...
  }

그 후 npm run build 를 통해 프로젝트 build 를 실행해줍니다.

npm run build

build 가 성공적으로 끝나면 해당 디렉토리에 .next 폴더와 out 폴더가 생성됩니다.

 

이제 ssh를 통해 npm run start 를 입력하면 build 된 프로젝트가 실행됩니다...!

 

이제 시놀로지주소:입력한 포트번호 로 접속하면 build 된 next.js 프로젝트를 볼 수 있습니다.

 

nohup 명령어를 통해 프로젝트를 실행시켰는데... 세션이 끊기면 종료된다...

세션이 연결 된 상태에서는 npm run start 를 통해 정상적으로 접속이 됬는데

 

세션을 끊으니 자연스럽게 프로젝트도 내려가버렸습니다. 분명 nohup을 통해 start를 시켰는데도..

 

여러번 시도해도 동일한 문제가 일어나서 `pm2` 라는 모듈을 사용하여 다시 start 를 진행시켰습니다.

 

일단 시놀로지에 ssh를 통하여 접속한 후 npm install -g pm2 를 통하여 해당 패키지를 설치해줍니다.

 

# pm2 모듈 설치
npm install -g pm2

# 원하는 프로세스 실행
$ pm2 start npm --name "프로젝트이름" -- start

# 실행되는 프로세스 목록 확인
$ pm2 list

 

이렇게 Next.js 프로젝트를 억지로 시놀로지에 배포했습니다...!!

 

이제 주소 뒤에 port 번호를 없애고싶다...!

마지막으로 뒤에 포트번호를 없애고 싶었습니다.

 

분명... 다른 방법이 있겠지만... 전 간단하고 단순하게 시놀로지의 역방향 프록시를 사용하였습니다.

 

1. 시놀로지 제어판 접속

 

2. 시스템 > 로그인 포털 이동

 

3. 고급 탭의 역방향 프록시 설정 이동

 

4. 소스 탭의 포트번호 80 입력

 

5 . 대상 포트번호를 package.json에 입력한 포트번호 입력

 

6. 저장한 후 도메인 확인

 

 

분명 이 방법이 좋은 방법은 아닌거 같습니다... 그래도 혹시라도 저처럼 고생하시는분이 있을 거 같아서 글을 남기게 됬습니다.

 

더 좋은 방법이나 잘못된 부분 태클은 언제나 감사합니다.