Github Actions 를 이용한 배포 자동화

김윤빈·2021년 6월 29일

Github Actions 를 이용한 배포 자동화

Vue 프로젝트 생성 및 로컬 실행 확인

사전환경구성

vue 프로젝트를 생성하기 위한 Node.js 와 git은 설치되어 있다고 가정합니다.

추가로 vue cli 설치를 위한 os에 맞는 yarn 최신 버전을 설치합니다.

https://classic.yarnpkg.com/en/docs/install#mac-stable

$ npm install --global yarn
$ yarn --version

프로젝트 생성

$ vue create vue-devops

프로젝트 생성 과정에서 아래와 같은 순서로 선택합니다. (필수: unit Testing, Jest)

Manually select features
choose vue version / Babel / Linter / Unit Testing
3.x
Eslint + prettier
Lint on save
Jest
In dedicated config files
N

생성된 프로젝트로 이동해서 프로젝트를 로컬에서 실행해봅니다.

$ cd vue-devops
$ npm run serve

깃허브에 코드 push 및 pages에 수동 배포

github에 vue-devops 프로젝트 생성하기

원격 저장소 설정 및 코드 푸쉬

$ git add .
$ git commit -m "init"
$ git remote add origin <github주소>
$ git git push origin master

github Pages 로 배포하기 위한 라이브러리 추가
```
$ yarn add gh-pages -D
```

package.json에서 필요한 내용 추가

homepage, script > predeploy, deploy, clean 부분 추가

{
  "name": "vue-devops",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://kimyunbin.github.io/vue-devops",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "predeploy": "vue-cli-service build",
    "deploy": "gh-pages -d dist",
    "clean": "gh-pages-clean",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-ser
     
	 }
   ... 생략

배포용 publicPath 설정
프로젝트 최상단에 vue.config.js 파일 생성 후 작성
```
module.exports = {
  publicPath: "/vue-devops/",
  outputDir: "dist"
}
```
- 이 설정이 있어야 https://<github_id>.github.io/vue-devops 에서 확인 가능
- 대표 페이지(github_id.github.io)는 보통 사용하고 있기 때문에 별도 하위 PublicPath를 사용하는 방식으로 진행
yarn deploy 명령을 실행하면 원격 저장소의 gh-pages 브랜치를 생성해서 푸시
```
$ yarn deploy
```
만약 로그인 실패 시 yarn clean 후 재시도

설정 > pages 배포된 주소를 확인한 후 접속

깃허브 Actions workflow로 배포 자동화

github > actions 탭의 Set up this workflow 클릭
배포 스크립트인 workflow 파일 (deploy.yml) 내용을 다음과 같이 수정합니다.

name: Deployment

on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-18.04

    steps:
    - name: Checkout source code
      uses: actions/checkout@master

    - name: Set up Node.js
      uses: actions/setup-node@master
      with:
        node-version: 14.x

    - name: Install dependencies
      run: yarn install

    - name: Test unit
      run: yarn test:unit

    - name: Build page
      run: yarn build
      env:
        NODE_ENV: production

    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist