[DevOps] GitHub Action workflow로 배포 자동화
Vue-CLI
npm 으로 설치한 Vue CLI 로 프로젝트를 만들더라도 yarn을 요구하므로 yarn이 미리 설치되어있어야 한다.
-
yarn 설치
npm install -g yarn
-
vue-cli 3.0 alpha.x 설치
yarn global add @vue/cli
또는
npm install -g @vue/cli
package.json
기존의 Vue CLI 템플릿은 각 설정들을 가진 자바스크립트 파일을 노출한다.
3.0버전의 목표인 사용자에게 설정을 노출함으로 인하여 발생하는 혼란을 줄이기 위해 프로젝트 설정을 packge.json 파일에 담는 것으로 제한한다.
- scripts
serve : 개발용 버전으로 앱을 실행합니다.
build : 배포용 버전으로 앱을 빌드합니다.
test : 테스트코드를 실행합니다.
lint : 코드 스타일을 lint 합니다.
github pages
간단하게 HTML/CSS/JS 파일을 무료로 호스팅 가능하다.
Vue-Cli 프로젝트 생성
-
vue-cli 설치 확인
vue -V
-
Vue 프로젝트 생성
vue create vue-devops
프로젝트 생성 과정에서 아래와 같은 순서로 선택합니다.
Manual select features, Unit Testing 추가선택, 3.x, EsLint + Prettier, Lint on save, Jest, In dedicated conifg files, N -
생성된 프로젝트로 이동해
yarn serve
실행하여 웹브라우저에서 확인 (localhost:8080)
Github 수동 배포
-
Github에 vue-devops 프로젝트 생성
-
원격 저장소 설정 및 코드 푸시
-
Github Pages 배포 라이브러리 추가
yarn add gh-pages -d
-
package.json에서 배포에 필요한 정보 추가
"name": "vue-devops", "version": "0.1.0", "private": true, "homepage": "https://jodawoooon.github.io/vue-devops/", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "predeploy": "vue-cli-service build", "deploy": "gh-pages -d dist", "clean": "gh-pages-clean", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" },
-
배포용 publicPath 설정
이 설정이 있어야 https://<github_id>.github.io/vue-devops에서 정상적으로 페이지 확인 가능vue.config.js 파일을 생성하여
module.exports = { publicPath: "/vue-devops/", outputDir: "dist" };
-
정적 파일을 githu에 푸시
yarn deploy
GitHub Action workflow로 배포 자동화
-
Github Actions 메뉴의 첫 화면에서 Simple workflow 파일(deploy.yml)작성 후 커밋한다
-
git pull하여 deploy.yml 내려받는다.
-
수정 후 커밋&푸시 하면 자동 배포 완료
Author And Source
이 문제에 관하여([DevOps] GitHub Action workflow로 배포 자동화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jodawooooon/TIL-2021.06.29-DevOps저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)