Vite + Yarn berry 프로젝트 배포하기

이전 포스팅에서 Vite와 Yarn berry 세팅을 마쳤다.

해당 세팅으로 인해 당연히 배포 방법도 달라질 것이다. 그래도 크게 변하는 건 없어서 이번 포스팅을 통해 해당 세팅 시 배포 방법을 정리하려고 한다.

 

기본적인 리액트 프로젝트 배포 방법

https://doyourbestcode.tistory.com/124

https://doyourbestcode.tistory.com/125

https://doyourbestcode.tistory.com/126

 

✅ 윈도우(Windows)

✅ React(Create React App + Typescript)

✅ Vite + Yarn berry(Zero-installs)

 

Dockerfile 작성

 

FROM node:18 AS builder

# set working directory
WORKDIR /app


# install app dependencies

COPY package* yarn.lock .pnp*     ./
COPY .yarnrc.yml                  ./
COPY .yarn                        ./.yarn

# Installs all node packages
RUN yarn install --immutable --immutable-cache --check-cache

# Copies everything over to Docker environment
COPY . .
RUN yarn build

#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx
#copies React to the container directory
# Set working directory to nginx resources directory
# WORKDIR /usr/share/nginx/html
COPY config/nginx/default.conf /etc/nginx/conf.d/default.conf
# Remove default nginx static resources
RUN rm -rf ./usr/share/nginx/html/*
# Copies static resources from builder stage
COPY --from=builder /app/build /usr/share/nginx/html/
# Containers run nginx with global directives and daemon off
EXPOSE 3000
ENTRYPOINT ["nginx", "-g", "daemon off;"]

 

이전과 모두 동일하지만 달라진 부분이 약간 있다.

 

COPY하는 파일들

 

이전에는 package.json 과 package-lock.json 을 COPY 한 후 npm ci 명령어를 활용해서 정확한 버전의 의존성을 설치하였다. 이제는 Yarn berry를 사용하므로 

 

COPY package* yarn.lock .pnp*     ./
COPY .yarnrc.yml                  ./
COPY .yarn                        ./.yarn

 

위와 같이 의존성 관리에 필요한 파일들을 COPY 해주는 부분이 달라졌다.

 

yarn install --immutable --immutable-cache --check-cache

 

이때 의문이 생길 수 있다. Zero-installs를 활용하면 의존성이 git으로 관리되어서 install하는 과정이 사라진다고 했는데 왜 도커파일에서는 해당 명령어를 실행하는 단계가 포함되어 있는거지??

 

구글링을 해보니 해당 과정은 .yarn/unplugged에 있는 플랫폼 의존적인 모듈 때문에 존재한다고 한다.

원래 Zero-installs 에서는 install 과정을 스킵하고 yarn만 실행해주면 문제없이 작동했었다.

그런데 Dockerfile 에서 yarn 만 수행해주니

 

Cannot find module '@rollup/rollup-linux-arm64-gnu' on multi platform build

 

이런 오류가 떴었다.

Vite는 프로젝트 build 후 배포 시 esbuild가 아닌 rollup 방식을 채택하고 있다고 이전 포스팅에서 언급한 바 있다. 즉, Vite의 의존적인 모듈인 rollup을 찾지 못하여 발생하는 문제인 것 같았다.

 

yarn install --immutable --immutable-cache --check-cache

 

해당 명령어를 통해 최초 한번 플랫폼 의존적인 모듈을 설치해줘야 한다고 한다. 뒤에 붙은 옵션은 npm ci와 같은 효과를 내주기 위해 사용한다.

위의 명령어로 수정해준 뒤 도커 이미지를 빌드하였고, 위의 오류가 사라졌다.

 

Github Actions

 

name: Docker
on:
  push:
    branches: [main]

jobs: 
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      # 도커 이미지에 env 파일 포함 
      - name: Create .env file
        run: |
          echo "VITE_SERVER_API=${{ secrets.VITE_SERVER_API }}" >> ./.env

      # 도커 메타
      - name: Docker meta
        id: docker_meta
        uses: crazy-max/ghaction-docker-meta@v1
        with:
          images: brian990614/localmood-vote
          tag-semver: |
            {{version}}
            {{major}}.{{minor}}

      # 도커 빌드 관련 셋업
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1
      # 내 도커허브 로그인 
      - name: Login to DockerHub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 도커이미지 빌드하고 허브로 푸쉬
      - name: Build and push
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile.prod
          platforms: linux/amd64
          push: true
          tags: ${{ steps.docker_meta.outputs.tags }}
          labels: ${{ steps.docker_meta.outputs.labels }}

      # EC2에 Docker 이미지 배포 
      - name: Deploy to EC2
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.EC2_HOST }} # EC2 인스턴스의 호스트 주소
          username: ${{ secrets.EC2_USERNAME }} # EC2 인스턴스의 사용자 이름
          key: ${{ secrets.EC2_SSH_KEY }} # EC2 인스턴스에 접속하기 위한 SSH 키
          script: |
            # Docker 이미지 가져오기

            sudo docker pull brian990614/localmood-vote:main
            sudo docker stop localmood-vote || true
            sudo docker rm localmood-vote || true
            sudo docker run -d --name localmood-vote -p 3000:3000 brian990614/localmood-vote:main

 

Vite + Yarn berry를 적용한 프로젝트의 yml 파일 코드이다.

마찬가지로 이전 포스팅의 yml 파일과 거의 똑같다. 다만 우리는 Vite를 사용하고 있으므로 Vite에서 사용하는 환경변수명 규칙 관련 부분만 수정해주면 끝이다.

 

 Vite 에서는 환경변수명을 VITE 로 시작해야한다. 그래서 나는 서버의 엔드포인트를 VITE_SERVER_API 변수명으로 설정한 후, 규칙에 따라 파일에서

 

import.meta.env. VITE_SERVER_API 

 

로 접근하였다. 이에 맞게 Github Actions 코드도 

 

echo "VITE_SERVER_API=${{ secrets.VITE_SERVER_API }}" >> ./.env

 

해당 명령어로 수정해주었다.

 

위의 과정을 거치니 Vite 와 Yarn-berry 환경에서도 배포 및 자동화에 성공하였다.

 

 

위에서 볼 수 있듯이 npm 패키지 매니저를 사용했을때와 달리, 배포에 걸리는 시간이 평균 1분 초반대로 확 줄어든 것을 확인할 수 있다!!