Chore/ci-cd (#2) CI/CD 구축

1. .github/workflows/* => github action
2. scripts/* => EC2 shell script (Code Deploy hook)
3. appSpec.yml => CodeDeploy 동작 정의
4. ecosystem.config.js => pm2 configure 파일

.eslintrc.json

@@ -19,7 +19,7 @@
       }
     }
   },
-  "ignorePatterns": ["next.config.js", "jest.*.js"],
+  "ignorePatterns": ["*.setup.js", "*.config.js"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",

.github/workflows/Deploy.yml

@@ -0,0 +1,57 @@
+name: deploy to S3
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  S3_BUCKET_NAME: chagok-bucket
+  CODE_DEPLOY_APPLICATION_NAME: chagok-code-deploy
+  CODE_DEPLOY_DEPLOYMENT_GROUP_NAME: chagok
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      # 프로젝트를 빌드한다.
+      - name: Build next app
+        run: npm run build
+
+      - name: Make zip file
+        run: zip -qq -r ./chagok.zip . -x "node_modules/*"
+      #  -x "node_modules/*"
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      # Make zip file 단계에서 압축된 빌드 파일을 S3 버킷에 업로드하는 단계이다.
+      - name: Upload to S3
+        run: aws s3 cp --region ap-northeast-2 ./chagok.zip s3://$S3_BUCKET_NAME/chagok.zip
+
+      # S3에 업로드 된 빌드 파일을 이용해 CodeDeploy가 정의된 동작을 하도록 트리거
+      - name: Code Deploy
+        run: |
+          aws deploy create-deployment \
+          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
+          --deployment-config-name CodeDeployDefault.AllAtOnce \
+          --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
+          --s3-location bucket=$S3_BUCKET_NAME,bundleType=zip,key=chagok.zip

.github/workflows/Test.yml

@@ -0,0 +1,27 @@
+name: Node.js CI
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run test
 npx lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+*.yml
+*.sh

appspec.yml

@@ -0,0 +1,21 @@
+version: 0.0
+os: linux
+
+files:
+  - source: /
+    destination: /home/ubuntu/chagok
+    overwrite: yes
+permissions:
+  - object: /home/ubuntu/chagok
+    owner: ubuntu
+    group: ubuntu
+    mode: 755
+hooks:
+  AfterInstall:
+    - location: scripts/after-install.sh
+      timeout: 120
+      runas: root
+  ApplicationStart:
+    - location: scripts/app-start.sh 
+      timeout: 300
+      runas: root

ecosystem.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  apps: [
+    {
+      name: "project",
+      script: "npm",
+      args: "run start",
+      instances: 2,
+      autorestart: true,
+      watch: false,
+      env: {
+        PORT: 3000,
+        NODE_ENV: "development",
+      },
+      env_production: {
+        PORT: 3000,
+        NODE_ENV: "production",
+      },
+      output: "./logs/console.log",
+      error: "./logs/consoleError.log",
+    },
+  ],
+};

package.json

@@ -44,9 +44,9 @@
     "eslint-plugin-react-hooks": "^5.0.0-canary-7118f5dd7-20230705",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "husky": "^8.0.0",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
+     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "typescript": "^4.9.5"
   },

scripts/after-install.sh

@@ -0,0 +1,6 @@
+ echo "> after install"
+
+ cd /home/ubuntu/chagok
+ sudo rm -r node_modules
+ npm install
+ npm run build

scripts/app-start.sh

@@ -0,0 +1 @@
+echo "app start ;)"

src/pages/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import { Inter } from "next/font/google";
 import Head from "next/head";
 import Image from "next/image";
@@ -15,7 +16,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
+        <div className={styles.description} css={{ backgroundColor: "blue" }}>
           <p>
             Get started by editing&nbsp;
             <code className={styles.code}>src/pages/index.tsx</code>

tsconfig.json

@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    // "jsxImportSource": "@emotion/react",
+    "jsxImportSource": "@emotion/react",
     "incremental": true,
     "baseUrl": "./src"
   },