Github Actions - React ํ๋ก์ ํธ๋ฅผ Firebase์ Deploy ํ๊ธฐ
Actions ๋ง์ง๋ง ํฌ์คํธ๋ก React ํ๋ก์ ํธ๋ฅผ Firebase์ Deploy ํ๋ ๊ธ์ ์จ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ง๋ ํฌ์คํธ์์ YAML ํ์ผ์ ๊ฐ์ง๊ณ ๊ฐ๋จํ Workflow์ Matrix์ Secrets ๋ฑ์ ํ๊ฒฝ ๋ณ์๊น์ง๋ฅผ ๋ค๋ค๋ดค์ต๋๋ค.
์ด๋ฒ ๊ธ์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก Google Firebase์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ์ง์์ด ์๋ ์ํ์์ ์งํ์ ํ๋๋ก ํ๊ฒ ์ต๋๋ค. Firebase์ ์ฒ์๋ถํฐ ์์ํ๊ฒ ๋๋ฉด ๊ธ์ด ๊ธธ์ด์ง๊ธฐ ๋๋ฌธ์, ๊ฐ๋จํ๊ฒ ์์ ๋ง ์ง๊ณ ๋์ด๊ฐ๊ธฐ ์ํด์ Firebase์ ๊ธฐ๋ณธ ํ๊ฒฝ์ด ์ด๋ฏธ ๊ตฌ์ถ๋ ์ํ์์ ์งํํ๋๋ก ํ๊ฒ ์ต๋๋ค.
Generate and Register Firebase Token
๋ฐฐํฌ ๋๊ตฌ๋ก Google Firebase์์ ๊ณต์์ ์ผ๋ก ์ ๊ณตํ๋ firebase-tools๋ฅผ ํ ๋ฒ ์ฌ์ฉํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ์ด ํด์ Node.js ๊ธฐ๋ฐ์ผ๋ก ๋์ด ์์ด์ Node Package Manager (์ดํ NPM)์ ์ด์ฉํด ์ค์นํ๋ฉด ๋ฉ๋๋ค.
$ npm install -g firebase-tools
ํน์ Yarn์ ์ฌ์ฉํ์ค ๋ถ์ด์๋ผ๋ฉด, ์๋์ ๋ช ๋ น์ด๋ ๊ด์ฐฎ๊ฒ ์ฃ ?
$ yarn global add firebase-tools
์ด๋ ๊ฒ firebase-tools ์ค์น๊ฐ ๋๋ฌ์ผ๋ฉด firebase ๋ฐฐํฌ ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํ์ค ์ ์์ต๋๋ค.
์ ์ฌ๊ธฐ์ ์ฐ๋ฆฌ๊ฐ ํ์ํ ๊ฒ์ ๋ฐ๋ก Firebase ๋ฐฐํฌ์ ์ฌ์ฉํ ์ธ์ฆ Token์ ๋๋ค. ์ด Token์ ์ฌ๋ฌ๋ถ์ ๋ฐฐํฌ ํ๊ฒฝ์ด๋ผ๋ ํ์์ ์ธ์ฆํค์ธ๋ฐ์. ์ด ํค๊ฐ ์์ผ๋ฉด Firebase๊ฐ ์ด๋๋ก ๋ฐฐํฌํ ์ง๋ฅผ ์ ์๊ฐ ์๊ฒ ์ฃ ? ๋ฐ๋ผ์ ์ด๋ฅผ ์์ฑํด์ค์ผ ํฉ๋๋ค.
$ firebase login:ci
firebase login ๋ช ๋ น์ด์ ci์ argument๋ฅผ ๋ถ์ด๊ฒ ๋๋ฉด, ์น ํ์ด์ง๊ฐ ๋์ ์์ ์ Google ๊ณ์ ์ผ๋ก ๋ก๊ทธ์ธํ์๋ฉด ๋ฉ๋๋ค. ๋ก๊ทธ์ธ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋๋ฉด, ์๋์ ๊ฐ์ด ํฐ๋ฏธ๋์ ์์ ์ Token์ด ํ์๊ฐ ๋ฉ๋๋ค.
์์ ์ Token์ด ์์ฑ์ด ๋์์ผ๋ฉด ์ด์ ์ด Token์ Repository์ Secrets์ ์ถ๊ฐํด์ฃผ๋ฉด ๋ฉ๋๋ค.
Repository์ Settings ํญ๋ชฉ์ ๊ฐ์๋ฉด, Secrets ํญ๋ชฉ์ด ์๊ฒจ์ ธ ์๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. Add a new secret ๋ฒํผ์ ํด๋ฆญํ์ฌ FIREBASE_TOKEN์ด๋ผ๋ ์ด๋ฆ์ผ๋ก Secrets๋ฅผ ์์ฑํ์๋ฉด ๋ฉ๋๋ค..
Create Workflow
์ ์ด์ ์ํฌํ๋ก์ฐ๋ฅผ ๋ง๋ค์ด๋ณด๋๋ก ํ์ฃ . ์ฌ๊ธฐ์ ์ ํฌ๊ฐ ๋ง๋ค ์ํฌํ๋ก์ฐ๋ 2๊ฐ์ ๋๋ค. React ํ๋ก์ ํธ๋ ์น ํ๋ก์ ํธ์ด๊ธฐ ๋๋ฌธ์ ๋น๋ํ๊ณ ํ ์คํธํ๋ ๊ณผ์ ์ด 1๊ฐ ์์ด์ผ ํ๊ณ , ๊ทธ๋ฆฌ๊ณ ๋ง์ง๋ง์ผ๋ก ๋น๋์ ํ ์คํธ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ๋๋ฌ๋ค๋ฉด ์ค์ ํด๋ผ์ฐ๋๋ On-Premise ํ๊ฒฝ์ ๋ฐฐํฌํ๋ ๊ฒ๊น์ง๊ฐ ์ต์ข ๊ฐ๋ฐ ๋ฐ ํ ์คํธ ํ๋ก์ธ์ค๊ฐ ๋๊ฒ ์ต๋๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด๋ป๊ฒ ๊ตฌ์ฑํ๋ฉด ๋ ๊น์? master ๋ธ๋์น๋ฅผ Productionํ๋ ๋ธ๋์น๋ผ๊ณ ๊ฐ์ ํ๊ณ ๊ทธ ์ธ์ ๋ธ๋์น๋ฅผ Develop ํ๋ ๋ธ๋์น๋ผ๊ณ ๊ฐ๋จํ๊ฒ ๊ตฌ์ฑํ๋ค๋ฉด, master์ push ๋๋ ๋จ๊ณ์์ Deploy๋ฅผ ์ํํ๋ฉด ๋๊ณ , ๊ทธ ์ธ์ ๋ธ๋์น์์๋ Pushํ๋ ์ด๋ฒคํธ๋ฅผ ํ์ฉํ ๋, master ๋ธ๋์น๋ก PR์ ์๊ตฌํ๋ค๋ฉด, ๊ทธ ๋ ํ ์คํธ ํ๊ฒฝ์ ๊ตฌ์ถํ๋๋ก ๋ง๋ค๋ฉด ๋๊ฒ ์ต๋๋ค.
๋ค์ด์ด๊ทธ๋จ์ผ๋ก ํ์ํ๋ฉด ๋์ถฉ ์ด๋ ๊ฒ ๋ ๊ฒ ๊ฐ๋ค์. ๋ค๋ฅธ ๋ธ๋์น๋ฅผ ๋ง๋ค๊ณ PR์ ์ฌ๋ฆฌ๊ฒ ๋๋ฉด, Github์์ Actions์๊ฒ ๋น๋ ์ด๋ฒคํธ๋ฅผ ๋ณด๋ด๊ฒ ๋๊ตฌ์. ๊ทธ ์ํ๋ฅผ Github์์ ๋ฐ๊ณ Merge๊ฐ ์ด๋ฃจ์ด์ง๋ฉด Firebase๋ก Deploy ํ๋ ํํ์ ๋๋ค.
๊ทธ๋ผ ์ฒซ ๋ฒ์งธ Workflow๋ฅผ ๋ง๋ค์ด๋ณด์ฃ .
name: React Build
on: [ pull_request ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/checkout@v1
- name: npm install, build
run: |
npm install
npm run build --if-present
1๋ฒ์งธ Workflow๋ PR ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์ด๋ค์ง๋ ์ํฌํ๋ก์ฐ์ ๋๋ค. on ํด๋์ค์ pull_request ์ด๋ฒคํธ๋ง์ ์ฃผ์ด์คฌ๊ธฐ ๋๋ฌธ์ ์ด๋ค ๋ธ๋์น์์๋ ์ง PR์ด ๋ฐ์ํ๋ฉด ์ด ์ํฌํ๋ก์ฐ๊ฐ ์๋ํฉ๋๋ค.
name: React Deploy
on:
push:
branches:
- master
jobs:
build_and_deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- uses: actions/checkout@v1
- name: npm install, build
run: |
npm install
npm run build --if-present
- name: Deploy Firebase
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
run: |
npm install firebase-tools
firebase deploy --token $FIREBASE_TOKEN --non-interactive
2๋ฒ์งธ Workflow๋ master์ Push ํ์ ๋ ์ด๋ค์ง๋ ์ํฌํ๋ก์ฐ์ง์. ์ฌ์ค ์ด๋ ๊ฒ ํ๋ฉด ๊ทธ๋ฅ master์ Pushํ์ ๋๋ ์ด ๋ฐฐํฌ๊ฐ ์งํ๋๊ธฐ ๋๋ฌธ์ ์ค์ ์ฌ์ฉํ ๋๋ master branch์ ๊ถํ์ ๊ฐํํ๋ ๊ฒ์ด ์ข๊ฒ ๋ค์.
๋ง์ง๋ง์ผ๋ก firebase deploy ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํด์ ์๊น ์ ์ฅํ FIREBASE_TOKEN์ ๋ถ๋ฌ์ฃผ์๋ฉด ๋๊ฒ ์ต๋๋ค.
Results
๊ทธ๋ผ ์ด์ PR์ ํ ๋ฒ ์ฌ๋ ค๋ณผ๊น์?
PR์ ์ฌ๋ฆฌ๋ฉด ์ด๋ ๊ฒ ์ฒซ ๋ฒ์งธ Workflow์ ์ด๋ฆ์ด ๋ํ๋๊ณ , Actions์์ ๋น๋ ํ๊ฒฝ์ ์์ฑํ ๋ค์, ๋น๋๊ฐ ์ด๋ฃจ์ด์ง๊ฒ ๋ฉ๋๋ค.
๋น๋๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋๋ฉด ์ด๋ก์ ์ฒดํฌ ํ์๋ฅผ, ์คํจํ๋ฉด ๋นจ๊ฐ์์ X ํ์๋ฅผ ๊ฑด๋ด๊ฒ ๋ฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก Merge๋ฅผ ์งํํ๋ฉด master ๋ธ๋์น์ Push ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด์ ์๊น ๋ง๋ค์๋ 2๋ฒ์งธ ์ํฌํ๋ก์ฐ๊ฐ ์คํ๋ฉ๋๋ค. 2๋ฒ์จฐ ์ํฌํ๋ก์ฐ์๋ Firebase๋ก Deploy๊น์ง๊ฐ ๋ด๊ฒจ์ ธ ์์์ฃ ?
Master ๋ธ๋์น์ Merge๋ฅผ ์๋ํ๋ฉด ์๋ก์ด ์ปค๋ฐ์ด ๋ง๋ค์ด์ง๊ฒ ๋ฉ๋๋ค. Actions์ ๊ฐ๋ณด์๊ฒ ๋๋ฉด, PR #2๋ฒ์ ๋ํ 2๋ฒ์งธ ์ํฌํ๋ก์ฐ๊ฐ ์คํ๋๊ณ ์์์ ๋ณด์ฌ์ค๋๋ค.
๋ง์น๋ฉฐ...
์ฌ๊ธฐ๊น์ง Github Actions์ ๋ํ ๊ธ์ ์ ์ด๋ดค์ต๋๋ค. Github Actions๋ ์์ง ๊ณต์์ ์ผ๋ก Github์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์๋๋๋ค. ํ์ฌ๋ Beta๋ก ์ ๊ณตํ๊ณ ์๊ณ , ์ ์ฒญ์ ์ค ๋ฉ์ผ์ ๋ฐ์ ์ฌ๋์ ๋ํด์๋ง ์ฌ์ฉํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค.
์ฒซ ๊ธ์์๋ ๋ง์๋๋ ธ์์ง๋ง Github Actions๊ฐ Travis CI๋ฅผ ๋์ฒดํ ์ ์๊ธฐ์๋ Travis CI ๋ณธ์ฐ์ฒด๋ฅผ ์ฌ์ฉํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ค์ ๋์ฒด๋ผ๊ณ ๋ณด๊ธฐ์๋ ์ด๋ ต๊ณ Collaboration๋ ํํ๋ผ๊ณ ๋ณด๋ฉด ์ฌ์ธ ๋ฏํฉ๋๋ค. ์ถ๊ฐ๋ก ์ฌ๊ธฐ์ Linux / OS X ํ๊ฒฝ๋ง ์ง์ํ๋ Travis CI์ Windows ํ๊ฒฝ๊น์ง ์ถ๊ฐ๋์๊ธฐ ๋๋ฌธ์ ์ฝ๋ผ๋ณด๊ฐ ์คํ๋ ค ๋ ์ด์ธ๋ฆฌ๋ ํํ๋ผ๊ณ ํ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
๋ณธ๋ Github Actions๋ HCL๋ก ์์ฑํ์ฌ Visual Editor๊ฐ ์ ๊ณต๋ ๋ฐ ์์์ต๋๋ค. ํ์ง๋ง HCL์ 2019๋ 9์ 30์ผ๋ถ๋ก ์์ ํ ์ ๊ฑฐ๋์ด ์์ผ๋ก๋ ๊ณ์ YAML๋ง ์ฌ์ฉํ ๊ฒ์ด๋ผ๊ณ ํฉ๋๋ค.
๊ฐ๋จํ ํ๊ธฐ๋ฅผ ์์ฑํด๋ณด์๋ฉด, Github Actions์์๋ Github์ ๊ฐ์ข ์ด๋ฒคํธ(Push, Pull-request ๋ฑ)์ ์ง์ ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ ๊ฐํ๋ Ci/CD ํ๊ฒฝ์ ๋ง๋ค ์ ์๋ค๋ ๊ฒ์ด ์ฅ์ ์ ๋๋ค. ๋, ๊ฐ ๋น๋ ์ํ๋ฅผ Success, Failure ๋ฑ์ ํจ์๋ก ์ง์ํ์ฌ ์คํจํ์ ๊ฒฝ์ฐ์๋ ์ฌ์ฉ์ ์ ์์ Actions๋ฅผ ์คํํ ์ ์์ด ๋ณด๋ค ๋ค์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด์ฉํด์ ๋ง๋ค์๋ PR ํ ์คํธ ํ๊ฒฝ์ Actions ํ ๊ฐ๋ก๋ ์ถฉ๋ถํ ๊ฐ๋ฅํ ์ ์๋ค๋ ๊ฒ์ด ๋๋ณด์์ต๋๋ค.
Docker์์ ์ง์ ์ฐ๋์ด ๊ฐ๋ฅํ๋ค๋ ์ ์ด ์์ต๋๋ค. ์ด ํฌ์คํธ์์๋ ๋ค๋ฃจ์ง ์์์ง๋ง ์ค์ ๋ก Github Actions๋ Docker์ ์์ฃผ ์น๊ทผํ๊ฒ ์ ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. Docker Hub์ ๊ฐ์ ์ธ๋ถ Docker ๋ ํฌ์งํฐ๋ฆฌ์์ ์ฝ๊ฒ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์ ์ ์๊ณ , ๋ ํ๋ผ๋ฏธํฐ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
'DevOps > Git' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Github] Github Actions์ Firebase Channel์ ์ด์ฉํ ์คํ ์ด์ง ํ๊ฒฝ ๊ตฌ์ถ (0) | 2021.08.29 |
---|---|
[Github] Password authentication was removed์ ๋์ฒํ๊ธฐ (0) | 2021.08.19 |
Github Actions - Matrix & Secrets (0) | 2019.08.26 |
Github Actions - ๊ฐ๋จํ ์ํฌํ๋ก์ฐ ์์ฑํด๋ณด๊ธฐ (0) | 2019.08.24 |
Github Actions ๋๋์ด ํ์ฑํ ๋๋ค. (0) | 2019.08.24 |