🪵 3. 인프라 실습(2) : 도커 없이 배포하기

1. Nginx 기반 배포

설치

# 1. 기본 업데이트
sudo apt update
sudo apt upgrade -y

# 2. Node.js 설치
# node.js 20.0 버전으로 설치
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# 3. Nginx 설치
# 2024-11-11 기준 ubuntu-22.04에서에러
~~sudo apt install nginx -y~~

# 공식문서 참고해서 설치
~~~~https://nginx.org/en/linux_packages.html#Ubuntu

# 4. PM2 설치
sudo npm install -g pm2

# 5. git 설치
sudo apt install git -y

• curl 명령 사용 전, 포트를 열어두어야 한다.

• 디렉토리 권한 설정 (참고)

  # 일반적인 nginx 설정 예시
  # 현재 배포 과정에서 사용하고 있지 않다.
  
  sudo chown -R $USER:$USER /var/www/html
  ls -ld /var/www/html

  • /var/www/html : 웹 서버가 기본적으로 웹 파일을 제공하는 루트 디렉터리

프론트엔드 빌드

# 리포지토리 클론
~$ git clone [리포지토리주소]

~/[project 이름]/client$ npm run build

NGINX 설정

sudo systemctl start nginx # Nginx 서비스를 즉시 시작
sudo systemctl enable nginx # 서버 부팅 시 Nginx가 자동으로 시작되도록 설정

sudo mkdir -p /etc/nginx/sites-available # 사이트별 설정 파일을 저장할 디렉터리 생성
sudo mkdir -p /etc/nginx/sites-enabled # 활성화된 사이트 설정 파일을 위한 디렉터리 생성

Nginx 메인 설정 파일 수정

sudo vim /etc/nginx/nginx.conf

# Nginx가 각 사이트에 대한 설정 파일을 자동으로 인식하고 적용하도록
http {
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*; # 추가
    ...
}

Nginx 사이트 설정 파일 작성

sudo vim /etc/nginx/sites-available/[프로젝트 명]

server {
    listen 80; # HTTP 기본 포트 80에서 요청을 수신
    server_name [인스턴스의_PUBLIC_IP]; # 서버의 공인 IP 주소 또는 도메인 이름 지정

    location / {
        root /home/ncloud/whiteboard/client/dist; # 정적 파일의 루트 경로 설정
        try_files $uri $uri/ /index.html; # 요청한 파일이 없을 경우 index.html로 대체 (SPA 지원)
        index index.html; # 기본 인덱스 파일 설정
    }

    # WebSocket을 위한 Socket.IO 프록시 설정
    location /socket.io/ {
        proxy_pass http://localhost:3000; # 로컬 서버의 3000 포트로 요청을 프록시
        proxy_http_version 1.1; # WebSocket을 위해 HTTP/1.1 사용
        proxy_set_header Upgrade $http_upgrade; # WebSocket 연결 업그레이드 요청
        proxy_set_header Connection "upgrade"; # WebSocket 연결 업그레이드 설정
        proxy_set_header Host $host; # 원본 요청의 호스트 헤더 유지
        proxy_cache_bypass $http_upgrade; # WebSocket 연결 시 캐시 우회
        proxy_read_timeout 86400s; # 프록시 읽기 타임아웃 설정 (24시간)
        proxy_send_timeout 86400s; # 프록시 전송 타임아웃 설정 (24시간)
    }
    
    # REST API (필요한 경우)
    location /api/ {
        proxy_pass http://localhost:3000;
        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 ln -s /etc/nginx/sites-available/[프로젝트 명] /etc/nginx/sites-enabled/
# 오류가 있는지 테스트
sudo nginx -t 
# Nginx 서비스를 재시작하여 변경된 설정 적용
sudo systemctl restart nginx

• Nginx는 정적 파일을 직접 서빙하면서, 클라이언트의 동적 요청을 백엔드 서버로 전달하는 리버스 프록시 서버 역할을 동시에 수행한다.

서버 빌드 및 실행

~/[project 이름]/server$ npm install -g @nestjs/cli
~/[project 이름]/server$ npm run build

# PM2를 사용해 dist/main.js 파일을 "whiteboard-server"라는 이름으로 백그라운드에서 실행
~/[project 이름]/server$ pm2 start dist/main.js --name "whiteboard-server"

# PM2 로그
pm2 log

• PM2 (추후 작성)
  • 애플리케이션을 데몬(백그라운드) 모드로 실행하므로, SSH 세션이 종료되더라도 애플리케이션이 계속 실행된다.
  • 기타 기능

빌드 디렉터리 소유권 및 권한 설정

sudo chown -R $USER:$USER ~/whiteboard/client/dist
sudo chmod -R 755 ~/whiteboard/client/dist

권한 오류

~/[프로젝트 명]/client/dist$ sudo tail -f /var/log/nginx/error.log

2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [crit] 3326#3326: *5 stat() "/home/ncloud/whiteboard/client/dist/index.html" failed (13: Permission denied), client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"
2024/11/11 17:26:55 [error] 3326#3326: *5 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 121.136.217.193, server: 223.130.137.162, request: "GET /favicon.ico HTTP/1.1", host: "223.130.137.162", referrer: "http://223.130.137.162/"

• nginx가 dist 폴더의 파일들에 접근할 권한이 없다는 의미

해결방법

sudo chmod 755 /home/ncloud

• /home/ncloud 디렉토리부터 접근 권한이 필요
  • Nginx가 /home/ncloud/whiteboard/client/dist/index.html에 접근할 수 있으려면 상위 디렉터리에도 Nginx가 읽기 및 실행할 수 있는 권한이 필요하다.

프론트엔드 빌드 및 백엔드 재시작

# 프론트엔드 다시 빌드
cd ~/whiteboard/client
npm run build

# 백엔드 재시작
cd ~/whiteboard/server
npm run build
pm2 restart whiteboard-server

2. Object Storage 활용

• AWS의 S3와 유사

기본 정보

• 생성된 버킷의 이름은 변경 불가능
• 버킷 이름은 객체에 대한 도메인에 활용

설정 관리

권한 관리

• 배포할거면 반드시 공개

정적 웹사이트 호스팅

버킷 웹 사이트 엔드 포인트

http://test-web30.s3-website.kr.object.ncloudstorage.com

서버 코드 수정

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://test-web30.s3-website.kr.object.ncloudstorage.com',
    credentials: true,
  });

  app.useWebSocketAdapter(new IoAdapter(app));

  await app.listen(3000);
}
bootstrap();

클라이언트 코드 수정

const newSocket = io('http://223.130.137.162:3000', {
    transports: ['websocket'],
    reconnection: true,
});

빌드 파일 업로드

• Nginx 중지

  sudo systemctl stop nginx
  sudo systemctl disable nginx
  
  # 상태 확인
  sudo systemctl status nginx

Global CDN

• 필요할 때, 마이그레이션
• 커스텀 도메인 설정 가능

참고

• nginx: Linux packages
• 요청을 보냈는데 아무 반응이 없다?
  • 포트 문제일 가능성이 큼
  • ACG 관리 잘 하자