github actions & pages로 Vue.js 프로젝트 build 하고 호스팅하기 (CI/CD 맛보기)

CI

Continuous Integration

 

CD

Continuous Deploy

 

github action

컨테이너를 띄워서 일련의 작업들을 할 수 있도록 해줌,

그 외 여러가지도 가능

 

github pages

github에서 제공하는 호스팅

 

TODO : vue.js를 스터디한 내용을 github에 push 하고, github action과 github pages를 사용하여 호스팅을 해보려 한다.

 

1. github push

 

생략 (add-commit-push)

 

2. github action

1) 폴더만들고 그안에 main.yaml 생성

폴더 트리 구조와 파일명을 준수해야한다

.github/workflows/main.yaml

 

2) main.yaml 파일내용

주의점은 [main] -> 배포할 브랜치를 명시, 처음에 master로 했다가 안나와서 당황

name: Deploy

on:
  push:
    branches: [main] 
  pull_request:
    branches: [main]
jobs:
  myProfile:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup nodejs
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Install packages
        run: npm install
      - name: Build Vue application
        run: npm run build
      - name: Deploy Github page
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          PUBLISH_BRANCH: heros
          publish_dir: ./dist

위 코드에서 가장 아래부분이 실제 배포를 원하는 부분에 대한 설정이다

현재는 github pages를 사용하기 때문에 github pages로 배포하는 설정으로 되어있다.

만약 aws나 다른 곳으로 배포를 하고 싶다면, 이 부분을 수정하면 된다.

secret 에 대한 부분은 (github를 믿고) github - settings - secret 에 등록해두면, deploy 시 적절하게 키값을 가져와서 사용할 수 있다.

 

3) 작성한 main.yaml 이 github에 올린다

add-commit-push

 

4) github 레포지터리에서 Actions 탭에서 workflows 확인

실수 없이 잘 했으면 두번째 줄 pages build and deployment 하나만 나와서 주황동그라미가 돌아가면서 deploy를 하고 있을 것이다.

나는 처음에 branch를 잘못 표기해서 다시 올려서 2개가 올라왔고, 뒤에 두개는 이후에 할 작업이다.

일단은 pages build and deployment  잘 나오는지 확인

 

5) deploy 성공 후 Code 탭으로 가서 npm run build 결과물이 모여진 브랜치(heros) 가 생성 되었는지 확인

 

3. github Pages

1) settings - pages - source 브랜치 선택 : 최초 None 으로 되어있는 거를 위에서 만든 heros로 변경한다.

변경하고 Save 하면 다음과 같이 주소가 만들어진다.

이 주소로 들어가보자

 

하지만 404가 나올것! 

 

2) 다시 로컬에서 작업하는 프로젝트 공간으로 와서 추가 작업을 해주어야한다.

github pages에서 만들어준 호스팅 주소에 default 로 github 자체의 레포지토리 이름이 들어가 있기 때문에, 이를 설정해 주어야 한다.

 

2-1) main.js 파일에 history 경로 추가

아래는 main.js 소스 전문

import { createApp } from 'vue'
import { createWebHistory, createRouter } from 'vue-router';
import App from './App.vue'
// router 쓰일 Component
import Home from './views/Home.vue';
import About from './views/About.vue';
import User from './views/User.vue';
import UserDetail from './views/UserDetail.vue';

//routes 정하기
const routes = [    
  { path : '/', component: Home, name:"home"},
  { path : '/about', component: About, name:'about2' },
  { path : '/user', component: User },
  { path : '/user/:id', component: UserDetail, props: true },
]

const router = createRouter({
  history: createWebHistory('/vue-study/'),
  routes
})

const app = createApp(App)
app.use(router)
app.mount('#app')

 

2-2) vite.config.js 파일에도 base 추가

아래는 vite.config.js 소스 전문

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/vue-study/'
})

 

3) 이렇게 바꾼 소스의 내용을 다시 github에 올려준다

add - commit - push

 

 

4) 다시 github로 와서 Actions 탭으로 가면 새로 push 한 내용에 대해서 deploy 를 하고 있는 것을 확인할 수 있다.

 

5) deploy가 다 될때 까지 기다렸다가, 다시 github pages에서 줬던 페이지로 접속해보자.

혹시라도 아무것도 안뜨고, console창에 404에러가 뜬다면, 다른문제가 있을 수도 있지만, 몇번 새로고침이나, 브라우저를 끄고 다시 접속해보자.