이번글에서는 지금까지 개발한 소스를 github를 이용해서 배포하는 방법을 공유하고자 합니다.
github는 개발자들의 놀이터 같은 느낌을 주는 사이트입니다. 저는 그저 소스 저장소 용도로만 사용했었는데 사실은 더 많은 기능을 제공하고 있습니다. 그중에서 프런트엔드 호스팅 서버로서의 기능과 git action을 통한 ci/cd 방법을 간략하게 다루고자 합니다.
1. git action
위처럼 .github/workflows 폴더 아래에 main.yml파일을 만든다
main.yml
name: rock paper scissors game
on:
push:
branches: [main]
jobs:
run:
runs-on: windows-latest
steps:
- uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
위 코드를 보면 운영체제는 windows => git checkout => node 18 => npm install => npm run build => ./dist gh-pages에 배포되는 것을 알 수 있다.
여기까지 적용을 하면 Deploy to gh-pages 단계에서 실패를 하는 것을 알 수 있다. 왜냐하면 깃 action에서 리드 권한이 디폴트라서 쓰기 권한이 없기 때문이다.
settings > Actions > General에서 Workflow permissions 항목의 Read and write permissions를 선택하고 저장한다.
이제 다시 리런을 하면 오류가 해결되고 gh-pages 브랜치에 dist폴더에 빌드된 소스들이 배포된 것을 알 수 있다.
pages
이제 gh-pages에 배포된 소스를 호스팅만 하면 된다.
settings > Pages에서 Branch에서 gh-pages를 선택하고 /root를 선택한 다음 저장을 하면 몇 분 뒤에 위처럼 Visit site가 활성화가 되는 것을 알 수 있다. gh-pages에 소스가 푸시가 되면 재배포가 이루어지는데 git action의 Deploy to gh-pages단계에서 푸시가 이루어지고 Pages에서 재배포가 되는 것을 확인할 수 있다.
결과
다음에는 이 소스를 기반으로 Electron으로 데스크톱 앱을 만드는 것을 다루려고 한다.
호스팅 사이트
https://junseongday.github.io/vue3-rock-paper-scissors/#/main
소스