[Vue] 웹서버 배포하기 2부 (github actions로 자동화 하기)

안녕하세요! 운동하는 개발자 JAY입니다!!  오늘은 1부에 이어서 Vue프로젝트를 자동 배포하는 방식을 알아보려 합니다.

github actions를 이용해서 진행하려고 하는데, github actions를 처음 접하시는 분들은

Test CI를 위한 Github Actions , pytest-django 세팅을 한번 읽어보고 오시면 될 것 같아요.

 

 

1. CD (Continuous Deploy)를 위한 배포 자동화 

---

CI, CD 에 대해서 많이 이야기가 있는데요, CI는 지속적 통합을 이야기하고 코드가 통합될 때 Test Case를 자동으로 실행하는 코드 통합을 위한 절차입니다. CD는 그 다음 지속적 배포를 위한 절차 입니다 (언제든지 배포 가능한 상태를 말합니다.)

(이번 포스팅에서는 CD에 대한 내용만 다룹니다!)

 

배포 과정

1. Master 로 Pull Request를 open
2. merge (PR closed 상태)
3. 2번 조건에서 github actions (배포 workflows) 동작
4. github actions에서 ssh로 deploy server 접속
5. git pull (가장 최근 코드로 업데이트). npm install (의존성 패키지 설치), npm run build (빌드파일 생성)
6. 배포완료

 

저는 위와 같이 배포할 예정입니다. 배포 시 주의사항으로는 5번에서 프로젝트 경로에 git branch가 master로 checkout 해놔야 합니다. actions에서 브랜치 체크해서 그 브랜치 checkout 까지 하려다 일단 이 부분은 나중에 하기로...

 

 

2. workflows 파일 만들기 (github actions) 

---

레포지토리의 Actions 탭

Actions 탭으로 가서 New workflow를 클릭한 후, 본인이 원하는 workflow를 선택하면 됩니다.

 

create basic workflow

저는 기본으로 제공하는 workflow를 사용했습니다.

# This is a basic workflow to help you get started with Actions
 
name: CI
 
# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
 
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
 
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2
 
    # Runs a single command using the runners shell
    - name: Run a one-line script
      run: echo Hello, world!
 
    # Runs a set of commands using the runners shell
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.
 

그럼 이런 workflow 가 생성될 거예요.

자, 이제 위 배포 과정 이미지대로 workflow를 수정해보겠습니다.

# This is a basic workflow to help you get started with Actions
name: WEB
# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  pull_request:
    types: [closed] # when PR closed
    branches: [ master ]
 
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    if: github.event.pull_request.merged
    
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:    
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2
    # Runs ssh deploy for CI, CD
    - name: executing remote ssh commands using password
      if: github.event_name == 'pull_request'
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.OBOON_HOST }}
        username: ${{ secrets.OBOON_USERNAME }}
        password: ${{ secrets.OBOON_PASSWORD }}
        # port: ${{ secrets.PORT }} # default : 22
        script: |
          cd ${{ secrets.OBOON_WEB_PATH }} && git pull
          npm install
          npm run build
 

한번 수정된 곳을 살펴보겠습니다. 

첫 번째로, on 쪽에 보면 pull_request에 type이 추가되었습니다. "PR 이 closed 되었을 event를 실행하겠다."라는 의미입니다.

두 번째로 ,

if: github.event.pull_request.merged

이 부분인데, 오늘 workflow 작성의 핵심입니다.

조건문은 읽히는 그대로 "PR이 merge 되었을 때  아래 steps를 실행하겠다."라는 의미인데,

이 조건문을 처음에 steps 안에서 이리저리 넣다가... 2시간은 삽질했던 것 같아요. 저 위치에 넣어주세요...ㅎㅎ

 

workflow 관련 문서

github context는 깃 헙 트리거?, 이벤트 같은 건데 이 문서에서 상세한 설명 확인할 수 있습니다.

 

ssh-action

세 번째로, 배포를 위해 ssh 접속하는 step (excuting remote ssh commands using paswword)에서 appleboy/ssh-action을 사용했습니다. 

 

github actions는 좋은 게 오픈소스로 workflow 들을 지원합니다. ssh-action도 그중 하나입니다.

ssh로 서버에 접속해서 command 명령어를 쉽게 사용할 수 있는 workflow입니다.

host, username, password를 secret으로 넣어줍니다.

 

그리고 script에는 실행할 command를 적으면 되는데 프로젝트 path에 가서 git pull, npm install, npm run build를 실행합니다.

 

📌 배포전 해야할 것

/var/www/5boon/dist 를 프로젝트 경로에 있는 dist로 심볼릭 링크를 생성해줍니다.

ex) ln -s /home/user/project/dist (원본) /var/www/5boon/dist/ (심볼릭 링크)

배포할때, /var/www 경로는 root 경로라 명령어에 sudo를 붙혀야 하긱도 하고 관리가 어렵기(?) 때문에 이렇게 했습니다.

원본경로도 해도 되는데, static 파일만 접근할거라 /var/www 경로에 있는게 맞는것 같기도? 이건 한번 다른분들에게 여쭤보겠습니다ㅎㅎ 아니면 댓글로 의견을 주셔도 감사하겠습니다!

 

 

3. Vue 웹서버 배포 자동화 실행 

---

Master로 PR을 만듭니다. 이때 actions는 실행되지 않아요! 왜냐하면 우린 PR이 Closed 될 때, 실행하도록 조건을 걸어놨기 때문이죠.

Master로 브랜치를 merge 하게 되면

 

workflow 실행이 정상적으로 완료된 모습

이렇게 workflow가 실행되게 됩니다. (이미지는 정상적으로 완료된 상태)

그럼 실제 배포 과정이 제대로 이루어졌는지 확인해 보겠습니다.

 

ssh 접속후 command 실행하는 화면

안전하게  command 가 완료 되었을때

와우... 정말 배포가 되네요! ㅎㅎㅎ 꿀잼🍯입니다.

output에 err라고 나오는데, err는 아닌데 왜 err로 출력되는지 모르겠지만...

어쨌든 배포는 잘되고, 웹으로 접속해서 배포되었는지 확인을 해보겠습니다.

 

배포 전, 후 (미세하게 달라진 디자인 ㅎㅎ)

두시간동안 삽질...

처음에 workflow에 조건문 넣는 위치를 잘못 잡아서... 조건문을 잘 못썼나..

사실 지금 정확히 위치 문제인지 == True 이런 식으로 조건문을 써서 그런지 명확히 파악은 안 되었지만... 무튼 해결은 했습니다.

(이건 다음에 테스트해보는 걸로..ㅎㅎ)

 

4. 마치며 

---

이번에 Vue 프로젝트를 서버로 배포하면서 github actions에 대해 좀 더 알게 되었고, 정말 편하게 사용 가능하단 걸 느꼈습니다.

workflow 작성하는 syntex 같은 거만 좀 문서 보고 구글링 하면 금방 익숙해질 것 같아요! (회사에서 적용하고 싶...)

 

아직 github actions를 사용 안 해보신 분들은 토이 프로젝트에 한번 적용해 보시는 건 어떨까요?😁

오늘도 즐거운 코딩 하세요!! 👨‍💻