[25.01.05 / TASK-91] Feature - deploy 세팅 (#8)

* feature: dockerfile 과 github action 에서 docker image CI CD 환경 구성
* modify: readme 수정
* feature: 2차 배포 세팅
* refactor: devDependencies에서 sentry dependencies로 sentry 이동
* hotfix: fixed deploy
* hotfix: 로그인 오토필 관련 오류 해결
* modify: standalone 설정을 위한 dockerfile update
* modify: git action 에  workflow_dispatch: 추가
* hotfix: 데이터 타입 맞춤
* refactor: 타입 맞춤
* hotfix: env ignore 이슈 해결
* hotfix: 커서 관련 오류 해결
* modify: action version

---------

Co-authored-by: six-standard <[email protected]>

.github/workflows/docker-publish.yaml

@@ -0,0 +1,47 @@
+name: Build and Push Docker Image
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 23
+
+      - name: Install dependencies
+        run: |
+          npm install -g pnpm
+          pnpm install --frozen-lockfile
+
+      - name: Build Next.js application
+        run: |
+          pnpm run build
+
+      # Docker 로그인
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Docker 이미지 빌드
+      - name: Build Docker Image
+        run: |
+          docker build -t velog-dashboard-v2-fe:latest .
+
+      # Docker Hub에 푸시
+      - name: Push Docker Image
+        run: |
+          docker tag velog-dashboard-v2-fe:latest ${{ secrets.DOCKER_USERNAME }}/velog-dashboard-v2-fe:latest
+          docker push ${{ secrets.DOCKER_USERNAME }}/velog-dashboard-v2-fe:latest

.gitignore

@@ -1,10 +1,59 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nextjs,react,git,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,visualstudiocode,nextjs,react,git,node
 
+### Git ###
+# Created by git for backups. To disable backups in Git:
+# $ git config --global mergetool.keepBackup false
+*.orig
+
+# Created by git when using merge tools for conflicts
+*.BACKUP.*
+*.BASE.*
+*.LOCAL.*
+*.REMOTE.*
+*_BACKUP_*.txt
+*_BASE_*.txt
+*_LOCAL_*.txt
+*_REMOTE_*.txt
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### NextJS ###
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
@@ -17,16 +66,13 @@
 /build
 
 # misc
-.DS_Store
 *.pem
 
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
-.env*.local
+.pnpm-debug.log*
 
 # vercel
 .vercel
@@ -35,7 +81,195 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# envs
 .env*
+!.env.sample
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
 
-# Sentry Config File
-.env.sentry-build-plugin
+# End of https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nextjs,react,git,node

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:23-alpine
+
+WORKDIR /usr/src/app
+
+RUN npm install -g pnpm pm2
+
+# 기존 빌드된 파일들과 필요한 설정 파일들 복사
+COPY next.config.mjs ecosystem.config.js ./
+COPY .next/standalone ./
+COPY .next/static ./.next/static
+COPY public ./public
+COPY .env ./.env
+COPY .env.production ./.env.production
+
+# 프로덕션 의존성만 설치
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --no-frozen-lockfile --prod
+
+EXPOSE 3000
+
+CMD ["pm2-runtime", "start", "ecosystem.config.js"]

ecosystem.config.js

@@ -0,0 +1,21 @@
+// @ts-nocheck
+module.exports = {
+  apps: [
+    {
+      name: 'velog-dashboard-v2-fe',
+      script: 'node',
+      args: './server.js',
+      instances: 1,
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '1G',
+      env: {
+        NODE_ENV: 'production',
+      },
+      error_file: 'logs/next-err.log',
+      out_file: 'logs/next-out.log',
+      log_date_format: 'YYYY-MM-DD HH:mm:ss',
+      restart_delay: 4000,
+    },
+  ],
+};

next.config.mjs

@@ -1,8 +1,9 @@
 import { withSentryConfig } from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: false,
+  reactStrictMode: true,
   experimental: { forceSwcTransforms: true },
+  output: 'standalone',
 
   webpack: (config, options) => {
     config.module.rules.push({

package.json

@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",
     "chart.js": "^4.4.7",
@@ -27,7 +28,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
-    "@sentry/nextjs": "^8.47.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",