iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
2

這篇介紹靜態頁面部署方式
讀者可用電商登入頁案例試試

Nuxt 命令介紹過運行模式差異,透過命令

$ yarn generate /* npm run generate */

想要跑 minify 等 production 編譯流程,可改下命令

$ yarn build /* npm run build */

上述命令把 Nuxt App 編譯成靜態頁面 (Static Pages)

https://ithelp.ithome.com.tw/upload/images/20181112/201034242yBUYDz13w.png


關於 Github Pages

想把 Github 當成靜態網站主機,他支援兩種方式

https://ithelp.ithome.com.tw/upload/images/20181112/20103424cpr5500NIW.png

  1. 創建 <username>.github.io
    建個與你帳號同名的 repo,例如 raphahsuraphahsu.github.io
    把靜態頁面和靜態資源推上 master 分支

    詳細可看官方說明教學頁面

  2. 創建 <username>.github.io/<repository_name>
    任意名稱的 repo,gh-pages 分支對應帳號 github pages domain 下的 /<repository_name>/
    例如 raphahsu/nuxt-app 對應 raphahsu.github.io/nuxt-app/
    把靜態頁面和資源推上 gh-pages 分支

另外可依自己買的網域設 CNAME,先不贅述,有興趣參考 Github Pages


官網文件作法

Nuxt 官網作法是第二種

礙於網域是 github.io,為了讓 router 自動加上 <repository_name> 前綴

nuxt.config.js 記得加 base

export default {
  router: {
    base: '/<repository_name>/'
  }
}

若每次開發與部署切換,都得更改 router base,煩中必出錯

先照顧一下 windows 平台的同事

$ yarn add cross-env --dev

寫成命令並針對 Github Pages 設定環境變數是個好方法

package.json

"scripts": {
  "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate"
},

nuxt.config.js

// only add `router.base = '/<repository_name>/'` if `DEPLOY_ENV` is `GH_PAGES`
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/<repository_name>/'
  }
} : {}

export default {
  /* original options */
  ...routerBase
}

為了方便每次 push dist 資料夾的檔案,使用 push-dir 套件

$ yarn add push-dir --dev

加上 deploy 命令 (把 dist 資料夾推上 github gh-pages 分支)

"scripts": {
  "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate"
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},

設完命令,往後執行兩行解決

yarn generate:gh-pages
yarn deploy

/*
npm run generate:gh-pages
npm run deploy
*/

參考前幾篇電商網站部署成果


補充

懶人想更懶 - CI

若想更懶,搜尋 CI 服務,挑個你喜歡、用得順手的
或是參考官網的 Travis CI 和 Appveyor 設定方式


Firebase Hosting

Firebase Hosting 部署上更彈性,但你得自己指定資料夾對應、以及 fallback 處置

部署過程不用 yarn deploy
改用 Firebase CLI Tool,工具按照 firebase.json 設定做部署

或參考 Hunter 鐵人文
若用不到檔案上傳或 DB,純靜態頁面可省略 nuxt.config.js 這段

// 這邊引入 firebase.firestore 並宣告一個變數為 db 備用。
const config = require('./firebase.config.js')

import firebase from 'firebase/app'
import 'firebase/firestore'

if (!firebase.apps.length) {
  firebase.initializeApp(config)
  firebase.firestore().settings({timestampsInSnapshots: true})
}
const db = firebase.firestore()

Heroku

Heroku 算是最懶的部署方式!
設定好環境和 Heroku CI 要跑的命令 ,只需將源碼推上 heroku git,其餘 Heroku 幫你處理

就留文件 Nuxt - How to deploy on Heroku? 給你看囉!

有需要我再寫篇 Heroku CLI 部署流程


上一篇
27. @nuxtjs/axios 如何透過 module 包裝 axios
下一篇
29. Nuxt Universal App 部署至 Heroku
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言