feature: 프론트 서버 배포

- 프론트 서버 docker compose 구성 - 프론트 서버 CI / CD 구현
Kernel360 · Aug 29, 2024 · c1bbe53 · c1bbe53
1 parent d2bf63c
commit c1bbe53
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 43 deletions.
diff --git a/.github/workflows/gradle-build.yml b/.github/workflows/gradle-build.yml
@@ -54,14 +54,22 @@ jobs:
           echo "IMAGE_TAG=$version" >> $GITHUB_ENV
         working-directory: ./server
 
-      - name: Docker Image Build
-        run: docker build -t ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.PROJECT_NAME }}:${{ env.IMAGE_TAG }} .
+      - name: Docker Sever Image Build
+        run: docker build -t ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.SERVER_PROJECT_NAME }}:${{ env.IMAGE_TAG }} .
         working-directory: ./server
 
-      - name: DockerHub Push
-        run: docker push ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.PROJECT_NAME }}:${{ env.IMAGE_TAG }}
+      - name: DockerHub Server Push
+        run: docker push ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.SERVER_PROJECT_NAME }}:${{ env.IMAGE_TAG }}
         working-directory: ./server
 
+      - name: Docker Client Image Build
+        run: docker build -t ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.CLIENT_PROJECT_NAME }} .
+        working-directory: ./client
+
+      - name: DockerHub Client Push
+        run: docker push ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.CLIENT_PROJECT_NAME }}
+        working-directory: ./client
+
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
@@ -85,7 +93,7 @@ jobs:
           key: ${{ secrets.EC2_KEY }}
           port: ${{ secrets.EC2_SSH_PORT }}
           source: "./docker-compose.yaml"
-          target: "./talkka/git/E2E2-TALKKA"
+          target: ${{ secrets.SCP_TARGET_PATH }}
 
       - name: Application Run
         uses: appleboy/[email protected]
@@ -98,11 +106,16 @@ jobs:
 
           script: |
             cd ./talkka/git/E2E2-TALKKA
-            docker kill ${{ secrets.PROJECT_NAME }}
-            docker rm -f ${{ secrets.PROJECT_NAME }}
-            docker images -q ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.PROJECT_NAME }} | xargs -r docker rmi
-            docker pull ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.PROJECT_NAME }}:${{ env.IMAGE_TAG }}
-            docker compose up -d --no-deps ${{ secrets.PROJECT_NAME }}
+            docker kill ${{ secrets.SERVER_PROJECT_NAME }} ${{ secrets.CLIENT_PROJECT_NAME }}
+            docker rm -f ${{ secrets.SERVER_PROJECT_NAME }} ${{ secrets.CLIENT_PROJECT_NAME }}
+            
+            docker images -q ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.SERVER_PROJECT_NAME }} | xargs -r docker rmi
+            docker pull ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.SERVER_PROJECT_NAME }}:${{ env.IMAGE_TAG }}
+            
+            docker images -q ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.CLIENT_PROJECT_NAME }} | xargs -r docker rmi
+            docker pull ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.CLIENT_PROJECT_NAME }}
+            
+            docker compose up -d --no-deps ${{ secrets.SERVER_PROJECT_NAME }} ${{ secrets.CLIENT_PROJECT_NAME }}
 
       - name: Remove GitHub Actions IP
         run: |

diff --git a/client/.env.production b/client/.env.production
@@ -0,0 +1,5 @@
+# local로 개발시 사용
+#NEXT_PUBLIC_SERVER_URL=http://localhost:8080
+
+# 배포시 사용
+NEXT_PUBLIC_SERVER_URL=https://talkka-bus.duckdns.org
diff --git a/client/.gitignore b/client/.gitignore
@@ -24,7 +24,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env.local
+.env.production
 .env.development.local
 .env.test.local
 .env.production.local
@@ -33,4 +33,4 @@ yarn-error.log*
 .turbo
 
 .contentlayer
-.env
+.env
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -0,0 +1,23 @@
+# 가져올 이미지를 정의
+FROM node:20.12
+# 경로 설정하기
+WORKDIR /app
+# package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함)
+COPY package.json .
+# 명령어 실행 (의존성 설치)
+RUN npm install --legacy-peer-deps
+RUN npm install -g serve
+# 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사한다.
+COPY . .
+RUN npm run build
+
+# 각각의 명령어들은 한줄 한줄씩 캐싱되어 실행된다.
+# package.json의 내용은 자주 바뀌진 않을 거지만
+# 소스 코드는 자주 바뀌는데
+# npm install과 COPY . . 를 동시에 수행하면
+# 소스 코드가 조금 달라질때도 항상 npm install을 수행해서 리소스가 낭비된다.
+
+EXPOSE 3000
+
+# npm start 스크립트 실행
+ENTRYPOINT ["npm","run", "start"]
diff --git a/client/config/api.ts b/client/config/api.ts
@@ -1,5 +1,5 @@
 export const api = {
-  baseUrl: process.env.SERVER_URL,
+  baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
   login: {
     naver: "/api/auth/login/naver",
   },

diff --git a/client/next.config.mjs b/client/next.config.mjs
@@ -5,7 +5,7 @@ const nextConfig = {
     appDir: true,
   },
   api: {
-    baseUrl: "http://localhost:8080",
+    baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
   },
 }
 

diff --git a/conf/nginx.conf b/conf/nginx.conf
@@ -10,8 +10,8 @@ server {
         location / {
                 return 301 https://$host$request_uri;
         }
-
 }
+
 server {
         listen 443 ssl;
         server_name talkka-bus.duckdns.org;
@@ -23,6 +23,22 @@ server {
         ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
 
         location / {
+                proxy_pass http://talkka-client: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 /api {
+                proxy_pass http://talkka-server:8080;
+                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 /admin {
                 proxy_pass http://talkka-server:8080;
                 proxy_set_header Host $host;
                 proxy_set_header X-Real-IP $remote_addr;

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -7,6 +7,17 @@ networks:
     driver: bridge
 
 services:
+  talkka-client:
+    build: ./client
+    image: shd2768/talkka-client
+    container_name: talkka-client
+    ports:
+      - "3000:3000"
+    environment:
+      - TZ=Asia/Seoul
+    networks:
+      - backend
+      - proxy
   mysql:
     image: mysql:8.0
     container_name: bus-mysql

diff --git a/server/src/main/java/com/talkka/server/oauth/controller/BaseController.java b/server/src/main/java/com/talkka/server/oauth/controller/BaseController.java
diff --git a/server/src/main/resources/application.yaml b/server/src/main/resources/application.yaml
@@ -102,23 +102,23 @@ spring:
     password: ${MYSQL_PASSWORD}
   sql:
     init:
-      mode: never
+      mode: always
   jpa:
     hibernate:
       ddl-auto: update
     properties:
       hibernate:
         format_sql: true
         dialect: org.hibernate.dialect.MySQL8Dialect
-    show-sql: false
+    show-sql: true
   security:
     oauth2:
       client:
         registration:
           naver:
             client-id: ${NAVER_CLIENT_ID}
             client-secret: ${NAVER_CLIENT_SECRET}
-            redirect_uri: https://talkka-bus/api/auth/login/naver/code
+            redirect_uri: https://talkka-bus.duckdns.org/api/auth/login/naver/code
             client-name: Naver
             authorization-grant-type: authorization_code
             scope:
@@ -132,4 +132,4 @@ spring:
             user-name-attribute: response
 
 base:
-  url: https://talkka-bus:3000 # 추후 프론트에 맞게 수정 필요
+  url: https://talkka-bus.duckdns.org
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ const nextConfig = { @@
         appDir: true,
       },
       api: {
-        baseUrl: "http://localhost:8080",
+        baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
       },
     }
@@ Expand Down @@