GitLab CI/CD 환경 구성 2 : .gitlab-ci.yml 작성하기(feat. npm)

앞서 CI/CD환경을 구성하기 위해 서버에 Gitlab runner 설치와 설정을 마쳤습니다.

https://playit.tistory.com/3

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

이번에 해볼 것은 Gitlab CI/CD의 파이프라인을 설정하는 파일 .gitlab-ci.yml 파일 작성을 하는데 여기서 

1. NPM build 및 배포 환경 

2. Gradle build 및 배포 환경 

NPM build 및 배포 환경 설정 작업을 진행해보도록 하겠습니다.

 

사용되는 용어 정리 싸이트

진행에 앞서 아래 gitlab 공식 문서에서 사용되는 항목들을 확인할 수 있습니다.

https://docs.gitlab.com/ee/ci/yaml/index.html#configuration-parameters

`.gitlab-ci.yml` keyword reference | GitLab

https://workshop.infograb.io/gitlab-ci/11_introduction-to-gitlab-cicd/3_gitlab_ci_cd_terms_concepts/

GitLab CI/CD 용어 및 개념 - GitLab CI Workshop

Gitlab CI/CD Concept Image

 

NPM Build 환경 CI/CD 테스트

npm cicd gitlab-ci.yml

• stages를 등록하면 여러 개의 job을 순차적으로 실행할 수 있다. 등록한 순서대로 실행된다.
• cache를 설정하면 과거에 수행한 job에서 만든 캐시를 사용할 수 있다. 따라서 npm install처럼 인터넷에서 라이브러리 등을 매번 다운받아야 하는 지점에 사용하면 배포 시간을 단축할 수 있다. 자세한 내용은 공식 문서 참조.

※ Gitlab-ci 캐시 참고 블로그

https://lovemewithoutall.github.io/it/deploy-example-by-gitlab-ci/

 

[작업 과정]

1. gitlab-ci.yml 파일 작성 및 파이프라인 생성 하여 테스트를 진행

2. 개발서버(리눅스 환경) npm 작동을 위한 node.js 설치(nvm 사용, node version manager)

3. 빌드 및 배포(폴더 내용 변경 작업) 정상 작동 확인

※ 작업 중 시행착오

• npm install 명령어 찾을 수 없음 오류 >> npm 설치 안되어 있는 상태
• npm install 중 npm i canvas (canvas 라이브러리 설치 오류 발견) 오류로 해당 기능 현재 사용하는 곳 없는것으로 파악하고 pakage.json에서 제외 처리 후 진행하니 문제 해결됨. canvas 오류 글들이 많긴한데 뚜렷해보이는 해결방법을 찾지 못함.
• 빌드 단계에서 

Error: error:0308010C:digital envelope routines::unsupported

    1) 해당오류 발견, 최신버전에 대한 문제가 있음을 확인 

    2) 처리 방법으로 다운그레이드 글들 확인

        (https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported)

    3) nvm install --lts, nvm use --lts : lts 버전으로 설치 및 사용 설정, long term service

    4) 깃랩러너 작동시 기존 설치했던 최신버전(v18)으로 사용되어 오류 동일하게 발생

    5) 기존 최신버전( nvm uninstall 18, Uninstalled node v18.6.0) 삭제처리

    6) 빌드 정상 작동

 

- .gitlab-ci.yml 간단 설명

#작성한 순으로 작업실행
stages:
  - libs
  - build
  - deploy
  
npm:
  stage: libs
  #dev 브랜치에서만 작업수행
  only:
    - dev
  #캐시에 필요한 정보 작업  
  cache:
    paths:
      - node_modules
  script:
    - npm install

build:
  stage: build
  only:
    - dev
  #캐시에 빌드한 내용 저장  
  cache:
    paths:
      - dist
  script:
    - npm run build
  #해당 러너 태그에서 작동(없을시 러너 설정에 태크없이 실행에 체크 필요)
  tags:
    - runner-dev

deploy:
  stage: deploy
  only:
    - dev
  cache:
    paths:
      - dist
  #기존 소스 내용 삭제 후 빌드된 내용 붙여 넣고 재기동    
  script:
    - sudo rm -rf /data/nginx/html
    - sudo cp -r dist /data/nginx/html
    - sudo nginx -s reload
  tags:
    - runner-dev

 

위 설정으로 생성한 파이프라인이 아래 처럼 성공적으로 마무리 되었습니다.

 

.gitlab-ci.yml 파일 설정하는 방법과 기능은 다양하지만 여기선 기본적인 빌드와 배포 작업까지 진행해봤습니다.