[React]Nginx + GitLab CI/CD 셋팅 - (2)

개발 환경에서 npm/yarn은 설치되어 있다는 가정하에 진행됩니다.

배포 환경은 shell을 이용한 방법입니다. 원격 서버에 gitlab-runner 설치 후 리액트 프로젝트를 빌드&배포 -> 웹 서버(Nginx) 실행시 빌드된 리액트 프로젝트의 index.html을 실행하는 구조입니다.

 

Nginx 설치는 이전 글을 참고해주세요.

※ 테스트 환경

• AWS EC2 - Amazon Linux 2
• React
• GitLab
• Node 17

---

1. gitlab-runner 설치

GitLab의 CI/CD 파이프라인에 작업을 실행하기 위해 gitlab-runner를 설치합니다. 

원격 서버에 접속해 공식 gitlab 레포지토리를 추가합니다.

curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | sudo bash

 

아래 명령어를 통해 gitlab-runner 설치합니다.

yum install gitlab-runner

 

Settings - CI/CD - Runners 에서 Expand -> New project runner를 클릭합니다.

 

 

gitlab-runner는 Windows, Linux, macOS OS에 설치가 가능합니다. 

여기서는 Linux 환경에서 설치하게 됩니다.

Tags에 입력된 값을 통해 파이프라인에 정의된 Tag와 매핑되어 실행되어집니다. test-react라고 입력합니다.

 

이제 runner를 등록합니다.

Step1 명령어를 복사해 실행합니다.

 

대화형을 통해 실행되고 아래와 같은 질문이 나오는데 Enter an executor 까지 엔터 입력 후 넘어갑니다. 여기서는 shell 명령어를 통해 배포가 이루어질 것입니다.

Enter the GitLab instance URL

Enter a name for the runner.

Enter an executor: shell

 

등록이 완료됐습니다.

 

배포시 발생할 수 있는 에러를 방지하기 위해 아래 명령어를 입력해 gitlab-runner의 권한을 추가합니다. 명령어 입력 후 readonly 파일로 되어있기 때문에 :w! 를 입력해 강제 저장합니다.

vim /etc/sudoers

gitlab-runner ALL=(ALL) NOPASSWD: ALL

 

권한 에러 참고

sudo 명령어를 통해 배포가 이루어지는데 이 때 아래와 같은 권한 문제가 발생합니다.

We trust you have received the usual lecture from the local System
Administrator. It usually boils down to these three things:
    #1) Respect the privacy of others.
    #2) Think before you type.
    #3) With great power comes great responsibility.
sudo: no tty present and no askpass program specified

 

이제 설치된 러너를 실행해봅니다.

gitlab-runner run

 

러너가 정상적으로 실행되면 아래와 같이 GitLab 웹에서 아래와 같이 초록불이 들어온 것을 확인할 수 있습니다.

 

*미사용 러너를 제거할 때

sudo gitlab-runner verify --delete

 

2. Node 설치

리액트를 실행하기 위해 Node를 설치합니다. 공식 문서에서 추천하는 nvm(Node version manager)을 사용했습니다.

# nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

# nvm  활성화
. ~/.nvm/nvm.sh

# nvm 설치 확인하기
nvm --version

 

설치가 잘됐다면 아래와 같이 버전이 출력됩니다.

 

Node를 설치하는 명령어는 아래와 같습니다. 최신 버전 설치시 v20 버전이 설치되는 것을 확인했는데 현재 사용중인 원격 서버(Amazon Linux 2)에서는 지원되지 않는 것을 확인했습니다.

nvm install <version> 

# node 최신 버전 설치(2023.11.23 기준 v20.10.0)
nvm install node

 

여기서는 17버전을 설치했습니다.

nvm install 17

버전 오류

nvm use --delete-prefix v20.10.0

 

 

AWS EC2 Amazon Linux 2023 에서는 Node.js 18 버전을 지원하지만 현재 사용중인 서버는 그 이하이기 때문에 발생한 에러로 확인했습니다.

 

아래 명령어를 통해 설치가 잘됐는지 확인합니다. -> 화살표 표시와 함께 버전이 보인다면 정상적으로 설치가 된 것입니다.

nvm ls

 

Node 버전을 확인합니다.

node -v

 

3. CI/CD 테스트

테스트 레포지토리를 생성합니다.

yarn create react-app test-react

 

루트 경로에 .gitlab-ci.yml 파일을 생성하고 아래 내용을 작성합니다.

stages:
  - build
  - deploy

build:
  stage: build
  only:
    - main  
  cache:
    paths:
      - dist
      - node_modules
  artifacts:
    expire_in: 1 hour
    paths:
      - build/   
  before_script:
    - npm install   
  script:
    - npm run build    
  tags:
    - test-react

deploy:
  stage: deploy
  only:
    - main
  cache:
    paths:
      - dist 
  script:
    - sudo rm -rf /home/test/test-react/build
    - sudo cp -r build /home/test/test-react/build
    - sudo nginx -s reload
  tags:
    - test-react

 

push를 하게 되면 파이프라인이 실행됩니다.

 

빌드 단계에서 아래와 같은 에러가 발생한다면 원격 서버에 접속해 /usr/local 디렉토리로 Node.js를 복사해 npm 명령어를 실행할 수 있게 합니다.

n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; sudo cp -r $n/{bin,lib,share} /usr/local

 

4. 프로젝트 테스트

이제 웹 서버(Nginx)가 새로 추가한 리액트 프로젝트 경로를 바라볼 수 있게 수정합니다.

vim /etc/nginx/conf.d

 

server 태그 안에 location을 아래와 같이 수정합니다.

 

서버를 재실행합니다.

systemctl restart nginx

 

아래와 같이 리액트 프로젝트가 조회된다면 성공입니다.

 

참고문서

Gitlab CI Failed: NPM command not found

GitLab CI/CD 환경 구성 1 : Gitlab Runner 설치하기

GitLab CI/CD 시작하기 | InfoGrab, DevOps 전문 기술 기업 | 인포그랩 | GitLab기반 DevSecOps 구축,컨설팅,교