Merge branch 'main' of https://github.com/codesquad-masters2024-team0…

…2/issue-tracker

.github/workflows/client-cd.yml

@@ -0,0 +1,62 @@
+name: Deploy React to S3
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+# 워크플로우가 저장소의 콘텐츠를 읽을 수 있는 권한을 갖도록 설정
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: ./FE/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+            ${{ runner.OS }}-
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./FE
+
+      - name: Build
+        run: npm run build
+        working-directory: ./FE
+        env:
+          VITE_TEAM_SERVER: ${{ secrets.VITE_TEAM_SERVER }}
+          VITE_TEAM_CLIENT: ${{ secrets.VITE_TEAM_CLIENT }}
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.S3_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.S3_REGION }}
+
+      - name: SHOW AWS CLI VERSION
+        env:
+          AWS_EC2_METADATA_DISABLED: true
+        run: |
+          aws s3 sync \
+            dist s3://issue-tracker-02 \
+            --delete
+        working-directory: ./FE
+
+      - name: Invalidate CloudFront Cache
+        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.github/workflows/server-cd.yml

@@ -0,0 +1,82 @@
+name: Deploy Spring Application to Ec2
+
+on: 
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+# 워크플로우가 저장소의 콘텐츠를 읽을 수 있는 권한을 갖도록 설정
+permissions: 
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v4
+
+      - name: set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'corretto'
+          java-version: '17'
+
+      - name: Make KeyStore
+        env:
+          KEYSTORE_P12: ${{ secrets.KEYSTORE_P12 }}
+        run: |
+          cd ./be/issue-tracker/src/main
+          mkdir resources
+          cd resources
+          mkdir ssl
+          cd ssl
+          touch keystore.p12
+          echo "${{ secrets.KEYSTORE_P12 }}" | base64 -d > ./keystore.p12
+        shell: bash
+
+      - name: Make application.properties
+        run: |
+          cd ./be/issue-tracker/src/main/resources
+          touch application.properties
+          echo "${{ secrets.PROPERTIES }}" > ./application.properties
+        shell: bash
+
+      - name: Grant execute permission for gradlew
+        run: |
+          cd ./be/issue-tracker
+          chmod +x gradlew
+        
+      - name: Build with Gradle
+        run: |
+          cd ./be/issue-tracker
+          ./gradlew clean build -x test
+
+      # dockerfile을 통해 이미지를 빌드하고, 이를 docker repo로 push 합니다.
+      - name: Docker build & push to docker repo
+        run: |
+          cd ./be/issue-tracker 
+          docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+          docker build -f Dockerfile -t ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPO }}:latest .
+          docker push ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPO }}:latest
+
+      # 서버에 접속 후 Docker 이미지 가져와서 배포
+      - name: Deploy to server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          key: ${{ secrets.EC2_PRIVATE_KEY }}
+          run: |
+            cd /home/ubuntu
+          script: |
+            sudo docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+            sudo docker pull ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPO }}:latest
+            # 기존에 실행 중인 컨테이너 중지 및 삭제
+            if [ $(sudo docker ps -q -f name=spring-server) ]; then
+              sudo docker stop spring-server
+              sudo docker rm spring-server
+            fi
+            # 새로운 컨테이너 실행
+              sudo docker-compose up -d

.github/workflows/server-ci.yml

@@ -0,0 +1,52 @@
+name: CI with Gradle
+
+on: 
+  push:
+    branches: [ "be/**" ]
+  pull_request:
+    branches: [ "be/**" ]
+
+# 워크플로우가 저장소의 콘텐츠를 읽을 수 있는 권한을 갖도록 설정
+permissions: 
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v4
+
+      - name: set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'corretto'
+          java-version: '17'
+          cache: gradle
+
+      - name: Make application.properties
+        run: |
+          cd ./be/issue-tracker/src/main
+          mkdir resources
+          cd resources
+          touch application.properties
+          echo "${{ secrets.PROPERTIES }}" > ./application.properties
+        shell: bash
+
+      - name: Grant execute permission for gradlew
+        run: |
+          cd ./be/issue-tracker
+          chmod +x gradlew
+
+      # Gradle Daemon을 사용하지 않도록 지정
+      # CI 환경에서는 Daemon을 사용하지 않는 것이 일반적
+      # 이유는 각 빌드가 깨끗한 환경에서 실행되며, Daemon이 이전 빌드의 상태를 유지하지 않기 때문
+      - name: Run tests with Gradle
+        run: |
+          cd ./be/issue-tracker
+          ./gradlew test --no-daemon
+          
+      - name: Build with Gradle
+        run: |
+          cd ./be/issue-tracker
+          ./gradlew build -x test --no-daemon

FE/.env.production

@@ -0,0 +1,2 @@
+VITE_APP_ENV=production
+VITE_TEAM_SERVER=http://13.125.241.143:8080

FE/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

FE/.gitignore

@@ -0,0 +1,28 @@
+.env.production
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.prettierrc

FE/README.md

@@ -0,0 +1,44 @@
+# Vite + React
+
+### Styled Components
+
+`$ npm install styled-components`
+
+### React Router
+
+Web 용 react-router-dom을 React 애플리케이션 프로젝트에 설치해줍니다.
+
+`$ npm i react-router-dom`
+
+### Ant Design
+
+`$ npm install antd@latest`
+
+### React Query
+
+`$ npm i @tanstack/react-query`
+
+### React Query Devtool
+
+`$ npm i @tanstack/react-query-devtools`
+
+### 마크다운 형식 텍스트
+
+[react-markdown](https://www.npmjs.com/package/react-markdown/v/8.0.6)  
+ : 마크다운을 렌더링하는 React 컴포넌트
+
+[remark-gfm](https://www.npmjs.com/package/remark-gfm/v/1.0.0)  
+ : remark 플러그인을 사용하여 GitHub Flavored Markdown을 지원
+
+[react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter)  
+ : React용 구문 강조 컴포넌트
+
+`$ npm install react-markdown remark-gfm react-syntax-highlighter`
+
+### 스피너
+
+`$ npm install --save react-spinners`
+
+### 색상 유효성 체크
+
+`$ npm i validate-color --save`

FE/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="https://lucas.codesquad.kr/favi/favicon-16x16.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>issue-tracker🔥</title>
+        <script type="module" src="/src/main.jsx" defer></script>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>