# 透過 Travis CI 部署 Vue App 筆記（超簡易版）

> 用 travis-ci.com 而非 travis-ci.org
> 見 [What's the difference between travis-ci.org and travis-ci.com?
](https://devops.stackexchange.com/questions/1201/whats-the-difference-between-travis-ci-org-and-travis-ci-com)

## 一、專案
### 安裝相依

$ npm i pug pug-plain-loader sass sass-loader

### `package.json`

**package.json**

"scripts": {
+  "build": "vue build"
},

### 在專案根目錄建立 `.travis.yml`
**.travis.yml**

sudo: false
language: node_js
node_js:
  - lts/*
branches:
  only:
    - dev
before_script:
  - npm install -g @vue/cli
  - npm install -g @vue/cli-service-global
script:
  - npm run build
  # - echo "$CNAME_URL" > dist/CNAME
deploy:
  provider: pages
  skip_cleanup: true
  github-token: $GITHUB_TOKEN
  target_branch: master
  keep-history: false
  on:
    branch: dev
  local-dir: dist

> https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

## 二、GitHub

### 取得 Personal access token
讓 Travis CI 有權限 push 建構後的結果到分支
1. 至 https://github.com/settings/tokens
2. 點擊 Generate new token
3. Note 取個能識別的名字
4. Select scopes 勾選 repo
5. 點擊 Generate token
6. 妥善儲存產生的 token，它只會顯示一次

## 三、Travis CI
### 新增專案
1. 至 https://travis-ci.com/account/repositories
2. 先點擊 Manage repositories on GitHub
3. Repository access 處選擇要安裝的庫
4. 回到 *1.* 的頁面，GitHub Apps Integration 處即可搜尋並新增庫

### Travis CI 設置 Environment Variables
1. 至 https://travis-ci.com/ 選擇對應的庫
2. 右側 More options → Settings
3. Environment Variables 處填入新增：
- NAME: `GITHUB_TOKEN`
- VALUE: 先前取得的 token

## 開發
之後開發的分支都 push 到 `dev`，而非 `master`