GitLab-CI를 이용한 React 앱 배포 최적 방법
GitLab CI/CD를 시작하고 있는데 React 앱을 배포하는 최적의 방법을 찾고 있습니다. GitLab 인스턴스와 공유 러너와 프로젝트별 러너, 두 개의 Docker Engine을 사용하는 서버를 가지고 있습니다. 현재 스테이징 서버는 Docker Compose로 호스팅하는 VM입니다. 일반적으로 Git 저장소에 빌드 파일을 유지하고 이 서버에 베어 Git 저장소로 배포합니다. 그러나 GitLab CI를 사용하는 CI/CD 모델로 전환하고 싶습니다.
.gitlab-ci.yml 파일에서 이미 프론트 엔드 코드를 빌드하는 빌드 단계를 정의했습니다:
build_frontend:
stage: build
script:
- cd ./src/frontend
- npm install && npm audit fix
- CI=false npm run build
artifacts:
paths:
- ./src/frontend/build
tags:
- projectname
그러나 스테이징 서버인 VM에 빌드 파일을 배포하는 최적의 방법을 모르고 있습니다. GitLab 외부에 공개된 Vue.js 프로젝트를 위해 GitLab 자체가 어떻게 자체 CI를 사용하는지 알아보겠습니다.
Vue.js를 위한 GitLab CI 사용
Vue.js 프로젝트에 대한 GitLab CI 설정에 따르면:
deploy:
image: alpine
stage: deploy
script:
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete dist/ user@server.com:/your/project/path/
이 예제에서 배포 단계는 Alpine Linux 이미지를 사용하여 정의됩니다. 스크립트는 rsync 및 openssh를 설치하고 SSH 키를 설정하며 rsync를 사용하여 빌드 파일을 배포하는 방식입니다.
React 앱에 배포 방법 적용
Vue.js 예제를 기반으로 React 앱에 대한 배포 단계를 다음과 같이 변경할 수 있습니다:
deploy:
image: alpine
stage: deploy
script:
- apk add --no-cache rsync openssh
- mkdir -p ~/.ssh
- echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
- chmod 600 ~/.ssh/id_dsa
- echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
- rsync -rav --delete ./src/frontend/build/ user@server.com:/your/project/path/
이 적응 버전에서는 ./src/frontend/build/ 디렉토리의 내용을 스테이징 서버에 배포합니다. SSH 세부 정보 및 스테이징 서버의 프로젝트 경로에 해당하는 user@server.com:/your/project/path/를 조정하세요.
결론
Vue.js 프로젝트의 GitLab CI 예제를 따르면 GitLab CI/CD를 사용하여 React 앱을 효과적으로 배포할 수 있습니다. .gitlab-ci.yml 파일의 배포 단계를 rsync와 적합한 SSH 설정을 사용하여 구성하면 빌드 파일을 스테이징 서버로 쉽게 전송할 수 있습니다.
배포 스크립트에서 SSH 세부 정보와 프로젝트 경로를 자신의 설정과 일치하도록 사용자 정의하세요. 이 접근 방식을 통해 GitLab CI/CD의 강력한 기능을 활용하여 React 앱 배포 프로세스를 자동화할 수 있습니다.
