피어세션 2주차 준비

공유할 것

yarn-berry 도입 취소

yarn-berry에 하루 쏟고 npm으로 갈아탐
정리한 자료 공유!!

CI/CD

Github Action, Docker, NCP Container registry, 슬랙 알림

name: Backend Dev CD
run-name: ${{ github.actor }}가 실행함
on:
  push:
    branches:
      - develop
    paths:
      - 'backend/**'
      - '.github/workflows/backend-dev-cd.yml'
      - '.github/workflows/slack-notification.yml'

jobs:
  Register-Docker-Image:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './backend'
    outputs:
      status: ${{ job.status }}
    steps:
      - name: checkout
        uses: actions/checkout@v3

      # ..?
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2

      # buildx: BuildKit을 확장한 docker cli plugin - Dockerfile Build함
      # BuildKit: 내용 엄청 많음
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: docker registry login
        uses: docker/login-action@v2
        with:
          registry: ${{ secrets.NCP_DOCKER_REGISTRY }}
          username: ${{ secrets.NCP_ACCESS_KEY }}
          password: ${{ secrets.NCP_SECRET_KEY }}

      - name: build and push
        id: docker_build
        uses: docker/build-push-action@v3
        with:
          context: backend
          file: backend/Dockerfile
          tags: |
            ${{ secrets.NCP_DOCKER_REGISTRY }}/moyeo-server:latest
            ${{ secrets.NCP_DOCKER_REGISTRY }}/moyeo-server:${{ github.sha }}
          push: true

      - name: Image digest
        run: echo ${{ steps.docker_build.outputs.digest }}

  CD:
    needs: [Register-Docker-Image]
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './backend'
    outputs:
      status: ${{ job.status }}
    steps:
      - name: deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{secrets.BACKEND_DEV_REMOTE_IP}}
          username: ${{secrets.BACKEND_DEV_REMOTE_SSH_ID}}
          password: ${{secrets.BACKEND_DEV_REMOTE_ADMIN_KEY}}
          port: ${{secrets.BACKEND_DEV_REMOTE_SSH_PORT}}
          envs: DOCKER_SERVER_IMAGE
          script: |
            rm -rf web13-moyeomoyeo

            git clone [email protected]:boostcampwm-2022/web13-moyeomoyeo.git

            cd web13-moyeomoyeo

            git checkout -t origin/develop

            sudo chmod +x ./backend/scripts/dev-deploy.sh

            ./backend/scripts/dev-deploy.sh ${{ secrets.NCP_ACCESS_KEY }} ${{ secrets.NCP_SECRET_KEY }} ${{ secrets.NCP_DOCKER_REGISTRY }} ${{ secrets.DOCKER_SERVER_IMAGE }}

  slack-notifications:
    needs: [Register-Docker-Image, CD]
    if: ${{ always() }}
    uses: ./.github/workflows/slack-notification.yml
    with:
      title: 백엔드 개발용 CD
      status: '${{ needs.CD.outputs.status }}'
      commit_url: ${{ github.event.pull_request.html_url || github.event.head_commit.url }}
    secrets:
      webhook_url: ${{ secrets.SLACK_NOTIFICATION_WEBHOOK_URL }}

name: Frontend CI
run-name: ${{ github.actor }}가 실행함
on:
  pull_request:
    branches:
      - develop
    paths:
      - 'frontend/**'
      - './github/workflows/frontend-ci.yml'
      - './github/workflows/slack-notification.yml'

jobs:
  CI:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './frontend'
    outputs:
      status: ${{ job.status }}
    steps:
      - name: checkout
        uses: actions/checkout@v3

      - name: nodeJS
        uses: actions/setup-node@v3
        with:
          node-version: 16.18.1

      - name: dependency install
        run: npm install

      - name: test
        run: npm run test-all

  lhci:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './frontend'
    outputs:
      status: ${{ job.status }}
    steps:
      - name: checkout
        uses: actions/checkout@v3

      - name: nodeJS
        uses: actions/setup-node@v3
        with:
          node-version: 16.18.1

      - name: dependency install
        run: |
          npm install

      - name: Build
        run: |
          npm run build

      - name: lighthouse
        run: |
          npm install -g @lhci/cli
          lhci autorun || echo "Fail to Run Lighthouse CI"

      - name: Format lighthouse score
        id: format_lighthouse_score
        uses: actions/github-script@v3
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            const fs = require('fs');
            const results = JSON.parse(fs.readFileSync("./frontend/lhci_reports/manifest.json"));
            let comments = "";

            results.forEach((result, idx) => {
              const { summary, jsonPath } = result;
              const details = JSON.parse(fs.readFileSync(jsonPath));
              const { audits } = details;
              const formatResult = (res) => Math.round(res * 100);

              Object.keys(summary).forEach(
                (key) => (summary[key] = formatResult(summary[key]))
              );

              const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴");

              const comment = [
                `⚡️ Lighthouse report ${idx + 1}!`,
                `| Category | Score |`,
                `| --- | --- |`,
                `| ${score(summary.performance)} Performance | ${summary.performance} |`,
                `| ${score(summary.accessibility)} Accessbility | ${summary.accessibility} |`,
                `| ${score(summary.seo)} SEO | ${summary.seo} |`,
                `| ${score(summary.pwa)} PWA | ${summary.pwa} |`,
              ].join("\n");

              const detail = [
                `| Category | Score |`,
                `| --- | --- |`,
                `| ${score(
                  audits["largest-contentful-paint"].score * 100
                )} Largest Contentful Paint | ${
                  audits["largest-contentful-paint"].displayValue
                } |`,
                `| ${score(
                  audits["first-contentful-paint"].score * 100
                )} First Contentful Paint | ${
                  audits["first-contentful-paint"].displayValue
                } |`,
                `| ${score(
                  audits["speed-index"].score * 100
                )} Speed Index | ${
                  audits["speed-index"].displayValue
                } |`,
                `| ${score(
                  audits["total-blocking-time"].score * 100
                )} Total Blocking Time | ${
                  audits["total-blocking-time"].displayValue
                } |`,
                `| ${score(
                  audits["interactive"].score * 100
                )} Time To Interactive | ${
                  audits["interactive"].displayValue
                } |`,
                `| ${score(
                  audits["cumulative-layout-shift"].score * 100
                )} Cumulative Layout Shift | ${
                  audits["cumulative-layout-shift"].displayValue
                } |`,
              ].join("\n");
              comments += comment + "\n" + "\n" + detail + "\n" + "\n";
            });
            core.setOutput('comments', comments)

      - name: comment PR
        uses: unsplash/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: ${{ steps.format_lighthouse_score.outputs.comments }}
  docker:
    needs: [CI]
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './frontend'
    outputs:
      status: ${{ job.status }}
    steps:
      - name: checkout
        uses: actions/checkout@v3

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: docker registry login
        uses: docker/login-action@v2
        with:
          registry: ${{ secrets.NCP_DOCKER_REGISTRY }}
          username: ${{ secrets.NCP_ACCESS_KEY }}
          password: ${{ secrets.NCP_SECRET_KEY }}

      - name: build and push
        id: docker_build
        uses: docker/build-push-action@v3
        with:
          context: frontend
          file: frontend/Dockerfile
          tags: ${{ secrets.NCP_DOCKER_REGISTRY }}/moyeo-client:latest
          push: true

      - name: Image digest
        run: echo ${{ steps.docker_build.outputs.digest }}

  slack-notifications:
    needs: [CI, docker, lhci]
    if: ${{ always() }}
    uses: ./.github/workflows/slack-notification.yml
    with:
      title: 프론트엔드 개발용 CI
      status: 'CI : ${{ needs.CI.outputs.status }} && docker : ${{ needs.docker.outputs.status }} && lhci : ${{ needs.lhci.outputs.status }}'
      commit_url: ${{ github.event.pull_request.html_url || github.event.head_commit.url }}
    secrets:
      webhook_url: ${{ secrets.SLACK_NOTIFICATION_WEBHOOK_URL }}