-
vue3 github actions github pages 배포공부하기/vue.js 2021. 4. 18. 20:21
.github/workflows/deploy.yml 생성하기
name: Deploy Project
on:
push:
branches:
- main
jobs:
update:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Set up Node.js
uses: actions/setup-node@master
with:
node-version: 12.x
- name: Cache node_modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{runner.OS}}-build-${{hashFiles('**/yarn.lock')}}
restore-keys: |
${{ runner.OS }}-build-${{ runner.OS }}-
- name: Install dependencies
run: yarn
- name: Build
run: yarn build
env:
NODE_ENV: production
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.GH_PAT }}
deploy_key: ${{ secrets.GH_DEPLOY_KEY }}
publish_dir: ./dist
입력 하기.
deploy.key 생성하기
git actions & git pages를 적용할 레파지토리: settings -> Deploy.key로 이동
add deploy key 버튼 클릭 -> gh-pages.pub 키 등록
Secrets로 이동 후 GH_DEPLOY_KEY 등록(gh-pages 키)
공식문서 이미지 참고
Secerts에 GH_PAT 키 등록하기 (personal_token)
접속 후 Generate new token 클릭 -> 이름은 자유
Generate token 클릭 -> 생성 된 토큰을 Secerts의 GH_PAT키로 등록하기
그 후
해당 레파지토리에 변경 내용 push하기!
push한 레파지토리에 접속해서 위의 Actions 탭 클릭
정상 작동 확인 후
git pages 접속하기
git actions를 통해서 코드를 push만 하여도 자동 배포를 할 수 있게 되었다!!
'공부하기 > vue.js' 카테고리의 다른 글
vue3, three.js example (0) 2021.04.25 vue3, git actions, cypress 배포 테스트 (0) 2021.04.22 vue 3 & github pages 배포 (0) 2021.04.17