GitHub Actions + Docker + react

 

도커파일은 build후 결과물을 nginx에 넣어버린다.

FROM node:20 as builder

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install -g pnpm
RUN pnpm install

COPY ./ ./

# CMD ["pnpm", "run", "build"]
RUN pnpm run build


FROM nginx
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

 

.github/workflows/preview.yaml

 

main외의 브랜치가 원격저장소에 Push되면 작동한다.

name: CI/CD with Docker

on:
  push:
    branches-ignore:
      - main

jobs:
  build-and-push:
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout code
      - name: Checkout code
        uses: actions/checkout@v3

      # 2. Run Test
      - name: Run Test
        run: |
          npm install -g pnpm
          pnpm install
          pnpm run test

      # 3. Login to Docker Hub
      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      # 4. Build Docker Image
      - name: Build Docker Image
        run: |
          docker build -t my-docker-image:${{ github.sha }} -f dockerfile/Dockerfile.prod ./

      # 5. Push Docker Image to Registry
      - name: Push Docker Image
        run: |
          docker tag my-docker-image:${{ github.sha }} juneryu/react-docker-practice-ryu9663:latest
          docker push juneryu/react-docker-practice-ryu9663:latest

 

시크릿키는 Docker hub의 아이디와 AccessToken이다.

Docker Password에 들어갈 AccessToken은 Docker hub에서 발행한 access token을 넣어주는데 write 권한이 있어야 한다.

 

 

      # 4. dockerfile/Dockerfile.prod를 읽고 my-docker-image:${{커밋 sha}}를 빌드한다
      - name: Build Docker Image
        run: |
          docker build -t my-docker-image:${{ github.sha }} -f dockerfile/Dockerfile.prod ./
          
      # 5. Push Docker Image to Registry
      # 4단계에서 빌드한 파일을 juneryu/react-docker-practice-ryu9663의 가장 최신버전에 tag 한다.
      # 그리고 푸시한다.
      - name: Push Docker Image
        run: |
          docker tag my-docker-image:${{ github.sha }} juneryu/react-docker-practice-ryu9663:latest
          docker push juneryu/react-docker-practice-ryu9663:latest

 

그러면 아래 이미지처럼 docker hub에 push 된 것을 확인할 수 있다.

 

이걸 실행시키려면 다음 명령어 입력

 

docker pull juneryu/react-docker-practice-ryu9663:latest
docker run -d -p 8080:80 juneryu/react-docker-practice-ryu9663:latest

 

juneryu/react-docker-practice-ryu9663:latest에서 pull 받고

외부환경인 나의 포트 8080를 도커 컨테이너 내부의 80포트(nginx의 포트)에 연결시킨후 실행