FE 미리보기 배포 기능 추가

.github/workflows/CI_PIPELINE.yml

@@ -42,18 +42,9 @@ jobs:
         with:
           node-version: '20'
 
-      - name: Cache dependencies for ${{ matrix.project }}
-        if: env.changed == 'true'
-        uses: actions/cache@v3
-        with:
-          path: ${{ matrix.project }}/node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}/yarn.lock', matrix.project)) }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-          
-
       - name: Install Dependencies for ${{ matrix.project }}
         if: env.changed == 'true'
-        run: yarn install
+        run: yarn install --frozen-lockfile # yarn.lock 을 기준으로 설치하며, 의존성 재해석 방지
         working-directory: ${{ matrix.project }}
 
       - name: Lint ${{ matrix.project }}

.github/workflows/deploy-fe-preview.yml

@@ -0,0 +1,47 @@
+name: Deploy Frontend Preview
+
+on:
+  push:
+    branches:
+      - "**"
+    paths:
+      - "frontend/**"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check if commit message contains '#preview'
+        id: check_commit
+        run: |
+          if [[ "${{ github.event.head_commit.message }}" == *"preview"* ]]; then
+            echo "Commit message contains '#preview'"
+            echo "deploy=true" >> $GITHUB_ENV
+          else
+            echo "Commit message does not contain '#preview'"
+            echo "deploy=false" >> $GITHUB_ENV
+          fi
+
+      - name: Build React App
+        if: env.deploy == 'true'
+        env:
+          VITE_AXIOS_PROD_BASE_URL: ${{ secrets.VITE_AXIOS_PROD_BASE_URL }}
+          VITE_GOOGLE_MAPS_API_KEY: ${{ secrets.VITE_GOOGLE_MAPS_API_KEY }}
+          VITE_GOOGLE_MAPS_ID: ${{ secrets.VITE_GOOGLE_MAPS_ID }}
+        run: |
+          cd ${{ github.workspace }}/frontend
+          yarn install --frozen-lockfile
+          yarn build
+
+      - name: Deploy to Nginx Server
+        if: env.deploy == 'true'
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.NCP_SERVER_HOST }}
+          username: ${{ secrets.NCP_SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          source: "frontend/dist/*"
+          target: "/usr/share/nginx/html/preview"

.github/workflows/deploy-fe.yml

@@ -21,7 +21,7 @@ jobs:
           VITE_GOOGLE_MAPS_ID: ${{ secrets.VITE_GOOGLE_MAPS_ID }}
         run: |
           cd ${{ github.workspace }}/frontend
-          yarn install
+          yarn install --frozen-lockfile
           yarn build
 
       - name: Deploy to Nginx Server

backend/Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /build
 COPY package.json .
 COPY yarn.lock .
 
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 COPY . .
 RUN yarn build

backend/resources/nginx.conf

@@ -18,41 +18,24 @@ http {
         listen 443 ssl;
         server_name dailyroad.site www.dailyroad.site;
 
-        ssl_certificate /etc/letsencrypt/live/dailyroad.site/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/dailyroad.site/privkey.pem;
+        ssl_certificate /etc/letsencrypt/live/dailyroad.site-0001/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/dailyroad.site-0001/privkey.pem;
 
         ssl_protocols TLSv1.2 TLSv1.3;
         ssl_ciphers HIGH:!aNULL:!MD5;
 
         location / {
             try_files $uri $uri/ /index.html =404;
         }
-
-        # NestJS API 요청 처리 (추후논의)
-        location /api/ {
-            rewrite ^/api/(.*) /$1 break;
-            proxy_pass http://localhost:8080;
-
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-Prefix /api;
-            proxy_set_header X-Forwarded-Host $http_x_forwarded_host;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-NginX-Proxy true;
-            proxy_set_header X-Forwarded-Proto $scheme;
-
-            proxy_pass_request_body on;
-            proxy_method $request_method;
-        }
     }
 
     # API 서브도메인
     server {
         listen 443 ssl;
         server_name api.dailyroad.site;
 
-        ssl_certificate /etc/letsencrypt/live/dailyroad.site/fullchain.pem;
-        ssl_certificate_key /etc/letsencrypt/live/dailyroad.site/privkey.pem;
+        ssl_certificate /etc/letsencrypt/live/dailyroad.site-0001/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/dailyroad.site-0001/privkey.pem;
 
         ssl_protocols TLSv1.2 TLSv1.3;
         ssl_ciphers HIGH:!aNULL:!MD5;
@@ -88,4 +71,22 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
         }
     }
+
+    # Preview 서브도메인
+    server {
+        listen 443 ssl;
+        server_name preview.dailyroad.site;
+
+        root /usr/share/nginx/html/preview/frontend/dist;
+
+        ssl_certificate /etc/letsencrypt/live/dailyroad.site-0001/fullchain.pem;
+        ssl_certificate_key /etc/letsencrypt/live/dailyroad.site-0001/privkey.pem;
+
+        ssl_protocols TLSv1.2 TLSv1.3;
+        ssl_ciphers HIGH:!aNULL:!MD5;
+
+        location / {
+            try_files $uri $uri/ /index.html =404;
+        }
+    }
 }

backend/yarn.lock

@@ -785,6 +785,11 @@
   dependencies:
     tslib "2.7.0"
 
+"@nestjs/throttler@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@nestjs/throttler/-/throttler-6.2.1.tgz#c241788a8b195e6c7c0cf94b1808c4cb940ac2fd"
+  integrity sha512-vdt6VjhKC6vcLBJRUb97IuR6Htykn5kokZzmT8+S5XFOLLjUF7rzRpr+nUOhK9pi1L0hhbzSf2v2FJl4v64EJA==
+
 "@nestjs/typeorm@^10.0.0":
   version "10.0.2"
   resolved "https://registry.npmjs.org/@nestjs/typeorm/-/typeorm-10.0.2.tgz"

frontend/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.0'
-const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
+const PACKAGE_VERSION = '2.6.4'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -192,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }