github action / github page 기능을 이용한 static deploy
들어가며
github page 기능을 이용해서 수많은 사람들이 블로그로 애용 했습니다. 그렇지만 나는 이미지 파일 하나 올릴껀데? jekyll 블로그를 써야해? 라는 사람이 있겠죠? 그런 사람을 위해서 준비했습니다!
summary
webpack 을 이용해서 번들링할 예정이고, github action 을 통한 빌드와 배포 자동화를 진행할 예정입니다.
최근에 githuab pages 가 업데이트되어 별도의 설정 메뉴로 빠졌습니다!
이번 업데이트로 특정 branch 를 github page 로 지정 가능합니다. 아래와 같이 운영할 예정입니다.
- gh-pages branch 를 github page 용도로 사용할 예정입니다.
- main branch 는 소스코드를 저장할 용도입니다.
빌드를 설정하자
webpack 빌드 설정에 대해서는 이미 많이 다루고 있으니, 여기에서는 적지 않겠습니다. github action 을 통해서 빌드를 먼저 하도록 하겠습니다.
먼저 yml 파일을 생성합니다.
.github/workflows/deploy.yml다음과 같이 작성할 예정입니다!
name: Build and deploy
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@main
- name: set up node.js
uses: actions/setup-node@main
with:
node-version: 16.x
- name: cache node_modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{runner.OS}}-build-$${hashFiles('**/package-lock.json')}
restore-keys: |
${{runner.OS}}-build-${{runner.OS}}-build
- name: install devDependencies
run: npm install
- name: build
run: npm run prod
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{secrets.GITHUB_TOKEN}}
publish_branch: gh-pages
publish_dir: ./dist천천히 항목별로 설명 드리겠습니다.
name: Build and deploy
on:
push:
branches: [ main ]main branch 를 통해서 pipeline 이 유발되도록 세팅했습니다.
jobs:
build:
runs-on: ubuntu-latestubuntu 20.04 버젼 기반으로 pipeline 이 작동하기 위해서 명시합니다. 참고
- uses: actions/checkout@main
- name: set up node.js
uses: actions/setup-node@main
with:
node-version: 16.x빌드를 위해서 소스코드 받아야 겠죠? checkout 구현을 위해서 steps 에 추가합니다. (actions/checkout@main) 또한 webpack 빌드를 위해서 node 를 설치합니다. (actions/setup-node@main) node-version 변수를 통해서 node 버젼 설정이 가능합니다. 지원하는 메이저 버젼은 여기에서 참고 하세요.
- name: cache node_modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{runner.OS}}-build-$${hashFiles('**/package-lock.json')}
restore-keys: |
${{runner.OS}}-build-${{runner.OS}}-build이 부분은 npm dependency module 설치를 캐쉬하여, gitlab action 에 실행시간을 줄여주는데 목적이 있습니다. 참고
- name: install devDependencies
run: npm install
- name: build
run: npm run prod이 부분은 실제 빌드를 위한 dependency 와 빌드 명령어를 쓰는데 목적이 있습니다. (중요하지 않아 빠르게 넘어가겠습니다!)
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{secrets.GITHUB_TOKEN}}
publish_branch: gh-pages
publish_dir: ./dist이 부분이 중요 키포인트 인데요. 실제 빌드가 완료된 결과물들을 github page로 배포하기 위한 스텝입니다.
먼저 저 github_token 항목은 별도로 설정이 필요한 항목이 아닙니다!
A GitHub Actions runner automatically creates a GITHUB_TOKEN secret to authenticate in your workflow. So, you can start to deploy immediately without any configuration.
github action 이 자동적으로 생성한다고 합니다
나머지 설정은 다음과 같습니다. (추가 옵션은 여기를 참고 하세요)
- publish_branch - 빌드할 결과물들을 올릴 branch 입니다. 여기에선 gh-pages 로
- publish_dir - 빌드할 결과물들이 저장될 디렉토리입니다. 각자 webpack 설정에 따라서 변경하세요. 저는 dist 로 설정했습니다.
github pages 설정하기
아까 공유 드렸던 내용대로 githuab pages 가 업데이트되어 별도의 설정 메뉴로 빠졌습니다!
해당 설정 페이지에서 branch 를 gh-pages 로 설정하고, 경로는 / 로 설정해주세요 (gh-branch 에서 / 디렉토리로 서비스될 예정입니다!)
Ref.