Nginx를 이용한 웹서버 배포

# nginx.conf
user booquiz;

events {
    # 이 설정이 비어 있어도 Nginx는 기본 설정을 사용합니다.
    # worker_connections를 명시적으로 설정할 수 있습니다.
    worker_connections 1024;
}

# 전체 설정을 감싸는 http 블록
http {
    include mime.types;

    server {
        listen 80 default_server;

        # /api 경로를 백엔드 서버로 프록시
        location /api {
            rewrite ^/api/?(.*)$ /$1 break;
            proxy_pass <http://10.0.1.6:3000>;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 정적 파일 서빙 설정
        location / {
            root /static;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

• public server에 존재하는 nginx가 private server에 있는 웹 서버를 프록시 하도록 설정하였습니다.

트러블 슈팅

콘텐츠 타입 헤더 문제:

• js, css 파일을 읽어 오지만 흰 화면이 뜨는 문제가 있었습니다.
• include mime.types; 를 추가하여 해결하였습니다.

1. Content-Type 헤더 설정:
   • MIME 타입은 파일이 브라우저나 클라이언트에 어떻게 해석되어야 하는지 지정해 주는 Content-Type 헤더의 값을 결정합니다.
   • 예를 들어, .html 파일은 **text/html**로, .css 파일은 **text/css**로, .png 파일은 **image/png**로 Content-Type 헤더가 설정됩니다.
2. 파일 유형 자동 처리:
   • **include mime.types;**를 통해 Nginx는 미리 정의된 MIME 타입에 따라 다양한 파일 형식을 자동으로 처리할 수 있습니다.
   • 예를 들어, 이미지 파일, CSS, JavaScript 파일 등에 대한 Content-Type 헤더를 자동으로 설정하여, 브라우저가 해당 파일을 적절히 표시할 수 있도록 돕습니다.
   • 이설정을 추가하지 않으면 타입 별 헤더를 자동으로 붙이지 않는 것 같습니다.

api 경로 인식 문제:

api 경로를 /api로 설정했더니 백엔드로 요청을 보낼 때 /api/endpoint로 요청이 들어가는 문제가 발생했습니다. 저희는 백엔드로 /api/ 경로를 빼고 요청을 보내고 싶어 다음과 같은 rewrite 구문을 활용하였습니다. rewrite ^/api/?(.*)$ /$1 break;

^/api/?(.*)$ → /$1 로 바꾸어 / 부터 시작하도록 변경하였습니다.

Github Action으로 프론트 정적 파일 배포하기

name: Deploy Frontend
on:
    pull_request:
        branches: [develop]
jobs:
    build-frontend:
        runs-on: ubuntu-latest
        name: Build Frontend
        steps:
            - name: Checkout code
              uses: actions/checkout@v4

            - name: Set up Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: 'node'

            - name: Install dependencies
              run: npm install -g pnpm && pnpm install --no-frozen-lockfile

            - name: Build
              run: cd apps/frontend && pnpm build

            - name: Upload artifacts
              uses: actions/upload-artifact@v4
              with:
                  name: frontend-build
                  path: apps/frontend/dist

    deploy-frontend:
        needs: build-frontend
        runs-on: ubuntu-latest
        name: Deploy Frontend

        steps:
            - name: Download artifacts
              uses: actions/download-artifact@v4
              with:
                  name: frontend-build
                  path: apps/frontend/dist

            - name: Set up SSH Key
              run: |
                  mkdir -p ~/.ssh
                  echo "${{ secrets.PUBLIC_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
                  chmod 600 ~/.ssh/id_rsa
                  ssh-keyscan -t rsa ${{ secrets.PUBLIC_SERVER_IP }} >> ~/.ssh/known_hosts

            - name: Deploy to Nginx
              run: |
                  PUBLIC_SERVER_IP=${{ secrets.PUBLIC_SERVER_IP }}
                  DEPLOY_USER=${{ secrets.DEPLOY_USER }}
                  DEPLOY_PATH=${{ secrets.DEPLOY_PATH }}

                  ssh -i ~/.ssh/id_rsa $DEPLOY_USER@$PUBLIC_SERVER_IP "mkdir -p $DEPLOY_PATH"
                  scp -i ~/.ssh/id_rsa -r apps/frontend/dist/* $DEPLOY_USER@$PUBLIC_SERVER_IP:$DEPLOY_PATH
                  ssh -i ~/.ssh/id_rsa $DEPLOY_USER@$PUBLIC_SERVER_IP "chmod -R 700 $DEPLOY_PATH"

• 프론트앤드 파일을 Vite로 빌드하여 나온 파일을 scp를 활용하여 nginx가 존재하는 public server로 전달하였습니다.