프로덕션 cicd 테스트 (#16)

* [BYOB-51] 지역 선택 컴포넌트 구현 (#2) * feat: 지역 선택 컴포넌트 구현 * feat: 지역 선택 컴포넌트에서 회원가입 페이지로 지역 정보 전달 구현 * fix: 지역 선택 컴포넌트에서 상위 분류 변경 시 하위 분류 초기화되지 않는 문제 해결 (#3) * [BYOB-50, 55] OAuth 페이지, 세션 키 저장 + 로그아웃 (#4) * chore: mui 패키지 설치 * chore: mui 적용 * chore: emotion 적용 * feat: 메인 페이지 구현 * feat: 로그인 페이지 구현 * fix: url 오류 해결 * fix: package.json axios 문제 해결 * [BYOB-62] 모임 상세조회 화면 (#5) * chore: embla-carousel 및 mui/icons-material 설치 * feat: 모든 이미지 사용 가능하게 변경 * feat: 이미지 슬라이더 컴포넌트 구현 * feat: 모임 상세 페이지 틀 구현 * feat: props를 통해 주소 받도록 수정 * feat: 폰트 적용 * feat: 이미지 슬라이더 버튼 사진에 보이게 하기 * feat: 구글 지도 구현 * feat: 모임 상세 화면 구현 * feat: 포멧팅 함수 구현 * feat: 상세 화면에 필요한 스탸일 구현 * chore: 리엑트 쿼리 설치 * feat: api연동 * chore: prettier 설치 * refactor: 서버와 이름 맞춤 * style: 불필요한 import 제거 * feat: 환경 변수 적용 * Create front.yml * [BYOB-85] 프론트 test ci/cd 구축 (#6) * feat: 도커 파일 적용 * feat: 도커 이그노어 파일 적용 * feat: front.yml 환경 변수 추가 * fix: front.yml 환경 변수 오류 해결 * [BYOB-89] 서버 연결을 위한 코드 변경 (#7) * feat: url 환경 변수 적용 * fix: api 필드 카멜케이스로 변경 * feat: 공통 에러 처리 페이지 구현 * feat: 404 에러 처리 페이지 구현 * feat: 404 에러 처리 추가 * fix: api 경로 수정 * fix: yml 문법 오류 해결 * [BYOB-89] 서버 연결을 위한 코드 변경 (#8) * feat: url 환경 변수 적용 * fix: api 필드 카멜케이스로 변경 * feat: 공통 에러 처리 페이지 구현 * feat: 404 에러 처리 페이지 구현 * feat: 404 에러 처리 추가 * fix: api 경로 수정 * fix: front.yml 문법 오류 해결 * [BYOB-89] 서버 연결을 위한 코드 변경 (#9) * feat: url 환경 변수 적용 * fix: api 필드 카멜케이스로 변경 * feat: 공통 에러 처리 페이지 구현 * feat: 404 에러 처리 페이지 구현 * feat: 404 에러 처리 추가 * fix: api 경로 수정 * [BYOB-72] 모임 목록 조회 페이지 구현 (#10) * feat: 모임목록 페이지 무한스크롤 구현 - useInfiniteQuery, IntersectionObserveAPI 사용 * feat: 뷰포트 밖으로 벗어난 모임목록의 내용 비활성화하기 * feat: 모임목록 페이지 스크롤 유지 기능 추가 * fix: MeetingCard에 key를 prop으로 잘못 전달한 부분 수정 * feat: MeetingCard css 적용 * feat: 모임조회 헤더 레이아웃 추가 * fix: front_dev.yml 환경변수 문제 해결 * fix: 도커 copy 시 .env 포함하도록 변경 (#11) * fix: 도커 빌드 결과물 copy 시 next.config.mjs도 포함하도록 변경 (#12) * [BYOB-101] 서버 API 수정에 따른 모임 관련 API 요청 경로 수정 (#13) * [BYOB-105] Google Analytics 연결 테스트 (#14) * feat: Google Analytics 사용을 위한 @next/third-parties 설치 및 RootLayout 수정 * feat: GA ID 환경변수 설정 --------- Co-authored-by: Youngmin Song <[email protected]>
team-alcoholic · Jul 23, 2024 · f7bc913 · f7bc913
1 parent 45cfc89
commit f7bc913
Show file tree

Hide file tree

Showing 36 changed files with 2,817 additions and 178 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,40 @@
+# Node modules 폴더 제외
+node_modules
+
+# Dockerfile 자체는 제외
+Dockerfile
+
+# Git 관련 파일 및 폴더 제외
+.git
+.gitignore
+
+
+# 로그 파일 제외
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 운영체제 별 파일 제외
+.DS_Store
+Thumbs.db
+
+# 테스트 관련 파일 및 폴더 제외
+__tests__
+__mocks__
+coverage
+*.lcov
+
+# 빌드 결과물 제외
+build
+dist
+out
+
+# 에디터 및 IDE 설정 파일 제외
+.vscode
+.idea
+*.swp
+
+# Next.js 빌드 관련 파일 제외
+.next
diff --git a/.github/workflows/front_dev.yml b/.github/workflows/front_dev.yml
@@ -0,0 +1,57 @@
+name: Build and Deploy Next.js Docker Image
+
+on:
+  push:
+    branches:
+      - 'develop'
+
+jobs:
+  build-docker-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Create .env file
+      run: |
+        echo "NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL_DEV }}" > .env
+        echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL_DEV }}" >> .env
+        echo "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
+
+    - name: Build Docker image
+      run: docker build -t ${{ secrets.DOCKERHUB_USERNAME }}/jumo_test_front .
+
+    - name: Docker login
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+    - name: Push Docker image to Docker Hub
+      run: docker push ${{ secrets.DOCKERHUB_USERNAME }}/jumo_test_front
+
+  deploy:
+    needs: build-docker-image
+    runs-on: [self-hosted]
+    steps:
+    - name: Clean up Docker system before pulling
+      run: |
+        sudo docker stop $(sudo docker ps -aq) || true
+        sudo docker container prune -f || true
+        sudo docker image prune -a -f || true
+        sudo docker volume prune -f || true
+        sudo docker network prune -f || true
+        sudo docker system prune -a -f || true
+
+    - name: docker pull
+      run: sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/jumo_test_front
+
+    - name: docker run new container
+      run: sudo docker run --rm -it -d -p 80:3000 --name jumo_test_front ${{ secrets.DOCKERHUB_USERNAME }}/jumo_test_front
+
+    - name: Clean up unused Docker images after deployment
+      run: |
+        sudo docker image prune -a -f || true
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,41 @@
+# 빌드 단계
+FROM node:18 as build
+
+# 작업 디렉토리 생성 및 설정
+WORKDIR /app
+
+# package.json과 package-lock.json만 복사하여 의존성 설치
+COPY package.json package-lock.json ./
+
+# 의존성 설치
+RUN npm install
+
+# 소스 코드를 작업 디렉토리로 복사
+COPY . .
+
+# 애플리케이션 빌드
+RUN npm run build
+
+# 프로덕션 이미지 생성
+FROM node:18-alpine
+
+# 작업 디렉토리 설정
+WORKDIR /app
+
+# 빌드 단계에서 생성된 빌드 결과물만 복사
+COPY --from=build /app/.next ./.next
+COPY --from=build /app/public ./public
+COPY --from=build /app/package.json ./
+COPY --from=build /app/package-lock.json ./
+
+# next.config.js 파일 복사
+COPY --from=build /app/next.config.mjs ./
+
+# 프로덕션 의존성 설치
+RUN npm install --only=production
+
+# 포트 설정
+EXPOSE 3000
+
+# 애플리케이션 시작 명령어
+CMD ["npm", "start"]
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: '**',
+                pathname: '/**',
+            },
+        ],
+    },
+};
 
-export default nextConfig;
+export default nextConfig;