[DevOps] React, gh-pages를 통해 웹 페이지를 배포해보자! (2)

프로젝트 수정

프로젝트를 수정하고 다시 배포하려면 어떻게 해야할까?

// App.js

function App() {
	return <div className="App">안녕하세요</div>
}

export default App

굉장히 간단한 수정을 하고 배포 명령을 다시 실행해봤다.

npm run deploy

deploy명령을 실행하면 github actions가 자동으로 동작하며 배포를 수행한다.

완료되면 ctrl+shift+r을 눌러 강제 새로고침을 하고 수정한 내용을 확인할 수 있다.

 

Github Actions

우리는 위에서 한 과정을 Github Actions를 통해 push하면 자동으로 배포하게 할 수 있다.

# .github/workflows/deploy.yml
name: Deploy

on: [push]

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
    - name: checkout
      uses: actions/checkout@v3

    - name: Node.js
      uses: actions/setup-node@v3.6.0
      with:
        node-version: 16.x

    - name: Install Dependencies
      run: |
        yarn install
        yarn build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{secrets.GH_TOKEN}}
        publish_dir: ./build

하나씩 살펴보자.

    - name: checkout
      uses: actions/checkout@v3

기본적으로 제공하는 github actions의 서버는 아무런 파일도 존재하지 않기 때문에 repository에 저장된 파일들을 복사해주는 역할을 한다.

    - name: Node.js
      uses: actions/setup-node@v3.6.0
      with:
        node-version: 16.x

react를 사용하기 위한 node를 설치해주는 역할을 한다.

    - name: Install Dependencies
      run: |
        yarn install
        yarn build

이제 패키지를 설치하고 빌드한다.

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{secrets.GH_TOKEN}}
        publish_dir: ./build

위 명령을 사용하면 빌드된 파일들을 자동으로 deploy해준다.

이때 본인을 확인하기 위해 github token을 사용하여 인증한다.

이는 secret값에 설정해서 사용할 수 있다.

 

이제 세팅이 완료됐으니 적당히 수정하고 푸시해보자.

// App.js

function App() {
	return <div className="App">안녕하세요 반갑습니다.</div>
}

export default App

정상적으로 반영이 됐다.

이제 코드를 수정하고 푸시만하면 자동으로 빌드하고 배포하는 CI/CD까지 할 수 있다.

 

Repository에 링크 걸기

이제 우리의 페이지를 만들었으니 Repository에서 해당 페이지로 이동할 수 있도록 링크같은걸 보여주면 좋을 것 같다.

Readme에 보여주는 방법도 있지만 Github에서 제공하는 기능이 있다.

About을 누르면 Website를 입력할 수 있는 칸이 나온다.

여기에 접속 url을 적고 저장하면 Repository에서 링크를 보여줄 수 있다.