๐ก Vue CLI๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํ์ฌ GitHub Pages์ ์ ์ ํ์ด์ง ํธ์คํ ํ๊ธฐ & GitHub Actions๋ก ์๋ ๋ฐฐํฌ ์ค์ ํด์ DevOps ๊ฐ๋ฐํ๊ฒฝ์ ๊ตฌ์ฑํ๋ ์ค์ตํ๊ธฐ
- Vue CLI๋ก ํ๋ก์ ํธ ์์ฑ
- ๊นํ์ ์ฝ๋ Push ๋ฐ Pages์ ์๋ ๋ฐฐํฌ
- Github Actions workflow๋ก ๋ฐฐํฌ ์๋ํ
- ๋จ์ ํ ์คํธ step ์ถ๊ฐ๋ก ์ต์ํ์ ์์ ์ฅ์น ์ค์ ํ๊ธฐ
- ๋ง๋ฌด๋ฆฌ
๐ npm ๋ชจ๋๊ณผ vue ์ค์น๊ฐ ์ ํ๋์ด์ผ ํฉ๋๋ค.
% vue create vue-devops
-
Manually select features ์ ํ
-
Unit Testing ์ถ๊ฐ ์ ํ (Space)
-
3.x ์ ํ
-
Prettier ์ ํ
-
Lint on save ์ ํ
-
Jest ์ ํ
-
In Dedicated config files ์ ํ
-
N ์ ๋ ฅ
ํ๋ก์ ํธ ์์ฑ์ด ์๋ฃ๋ฉ๋๋ค.
% cd vue-devops
% npm run serve
์ ๋ช ๋ น์ด๋ฅผ ์คํ ํ, localhost:8080์ ์ ์ํฉ๋๋ค.
vue ํ๋ก์ ํธ๊ฐ ์ ์ ์์ฑ๋จ์ ํ์ธํ ์ ์์ต๋๋ค.
ํฐ๋ฏธ๋์ ์ด์ฉํด vue ํ๋ก์ ํธ ์ฝ๋๋ฅผ Git Repository์ Push ํฉ๋๋ค.
- git init
% git init
- ๋ฐฉ๊ธ ๋ง๋ repository๋ฅผ ํด๋น vue ํ๋ก์ ํธ์ ์๊ฒฉ origin์ผ๋ก ์ค์ ํฉ๋๋ค.
% git remote add origin ๋ ํฌ์งํ ๋ฆฌ url
- ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ(vue ํ๋ก์ ํธ ์ด๊ธฐ ํ๊ฒฝ)์ add ํฉ๋๋ค.
% git add .
- ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ commit ํฉ๋๋ค.
% git commit -m "์ปค๋ฐ ๋ฉ์์ง"
โํ์ฌ๊น์ง์ ๊ณผ์ ์ ์๋์ ์ฌ์ง์ฒ๋ผ ์งํ๋ฉ๋๋ค!
- ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์๊ฒฉ์ ์ฌ๋ฆฝ(push)๋๋ค.
% git push origin master
์๋ฃ ํ, ๊นํ ํ์ด์ง์์ ์ ์์ ์ผ๋ก ์ฌ๋ผ๊ฐ๋์ง ํ์ธํฉ๋๋ค!
- ๋จผ์ , github pages๋ก ๋ฐฐํฌํ๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐํฉ๋๋ค.
% npm add gh-pages -D
-
package.json ํ์ผ์ ์ด๊ณ
homepage
, script >predeploy
,deploy
,clean
๋ถ๋ถ์ ์ถ๊ฐํฉ๋๋ค. (ํ์ด๋ผ์ดํธ ๋ ๋ถ๋ถ) -
๋ฐฐํฌ์ฉ publicPath๋ฅผ ์ค์ ํฉ๋๋ค.
vue ํ๋ก์ ํธ ์ต ์๋จ์ vue.config.js ํ์ผ์ ์์ฑํ์ฌ publicPath์ ์์ฑํ repository ์ด๋ฆ์ ์ค์ ํฉ๋๋ค.
vue.config.js
module.exports = { publicPath: '/vue-devops/', outputDir: 'dist', };
๐ ์ฐธ๊ณ
๋ง์ฝ vue-devops ๋์ <github_id>.github.io ์ด๋ฆ์ผ๋ก Github Pages ๋ํ repository๋ฅผ ๋ง๋ค๊ฒ ๋๋ฉด ํด๋น ์ค์ ์ ํ์ํ์ง ์์ต๋๋ค. ๋ํ, ์ ์ ์ฃผ์๋ sub path ์์ด https://<github_id>.github.io๋ก ๊ฐ๋ฅํฉ๋๋ค.
-
yarn deploy ๋ช ๋ น ์คํ
๋น๋ ๋ ์ ์ ํ์ผ์ ์๊ฒฉ ์ ์ฅ์์ gh-pages ๋ธ๋์น๋ฅผ ์์ฑํด์ ํธ์๋ฉ๋๋ค.
-
์ค์ ์์ ๋ฐฐํฌ๋ ์ฃผ์๋ฅผ ํ์ธํ ๋ค์ ์ ์ํด ๋ด ๋๋ค.
Git Repository โก Settings โก Pages !
์ ์ ์ ์๋ ํ๋ฉด์ด ๋น๋๋ค.
๐ ์ด์ Vue๋ก ๊ฐ๋ฐํ ํ๋ก์ ํธ๋ฅผ yarn deploy ๋ช ๋ น์ด๋ก GitHub Pages์ ์๋์ผ๋ก ๋น๋๋ ์ ์ ํ์ผ์ ๋ฐฐํฌํจ์ผ๋ก์จ ์๋น์ค ์ด์ํ ์ ์๊ฒ ๋์์ต๋๋ค.
Github Actions๋ Github์ ์ํํธ์จ์ด ๊ฐ๋ฐ ์ํฌํ๋ก์์ ์์
์ ์๋ํํ๊ธฐ ์ํ ํจํค์ง ์คํฌ๋ฆฝํธ์
๋๋ค. ๊ฐ๋ฐ์๊ฐ ์ ์์ค ์ฝ๋๋ฅผ Push
ํ๊ฑฐ๋ Pull Request
๊ฐ์ ์ด๋ฒคํธ๋ฅผ ์์ฑํ๋ฉด, ์ด์ ๋ฐ์ํ์ฌ ํธ๋ฆฌ๊ฑฐํ๋๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
๐ ์์ ์ ์ธ ๋ฐฐํฌ ๋ฐ ์ด์์ด ๊ฐ๋ฅํ DevOps ํ๊ฒฝ์ ๊ตฌ์ถํ๋ ๊ฒ์ด ๋ชฉํ์ ๋๋ค.
๐ Github Actions๋ฅผ ํ์ฉํ์ฌ Vue ํ๋ก์ ํธ๋ฅผ ์๋์ผ๋ก ํ ์คํธํ ํ ๋น๋ํ์ฌ Github Pages์ ๋ฐฐํฌํ๋ ์์ ์ ์๋ํํ์ฌ ๋ชฉํ๋ฅผ ๋ฌ์ฑํด๋ด ์๋ค!
-
vue ํ๋ก์ ํธ๊ฐ ์ฌ๋ผ๊ฐ git repository์ Actions ์นดํ ๊ณ ๋ฆฌ์ ๋ค์ด๊ฐ๋๋ค.
-
Simple workflow ํ์ผ(deploy.yml)์ ์์ฑํ ๋ค์ ์ปค๋ฐํฉ๋๋ค.
-
์์ฑ ํ, ๋ฐ๋ก ์ํ workflow๊ฐ ๋์๋จ์ ํ์ธํ ์ ์์ต๋๋ค.
-
git pull ์ ํตํด deploy.yml ์ ๋ด๋ ค ๋ฐ์ต๋๋ค.
git pull origin master
-
github pages์ ์ ์์ ์ผ๋ก ๋ฐฐํฌ๋๋์ง ํ์ธํ๊ธฐ ์ํด App.vue ํ์ผ ์์
-
pull ๋ฐ์์จ deploy.yml ํ์ผ์ ์๋์ ๊ฐ์ด ์์ ํฉ๋๋ค.
..์๋ต # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" deploy: # The type of runner that the job will run on runs-on: ubuntu-latest steps: - name: Checkout source code uses: actions/checkout@master - name: Set up Node.js uses: actions/setup-node@master with: node-version: 12.x - name: Install dependencies run: yarn install - name: Build page run: yarn build env: NODE_ENV: production - name: Deploy to gh-pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist
-
๋ณ๊ฒฝ๋ ํ์ผ๋ค (deploy.yml, App.vue)์ commit & push๋ฅผ ์งํํฉ๋๋ค.
-
Actions ๋ชฉ๋ก ์ค ํด๋นํ๋ ์ปค๋ฐ ๋ฉ์์ง๋ฅผ ํด๋ฆญํด, ์งํ ์ค์ธ Workflow ๋์ ๊ณผ์ ์ ํ์ธํ ์ ์์ต๋๋ค.
๐ Jobs๋ deploy.yml์ ์์ฑํ name๊ณผ 1:1 ๋์ํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
-
Workflow ๋์ ๊ฒฐ๊ณผ์ ์๋ ๋ฐฐํฌ๋ ์ฌ์ดํธ ๋ด์ฉ์ ํ์ธํฉ๋๋ค. ์ฑ๊ณต์ ์ฌ์ดํธ์ ์๋ ๋ฐฐํฌ๋์ง๋ง, ์คํจ์์ ์ฌ์ดํธ์ ์๋ ๋ฐฐํฌ๋์ง ์์ต๋๋ค.
9-1. ์ฑ๊ณต
์๋ ๋ฐฐํฌ๋ ์ฌ์ดํธ ์ด๋ฏธ์ง
9-2. ์คํจ
์ปค๋ฐ ๋ฉ์์ง๋ฅผ ํด๋ฆญํ๋ฉด, ์์ธ ๋ด์ฉ์ ์๋ ํ๋ฉด์ฒ๋ผ ํ์ธํ ์ ์์ต๋๋ค.
ํ์์ ๊ฒฝ์ฐ์ deploy.yml์
- name: Install dependencies run: yarn install
์ฝ๋๋ฅผ ์๋ตํด yarn install ์์ด yarn build ๋ช ๋ น์ ์ํํด Error๊ฐ ๋ฐ์ํ๊ณ , workflow run failure๊ฐ ๋ฐ์ํ์ต๋๋ค.
๐ ์ด์ ์๋ก์ด ์์ค ์ฝ๋๋ฅผ ํธ์ํ๋ ๊ฒ๋ง์ผ๋ก ์ ์ํ๊ฒ ์๋ฒ์ ๋น๋ ๋ฐ ๋ฐฐํฌํ๋ ๊ธฐ๋ณธ์ ์ธ ์๋ํ ์์ ์ ๋ง์ณค์ต๋๋ค!!
์๋ํ๊ฐ ๋ฌด์กฐ๊ฑด ์ข์ ์ ๋ง ์๋ ๊ฒ์ ์๋๋๋ค. ๋น๋ ์คํจ์๋ ํ ์คํธ๋ฅผ ํต๊ณผํ์ง ๋ชปํ ์ฝ๋๊ฐ ์ด์์ค์ธ ์๋น์ค์ ๋ฐ์๋๋ฉด ์๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
๐ ์ต์ํ์ ํ ์คํธ ์ ์ฐจ๋ฅผ ์ถ๊ฐํด ๋ณด๊ฒ ์ต๋๋ค!
-
deploy.yml ํ์ผ์ yarn install๊ณผ yarn build ์ฌ์ด์ ์๋ ๋จ์ํ ์คํธ step์ ์ถ๊ฐํฉ๋๋ค.
- name: Test unit run: yarn test:unit
์ด ์ฝ๋๋ฅผ ์์ฑํ๋ฉด build, deploy ๊ฐ์ ๋ค์ step์ด ๋ ์ด์ ์งํ๋์ง ์์ ๋ฐฐํฌ๋ ์ฌ์ดํธ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ง ์์ต๋๋ค.
-
์คํจ๋ฅผ ์ ๋ํ๋ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๊ฒ ์ต๋๋ค.
3๋ฒ ๋ผ์ธ์ ์ฃผ์ํ๊ณ , 4๋ฒ ๋ผ์ธ์ ์ถ๊ฐํ์ต๋๋ค.
App.vue์์ ์ ๋ฌํ props data๋ฅผ ์ฌ์ฉํด ๋๋๋งํ์ง ์์ HelloWorld.vue ์ปดํฌ๋ํธ ํ ์คํธ๊ฐ ์คํจํ๊ฒ ๋ ๊ฒ์ ๋๋ค.
-
๋ณ๊ฒฝ๋ ํ์ผ๋ค์ commit & push ํฉ๋๋ค.
Actions์๋ ์ ์์ ์ผ๋ก ์ถ๊ฐ๋์์ต๋๋ค.
-
Install dependencies๊น์ง ์ ์ ์คํ๋์์ง๋ง, Test unit์์ ์ค๋ฅ๊ฐ ๋๋ฉด์ ๋ค์ step์ด ์งํ๋์ง ์์ failure ๋์์ต๋๋ค.
์คํจ ์์ธ์ 2๋ฒ์ ์์ํ ๋ด์ฉ๊ณผ ๋์ผํฉ๋๋ค.
ํ์ด์ง๋ "ํ ์คํธ ์คํจ ์ฐ์ต"์ ๋ฐ์๋์ง ์์์ต๋๋ค. (์ด์ ์ ๋ฐฐํฌํ ํ๋ฉด์ผ๋ก ํ์๋ฉ๋๋ค.)
๐ ์ด ๊ณผ์ ์ ํตํด ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์์ฑ์์ ์๋๋๋ก ๋์ํ๋์ง ํ์ธํ๋ ํ ์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ด ์ค์ํ๋ค๋ ์ ์ ์ ์ ์์์ต๋๋ค.
์ค๋ ํ์ตํ ๋ด์ฉ์ ์งง๊ฒ ์์ฝํด๋ณด๊ฒ ์ต๋๋ค.
- Vue CLI๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํ ํ ๊นํ ๋ ํ์งํ ๋ฆฌ์ ์ฌ๋ฆฌ๊ณ ,
gh-pages
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํด Github Pages์ ์๋ ๋ฐฐํฌํ์์ต๋๋ค.- ๊ทธ ๋ค์, Github Actions workflow๋ฅผ ํ์ฉํด ๋น๋ ๋ฐ ๋ฐฐํฌ ์๋ํํ๋ ๋ฐฉ๋ฒ์ ํ์ตํ ํ์
- ๋ง์ง๋ง์ผ๋ก ์ค๋ฅ๊ฐ ์์ฉ ์๋ฒ์ ๋ฐฐํฌ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํ ๋จ์ ํ ์คํธ step์ ์ถ๊ฐํ์ต๋๋ค.
์๊ณ ํ์ จ์ต๋๋ค ! ! ๐ฅณ