前一篇介紹靜態頁部署，若換成 Universal Mode 呢？

「需要個 Node Server，不時讓人戳」

當工程師懶得管機器 (或你分身乏術)，想把環境設定極度簡化
Heroku 適合！

本篇介紹 Universal 部署方式

Heroku 自帶 CI，只需幾個簡易步驟

1. 建立 Heroku App Dynos
2. 設定 Heroku CI 相關參數、設定檔
3. 把程式碼推上 Heroku Git (預設跑 master 分支)

介紹透過命令列的作法

事前準備

Heroku 網站上能做的事 (除了付款和客訴)，CLI Tool 也做得到

先到 Heroku 註冊帳號，並安裝 Heroku CLI

brew install heroku/brew/heroku

其他系統安裝方式可參考文件

登入帳號並建立 Heroku App

登入 Heroku

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:

若你沒設定金鑰，這時會跳出瀏覽器登入頁面，登入完成顯示如:

Logging in... done
Logged in as <your_email>

在專案目錄下建立 Heroku App

$ cd ~/<your_nuxt_app>
$ heroku create

正常建立後顯示 App 資訊

heroku create                                
Creating app... done, ⬢ <random_appname>
https://<random_appname>.herokuapp.com/ | https://git.heroku.com/<random_appname>.git

我的 Heroku App 叫 going-merry-2
網站連 https://going-merry-2.herokuapp.com/
部署推 https://git.heroku.com/going-merry-2.git
(同時已建好 heroku remote)

設定環境變數

heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false

heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

設定 Heroku CI

服務無法通靈，得告訴 Heroku Git 更新後要做什麼

• 跑編譯
• 啟動 Node Server

package.json

"scripts": {
  /* ...其他命令 */
    
  /* push heroku git 完成後執行 */
  "heroku-postbuild": "npm run build"
},

Procfile doc

web: npm run start

實際部署

git push heroku [your_branch:]master

讀者若沒切分支，直推 master

git push heroku master

測試看看

https://going-merry-2.herokuapp.com/
https://going-merry-2.herokuapp.com/login

補充

「靜態頁部署」只適合內容不常變的頁面，事先產生靜態頁面很合理。
但內容或資料常常修改，改用「Universal」較適合，每次有人瀏覽才產生頁面內容。