[nestJs] digital ocean 에 웹클라이언트 & 서버 배포하기

 

준비사항 : github token 준비

github를 이용하여 배포할 예정이다. 기본적으로 git 에 로그인할때 빔리번호가 아니라 패스키를 사용해야 한다. 

깃허브 프로필 > Settings > developer settings > personal access token 을 발급받고 token값을 잘 보관해두자

 

ubuntu 포트 열기

브라우저 > 웹 접속 포트는 80 이고 웹>서버API통신 포트는 3000 으로 잡았다. 통신을 하기 위해서는 ubuntu에서 포트를 열어주어야 한다.

sudo ufw allow 3000
sudo ufw allow 80
sudo ufw reload

 

서버 ( nestJs ) 배포

프로젝트가 ubuntu에 없을 경우 git clone 을 이용해 다운받는다. 그 뒤, 수정사항이 생길 경우 git pull을 통해 프로젝트 동기화한다.

#node_modules가 없을 경우
npm install

npm run build

#pm2를 이용하여 어플리케이션 시작
pm2 start dist/main.js --name <app-name>

#(확인용)실행중인 pm2 애플리케이션 확인 
pm2 list

#(선택)실행로그 확인하기
pm2 log <name|id>

 

(선택) https 통신을 위한 SSL 인증서

https 통신을 사용하고싶을 경우 SSL인증서를 준비해야한다. 개발환경에서는 Self-signed certificate (자체서명인증서)를 사용한다. 나는 http통신을 할거니까 이걸로 해보자.

 

#self-signed certificate 발급받기. 
#Common Name(CN) 란에 서버 IP주소를 입력한다. 나머지는 스킵해도 괜찮다.
openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365

 

`nestJs > main.ts` 에 인증서 부분을 추가한다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as fs from 'fs';
import * as https from 'https';

async function bootstrap() {
  // SSL 인증서 파일 읽기
  const httpsOptions = {
    key: fs.readFileSync('path/to/key.pem'),
    cert: fs.readFileSync('path/to/cert.pem'),
  };

  // HTTPS 서버 생성
  const app = await NestFactory.create(AppModule, {
    httpsOptions,
  });

  app.enableCors(); // 필요하면 CORS 활성화
  await app.listen(443); // HTTPS 기본 포트
}
bootstrap();

 

nginX 설정

## nginx 가 없다면 설치진행
sudo apt update 
sudo apt instal nginx 

## active(running)인지 확인
sudo systemctl status nginx

 

`/etc/nginx/sites-available/default` 파일을 열어서 다음과 같이 작성한다.

server {
    listen 80;
    # listen 443 ssl; #https 일때

    server_name your-ip-address;

    # ssl_certificate_key /path/to/key.pem; ##ssl 인증서(https)
    # ssl_certificate /path/to/cert.pem; ##ssl 인증서(https)
    
    # 클라이언트 정적 파일 제공
    location / {
        root /var/www/client; # 클라이언트 빌드 파일 경로
        index index.html;
        try_files $uri /index.html;
    }

    # 서버 API 프록시 설정
    location /api {
        proxy_pass http://localhost:3000; # 서버(NestJS)가 실행 중인 포트
        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;
    }
}

 

# nginx 테스트
sudo nginx -t

#재시작
sudo systemctl restart nginx

 

 

클라이언트(react ) 배포

https 로 배포하기 위해서는 도메인이나 유료 SSL 인증서가 필요하다. 나는 돈이 없고, 개발초기단계이므로 http 통신을 선택했다.

나중에 https 로 수정할 예정이다.. https 는 443포트를, http는 80번포트를 사용하는것이 일반적이다.

 

#서버와 동일하게 git을 이용해 clone / pull을 진행한다.
npm install
npm run build

#반영하기
sudo cp -r ./build/* /var/www/client

 

클라이언트 nginx 설정하기

sudo vi /etc/nginx/sites-available/client

server {
    listen 80; # 클라이언트 포트
    server_name my-ip-address;
	
   # ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
   # ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;

    root /var/www/client;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

 

#설정파일 활성화
sudo ln -s /etc/nginx/sites-available/client /etc/nginx/sites-enabled/
#nginx 테스트
sudo nginx -t
#success가 나왔다면 재시작
sudo systemctl restart nginx

 

 

 

digital ocean 콘솔설정

포트오픈하기

networking > firewalls 에서 사용중인 포트를 오픈해야한다.

브라우저 > 웹으로 접속하는 http 포트 80번,

웹 > 서버로 API요청하는 포트 3000번 총 2개를 오픈했다.

 

 

개선사항

git에 내용물이 변경될 떄 마다 자동으로 반영 및 재배포 하는 방법?

도메인을 추가하고 https 통신으로 변경하기