프로젝트 수정
프로젝트를 수정하고 다시 배포하려면 어떻게 해야할까?
// 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에서 링크를 보여줄 수 있다.
'프로그래밍 > DevOps' 카테고리의 다른 글
[DevOps] React, gh-pages를 통해 웹 페이지를 배포해보자! (3) (0) | 2023.02.16 |
---|---|
[DevOps] React, gh-pages를 통해 웹 페이지를 배포해보자! (1) (0) | 2023.02.16 |
[DevOps] github actions을 사용해서 CI/CD를 해보자! (4) (0) | 2023.02.15 |
[DevOps] github actions을 사용해서 CI/CD를 해보자! (3) (0) | 2023.02.12 |
[DevOps] github actions을 사용해서 CI/CD를 해보자! (2) (2) | 2023.02.12 |