Github Actions로 자동배포하기
Githup pages로 홈페이지를 자동 배포해보자
Github Actions가 뭐지?
배포란 말 그대로 인터넷상에 이 파일들을 업로드하는 작업이다. 간단한 흐름을 보면 아래와 같다.
코딩 → 빌드 → 배포(업로드) → 웹페이지로 뜸!
근데 작업을 하다보면, 저 위의 흐름을 반복하는 것조차 귀찮아진다. 코딩할때마다 빌드해서 그 파일들을 업로드하고... 그걸 또 반복하고... 한 두번은 할만하지만 매일 한다면? 하루에 2번씩 매일 한다면? 이런 반복을 싫어하는 인간의 습성이 기술의 발전을 가져온다 ㅋ
반복된 업무를 버튼 하나로 짠! 하고 가능하게 해주는 것이 바로 Github Actions 라고 볼 수 있다.
"GitHub Actions는 GitHub에서 제공하는 지속적인 통합 및 배포(CI/CD) 서비스입니다. 이 서비스는 GitHub repository 내에서 워크플로우를 정의하고 자동화할 수 있습니다.
GitHub Actions를 사용하면 특정 이벤트(예: pull request 생성, push 등)가 트리거로 작동하는 작업 흐름을 작성할 수 있습니다. 작업 흐름은 원하는 언어나 도구를 사용하여 작성할 수 있습니다. 예를 들어, 단위 테스트, 빌드, 테스트 배포 및 웹 사이트 배포 등을 자동화할 수 있습니다."
- chatGPT 曰
이게 무슨 말이냐 하믄, 간단히 말하면 Github에 push 하는 것만으로 웹페이지가 변경되도록 할 수 있다는 말이다. 빌드를 해서 파일을 일일이 서버에 업로드하지 않아도 말이다. 명령어 한줄로 다른 번거로운 작업 없이 바로 홈페이지를 변경해주는 것이 Github Actions라고 볼 수 있다.
github pages에서 Github Actions 적용해보기
그럼 이전에 만든 React 프로젝트를 github pages에 자동 배포해보도록 하자. (아래 워크플로우는 github pages 에서만 적용 가능한 플로우이다. )
1. 폴더 만들기
프로젝트 root 폴더에서 .github 폴더를 만들고, 그 밑에 workflows 폴더를 만든다.
2. 워크플로우 파일 생성
1에서 만든 폴더 안에 deploy.yml 파일을 만들고, 아래 내용을 넣는다.
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3
with:
node-version: 16
cache: npm
- run: yarn install
- name: Build
run: yarn build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.TOKEN }}
publish_dir: dist
[1] on: push: branches: 이건 딱 봐도 알겠지만, 어느 브랜치에 push되었을 때 실행하겠다라는 것을 명시한 것이다. 나는 main으로 해놓았다. 자기가 원하는 다른 브랜치로 변경할 수 있다.
[2] steps 에는 어떤 actions들을 수행할건지 적는다.
[3] github_token: 아래에서 자세히 설명하겠다
[4] publish_dir: 프로젝트에서 build를 했을 때 생성되는 폴더를 명시해주면 된다. 나같은 경우는 dist라서 dist 를 적었다. 빌드된 파일 위치를 알려주는 거라고 보면 된다.
3. Actions에서 쓸 token 설정하기
[1] 일단 먼저 token을 만들어야 하는데, 이미 있는 사람은 이 단계는 건너뛰어도 된다.
https://github.com/settings/profile 에 들어가면 제일 하단에 Developer settings 이라는 메뉴에 들어간다. 거기서 Personal Access tokens 에 들어가서 새로 토큰을 생성한다. (나는 모든 박스를 다 체크해서 만들었다. 필요한 기능한 체크해서 만들면 된다) 그리고 생성하고 나면 딱 한 번 복사할 수 있는 기회가 생기는데, 반드시 복사해서 어딘가에 잘 저장해두자.
[2] token 사용을 원하는 레포지토리에 가서 secret 설정하기
여기 secret 에 아까 복사해둔 값을 적는다.
3. git 설정
이제 프로젝트 폴더로 돌아가서, 아래 명령어로 git을 초기화한다.
git init
그리고 기존 원격 git remote와 연결하기 위해 아래 명령어를 입력한다.
git remote add origin {{깃헙주소}}
기본 브랜치를 master에서 main으로 바꾸기
git branch -M main
branch를 main으로 push 하기
git push -u origin main
(하지만 나는 기존 것을 무시하고, 덮어씌우기 위해서 git push -f origin main를 해줬다)
이제 Push를 하면 자동으로 배포되는 걸 확인할 수 있다! ;-)
