현재 작업중에 있는 gitpages 를 react 로 구성한 뒤, 일일이 build 하는 것이 귀찮아졌다.
로컬에서 작업하고 빌드 한번만 하면 되긴 하지만 그게 귀찮았다. npm run deploy 라는 텍스트가 익숙하지 않기도 하고 해서 main branch 에 push 했을 때 자동으로 build 해주는 action 을 이용해보기로 했다.
블로그에서는 자세히 설명이 되어 있었으나, 블로그 하나만으로는 다 되지가 않아서 여러번하느라 불필요한 커밋이 너무 많이 생겨버렸다.(reset 해도 log 는 지워지는데 잔디는 너무 진해졌다)
아마 gitpage 로 구성하는 repo 가 이것 뿐만이 아니기에 까먹지 않도록 작성해보려고 한다.
작업하려는 repo 가 public 인지 private 인지에 따라 작업이 추가될 수 있다.
내 repo 는 private 라서 추가로 ssh 키가 필요했다. (public 도 필요할 수 있지만 안해봤다.)
ssh 키는 하나의 컴퓨터에서 git 회사계정, 내 계정을 따로 사용할 때 한번 해봤었는데 까먹어서 다시 찾아서 진행했다.
-
ssh key 생성
$ ssh-keygen -t rsa -C 'me@example.com' // 여기 이메일은 github 등록 시 email명령어를 통해 다음과 같은 메시지가 나온다.
Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): id_firstid_rsa 는 default 로 생성되는 이름이라 생각하면 된다. 기존에 키가 있다면 덮어씌워진다. 텍스트 입력으로 새로운 이름을 만들어 준다.
위의 경로대로 가면 id_first, id_first.pub 가 만들어진다. (.ssh 상위폴더에 생성될 수도 있다. 그럼 그 파일들을 저 폴더로 옮겨준다. )
생성된 ssh key 를 추가하고 저장해준다.
$ ssh-add ~/.ssh/id_first // 추가 $ ssh-add -l // 저장 -
ssh config 설정
이제 github 에서 ssh key 로 접근할 수 있도록 해줘야한다.
config 파일을 만들어줘야 하는데, vscode 안에서 만들어도 되고 text 파일을 만들어서 확장자를 지워도 되지만 명령어로 빠르게 한다.
$ touch ~/.ssh/config만들어진 config 파일을 작성한다.
Host github.com-first // <<- first 는 다른걸로 해도 됨 HostName github.com // 그대로 User git // 그대로 IdentityFile ~/.ssh/id_first // 생성한 ssh key -
git config 설정
설정할 repo 안의 .git 경로로 간다.
그안에 config 파일이 존재하는데 파일을 수정해준다.
[remote "orgin"] url = git@github.com-first:{githubID}/{RepositoryName}.git -
설정확인
명령어를 통해 확인한다.
$ ssh -T git@github.com-first Hi {githubID}! You've successfully authenticated, but GitHub does not provide shell access.
ssh key 생성을 했으면, 해당 repo 의 setting 에서 Deploy key 로 들어간다.
Add deploy key 를 선택해서 키를 등록한다.
이때 키는 id_first.pub 를 열어 파일의 내용을 붙여넣으면 된다.
키 이름은 이후 .yml 파일에 넣을 이름과 동일하게 하도록 하자.
Allow write access 항목도 체크한다.
이제 gitpage 가 구동되고 있는 repo 에서 action 탭으로 들어간다. (vscode 에서 직접 만들어 줘도 된다. )
action 이 없다면
이러한 화면이 뜬다.
set up a workflow yourself를 누르면 파일 생성화면으로 넘어간다.
파일이름은 마음대로 하고, 내용은 아래의 코드를 넣어준다.
name: Deployment
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Packages
run: npm install
- name: Build page
run: npm run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GH_TOKEN }}
publish_dir: ./build자세한 설명은 action 용어 설명을 찾으면 쉽게 알 수 있다.
아래의 github_token 부분에서 GH_TOKEN이 내가 설정한 deploy key 의 이름이다.
모두 저장하고 push 를 하면 action 이 작동하는 것을 알 수 있다.
혹여나 에러가 발생한다면, action 내부 에러 코드를 보면 나름 쉽게 찾을 수 있다.
package-lock.json 때문에 버전이 다르다고 에러가 나는 경우는 뭐 급한대로 lock 파일을 제거하고 다시 진행해준다. 혹은 lock 파일을 자동 업데이트 되도록 해줘도 좋을 거같다. (안해봄)
