Feat: Fix

Author: gomminjae

.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:8080

.github/workflows/main.yml

@@ -0,0 +1,87 @@
+name: Deploy Vue App to Ubuntu Server using Docker
+
+on:
+  push:
+    branches:
+      - master
+
+env:
+  SERVER_HOST: 211.117.197.184
+  SERVER_SSH_USER: parkhaein
+  PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+  DOCKER_IMAGE_NAME: kanepark/vue-app
+
+jobs:
+  build-and-push-docker:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: |
+          # 기존 node_modules와 package-lock.json 삭제
+          rm -rf node_modules
+          rm -f package-lock.json
+  
+          # npm 캐시를 정리하여 충돌 방지
+          npm cache clean --force
+  
+          # 종속성 재설치
+          npm install
+          npm install vue-simple-range-slider
+
+
+      - name: Build the Vue app
+        run: npm run build
+
+      - name: Build Docker image
+        run: docker build . --file Dockerfile --tag ${{ env.DOCKER_IMAGE_NAME }}:latest
+
+      - name: Login to Docker Hub
+        run: echo "${{ secrets.DOCKER_HUB_TOKEN }}" | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
+
+      - name: Push Docker image
+        run: docker push ${{ env.DOCKER_IMAGE_NAME }}:latest
+
+  deploy-to-ubuntu-server:
+    needs: build-and-push-docker
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to Ubuntu Server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ env.SERVER_HOST }}
+          username: ${{ env.SERVER_SSH_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 234
+          script: |
+            LOG_DIR="/home/ubuntu/app-logs"
+            mkdir -p $LOG_DIR
+            touch $LOG_DIR/app.log
+      
+            # sudo 명령어에 비밀번호 자동 입력
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker container prune -f
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker image prune -af
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker volume prune -f
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker system prune -af --volumes
+
+            # Docker 이미지 업데이트 및 컨테이너 실행
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker pull ${{ env.DOCKER_IMAGE_NAME }}:latest
+            
+            # 기존 컨테이너 중지 및 삭제
+            if [ "$(sudo docker ps -aq -f name=vue-container)" ]; then
+              echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker stop vue-container
+              echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker rm vue-container
+            fi
+            
+            # 새로운 컨테이너 실행
+            echo "${{ secrets.SUDO_PASSWORD }}" | sudo -S docker run --name vue-container -d -p 60:3000 -e TZ=Asia/Seoul \
+              -v $LOG_DIR/app.log:/app/logs/app.log ${{ env.DOCKER_IMAGE_NAME }}:latest

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
+  ]
+}

README.md

@@ -0,0 +1,35 @@
+# newjeaps
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

dockerfile

@@ -0,0 +1,29 @@
+# 빌드 단계
+FROM node:18 AS build-stage
+
+WORKDIR /app
+
+# 의존성 설치
+COPY package*.json ./
+RUN npm cache clean --force && npm install --no-optional
+
+# Vue 애플리케이션 빌드
+COPY . .
+RUN npm run build
+
+# 배포 단계
+FROM node:18 AS production-stage
+
+WORKDIR /app
+
+# 빌드된 파일만 복사
+COPY --from=build-stage /app/dist ./dist
+
+# Node.js로 정적 파일 서빙
+RUN npm install -g serve
+
+# 앱 실행
+CMD ["serve", "-s", "dist", "-l", "3000"]
+
+# 포트번호
+EXPOSE 3000

eslint.config.js

@@ -0,0 +1,17 @@
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+]

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Newjeaps</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}