Github Action으로 자동배포하기

CI/CD란?

애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다.

CI는 개발자를 위한 자동화 프로세스인 지속적인 통합

CD는 지속적인 서비스 제공 및 지속적인 배포를 의미

→ 두개다 두 파이프라인의 추가 단계에 대한 자동화를 뜻한다.

github Action이란?

• Github에서 제공하는 workflow를 자동화 하도록 도와주는 도구이다.
• 테스트, 빌드, 배포 등의 작업 자동화

사용 방법

• 이번 프로젝트에서 api서버랑 프로그램 서버 포트번호를 다르게 해서 생성한 ncloud 서버 ACG에 port 번호 새로 추가해줬다. (서버하나에 포트번호 여러개 쓸 수 있다. 참고해두자)

사용할 레포에서 새 workflow 생성

⇒ 본인 상황에 맞춰서 선택하면 되는거 같다.

publish로 할까 했는데 아직 진짜 배포할것도 아니고 해서 그냥 node.js로 선택해줌

이렇게 만들어주면 .github이라는 폴더 내에 workflows안에 node.js.yml이 생성된다. (이름은 바꿔도 상관 없다.)

yml 파일 작성

name: NodeJS

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - name: Checkout source code. # 레포지토리 체크아웃
        uses: actions/checkout@v2
      - name: executing remote ssh commands using password # 수행 단계 식별이름
        uses: appleboy/ssh-action@master # ssh 접속을 사용
	        with: # 함께 사용할 것
	          host: ${{ secrets.HOST }} # GitHub secret에 저장된 HOST
	          username: ${{ secrets.USERNAME }} # GitHub secret에 저장된 USERNAME
	          password: ${{ secrets.PASSWORD }} # GitHub secret에 저장된 PASSWORD
	          port: ${{ secrets.PORT }} # GitHub secret에 저장된 PORT
	          script: | # 서버에 접속 후 사용 할 스크립트
	            echo "> node exit"  
	            cd project_folder
	            git pull <https://leesunmin1231>:${{ secrets.TOKEN }}@github.com/leesunmin1231/repositoryName
	            echo "> git cloen update"  
	            cd frontend && npm install
	            pm2 restart npm -- start
	            cd ../backend && npm install
	            npm install -D pm2
	            npx pm2 install typescript
	            npx pm2 restart app.ts
	            exit

간단히 해석해 보자면

• on: git 레포에 특정 이벤트 일어났을 때, job가 실행됨
  • 나는 main 브랜치에서 push랑 pull request 일어났을 때 아래 jobs내용들이 동작하도록 했다.
• runs-on은 빌드 환경 적어주면 된다. 우분투로 구성한 ncloud 서버에서 돌리는 거라 저렇게 설정해둠
• 이제 push가 일어났을 때, step의 내용들이 차례대로 일어남.
  
  • name은 그냥 본인 보기 편하게 써도 된다. 나중에 기록 남는 용
  • uses는 어떤 action 쓸지 정하는 것: api의 일종으로 생각하면 된다. 각각의 action마다 사용하는 방법이 다르니 본인이 필요한 action을 찾아서 적절히 잘 사용해야한다
  • ncloud 서버로 원격접속해서 해야하므로 ssh키 접속하는 action을 사용했다.
  • ssh키 접속이 완료되면 script에 있는 내용이 실행된다.
    • 저 git pull 방법때문에 아주 엄청나게 해맸다. private repository는 매번 username이랑 깃허브 토큰을 입력해줘야하는데 어케 해야하나 고심하다 방법을 찾았다.

github 레포지토리에서 Action 부분에 들어가면 build 과정을 볼 수 있다.

git pull <https://username:password@mygithost.com/my/repository>

// 예시
git pull :${{ secrets.AUTO_MERGE_TOKEN }}@github.com/leesunmin1231/레포지토리 이름

출처:

https://stackoverflow.com/questions/11506124/how-to-enter-command-with-password-for-git-pull/31835965#31835965

https://github.com/appleboy/ssh-action/issues/90

 

 

 

이거 찾느라고 겁나 해맸다. 이렇게 쓰면 바로 pull이 된다.

 

💡 주의! server 내의 코드를 직접 바꾸면 conflict 발생으로 pull이 안될 수 있으니 어지간하면 로컬에서 수정해서 push 하자.

 

 

그리고

npx pm2 install typescript
npx pm2 restart app.ts

이부분도 엄청 해맸는데 아래 pm2랑 typescript 같이 사용하는 방법 첨부해 두겠다.

 

 

Action secrets

저 secret.HOST들은 레포지토리 setting에서 설정할 수 있다.

이외에 배포시 오류날 때 다음 사항을 꼭 체크해보자

• 데이터베이스 실행중인가?
• ncloud 서버 (배포용 서버) 데이터베이스에 스키마랑 테이블 다 만들어 뒀나?
• 혹시 api 서버 주소등등 url이 localhost로 되어있지는 않은가?
• 포트 번호 확인하자
• .env파일 배포용 서버에 만들어서 저장해뒀나?

 

 

 

 

참고 문서:

https://velog.io/@dunde/GitHub-Actions을-이용한-server-관리

 

 

pm2 사용하기

pm2로 npm start 실행

pm2 start npm -- start

https://jmholly.tistory.com/entry/React-pm2-로-react-서버-중단하지-않고-실행하기-port-번호-바꿔서-실행

pm2 typescript랑 같이 사용하기

global 이 아닌 현재 프로젝트 node_modules에 pm2 와 typescript 를 설치해야한다.

# 2 step 으로 pm2와 typescript 모듈 설치하기
$ npm install -D pm2
$ npx pm2 install typescript

 

 

폴더 캐싱하기

(npm install 시간을 줄여줄 수 있다.)

https://velog.io/@loakick/Github-Action-React-빌드하기

https://blog.banksalad.com/tech/github-action-npm-cache/

 

Nginx 써보기

⇒ 쓰는게 좋다고 함

https://codechacha.com/ko/deploy-react-with-nginx/

https://velog.io/@new_wisdom/AWS-EC2에-Node.jsExpress-pm2-nginx-배포하기