리액트 파이프라인 정리

임시저장

• 깃허브 액션에서 배포할 때 node.js 16.15.0 버전으로 빌드해야됨

도커파일

#base image로 nginx 사용, 태그 생략 시 자동 latest
FROM nginx

#root 경로에 app 폴더 생성
RUN mkdir /app

#work dir을 소스코드를 카피할 기본 경로로 설정
WORKDIR /app

# work dir 하위에 build 폴더 생성 /app/build
RUN mkdir ./build

#앞에는 host pc 뒤에는 docker 경로
#현재 Dockerfile이 위치한 같은 경로에  > Docker 컨테이너의 work dir 경로에 복사하라는 명령어
#윈도우 dockerfile이 있는 위치의 build파일을 컨테이너 만들어서 app 밑에 build에 복사하라는 명령어

#host pc의 현재 경로의 build 폴더를 work dir의 build 폴더로 복사
ADD ./build ./build

# nginx의 default.conf를 삭제 nginx의 기본 설정파일 삭제
RUN rm -rf /etc/nginx.conf.d/default.conf

# host pc의 nginx.conf 파일을 아래 경로에 복사
COPY ./nginx.conf /etc/nginx

# 80 포트 오픈
EXPOSE 80

# nginx -g deamon off; 명령어를 실행
# container 실행 시 자동으로 실행할 커맨드 (nginx 서버 데몬으로 시작하기 위한 명령)
CMD ["nginx", "-g", "daemon off;"]

GITHUB ACTIONS WORKFLOW

name: React-server CD 

# 트리거를 수행할 브랜치를 지정합니다.
on:
  push:
    branches: [ main ]

# 환경설정
env:
  DOCKER_IMAGE: ghcr.io/${{ github.actor }}/today-react
  VERSION: ${{ github.sha }}
  NAME: go_cicd
  BUILD_PATH: ${{ github.workspace}}/today/client

jobs:  
  # 빌드 Job
  build:
    name: Build
    runs-on: ubuntu-latest
    # defaults:
    #   run:
    #     working-directory: ${{ env.BUILD_PATH }}
    # strategy:
    #   matrix:
    #     node-version: [16.15.0]

    steps:
      # github repository에서 checkout
      - uses: actions/checkout@v3

      # - name: npm build
      #   uses: actions/setup-node@v3
      #   with:
      #     node-version: ${{ matrix.node-version }}
      # - run: npm install
      # - run: npm run build

      
      # - name: Use Node.js ${{ matrix.node-version }}
      #   uses: actions/setup-node@v1
      #   with:
      #     node-version: ${{ matrix.node-version }}
      # - run: npm ci
      # - run: npm run build
      #   if: ${{ always() }}

      
      # docker build 수행
      - name: Set up docker buildx
        id: buildx
        uses: docker/setup-buildx-action@v1
      - name: Cache docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ env.VERSION }}
          restore-keys: |
            ${{ runner.os }}-buildx-
      # GitHub 컨테이너 레지스트리에 로그인 후 빌드 & 푸시    
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GHCR_TOKEN }}
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          builder: ${{ steps.buildx.outputs.name }}
          push: true
          tags: ${{ env.DOCKER_IMAGE }}:latest
  # 배포 Job
  deploy:
    needs: build  # build 후에 실행되도록 정의
    name: Deploy
    runs-on: [ self-hosted, react-server ] # AWS ./configure에서 사용할 label명
    steps:
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GHCR_TOKEN }}
      # 3000 -> 80 포트로 수행하도록 지정
      - name: Docker run
        run: |
          docker stop ${{ env.NAME }} && docker rm ${{ env.NAME }} && docker rmi ${{ env.DOCKER_IMAGE }}:latest
          docker run -d -p 80:80 --name go_cicd --restart always ${{ env.DOCKER_IMAGE }}:latest