-
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)
GitHub: Where the world builds software
GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
github.com
접속 후 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