Step 8

CI/CD로 배포하기

github에서 머신을 제공해준다.

1. 먼저 [자신의 git 아이디].github.io 라는 레포지토리를 만들어준다.

2. gh-pages 라는 브랜치를 만들고 index.html 파일을 하나 만든뒤 push 해준다.
   

3. 배포하려는 프로젝트 폴더로 가서 .github 폴더를 만든다
   

4. 그 안에 workflows 폴더를 만든다
   

5. workflows 폴더 안에 main.yml 파일을 다음과 같이 만들어 준다

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2.3.1
      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: build # The folder the action should deploy.

6. pakage.json 에 페이지 url을 추가해준다. 그리고 push 해준다.

"homepage": https://whanhee97.github.io/Minesweeper/

7. 그 다음 github 레포로 가서 Settings >> Pages로 가서 브랜치가 gh-pages로 돼있는지 확인한다.
   

8. 이제 github레포에 Action으로 가서 빌드가 되는지 확인한다.
   이때, 오류가 있을시 프로젝트의 사소한(노란 밑줄)것도 하나하나 다 고쳐줘야한다.
   

Action에서 빌드가 성공적으로 되었다면

아까 pakage.json에 적었던 홈페이지로

https://whanhee97.github.io/Minesweeper/ 접속하면 배포가 잘 되었는 것을 확인할 수 있다.