Heroku | 將靜態網站部署到 Heroku 上吧！feat. Vue、Node.js

部署到 Heroku 的網頁

Hi！大家好，我是神 Q 超人！今天要說的 Heroku 是個人非常喜歡的平台，之前在做一些小 Side Project 的時候常常會把 Server 丟到那裡，像是 Websocket、Line bot 等等。但除了太久沒用 Server 會睡著的缺點以外，Heroku 也不能直接部署靜態網站。

所謂的靜態網站就是網頁在載入的時候，網址不會經過後端處理，而是直接將 HTML、CSS 和 JavaScript 檔等靜態資源直接呈現在頁面上。

舉例來說，用 Hexo 或 Gatsby 產生並部署的檔案就是靜態的網站，因為所有的頁面在載入的時候都只是呈現 HTML 等靜態頁面，不需要再透過後端產生內容。另一個比較容易搞混的例子是用 React 或 Vue 做的 SPA 網站，雖然有些內容可能會需要呼叫 API 取得，但是所有頁面的載入仍然是靠 JavaScript 動態產生，真正呈現在頁面上的依舊只有 index.html。

那話說回來，雖然 Heroku 沒辦法讓只部署靜態網站，但我們還是可以寫一些簡單的 Node.js 來達到相同的目標（其實只要寫了 Node.js 就不再是靜態網站了 😂），一起來看看怎麼做吧！

前置準備

如果要實作本文章的內容，需要先在電腦上裝幾個東西：

1. Node.js 和 npm：[筆記][node.js]第一次建置node.js開發環境和安裝npm就上手！」
2. Git 和 Heroku 的帳號和 CLI 工具：Heroku | 搭配 Git 在 Heroku 上部署網站的手把手教學。

建立 Vue 專案

請各位先用 npx 指令透過 @vue-cli 建立 vue 專案（如果各位有把 @vue-cli 裝在全域環境就不需要用 npx）：

npx @vue/cli create vue-exemplary-app

在創建的時候會詢問一些關於專案的配置，以下是我的選擇：

Vue 專案的初始配置

上方要注意「Use history mode for router?」這個問題，我選 Yes 的原因是因為待會會用 Node.js 做一個 Server 來載入靜態網頁，所以就不需要使用會在網址中加上 # 的 hash router。

完成後就能打開該專案的目錄，並輸入 npm run serve 啟動網站，確認 router 等功能正常：

初始的 Vue 專案

確認產生出來的頁面沒問題後就能關掉了，之後也不會再用 npm run serve 執行該網站，而會另外透過 Node.js 開啟 Server 執行。

建立 express

請各位先從 npm 上下載 express：

npm install express

接下來請大家注意到剛剛建立的 Vue 專案中有個 public 目錄，在 public 內的檔案都不會被處理，而是會原封不動的複製到打包後的目錄，所以我們就可以把用來啟動網站的 Server 放在這裡，這樣打包後才會和要輸出的靜態網站放在一起。

請在 public 中建立 app.js，並且輸入以下的程式碼：

上方的程式碼非常簡單，以下分成幾個部分講解：

1. 第 1 到 4 行都是 express 建立 Server 的設置。
2. 第 4 行的 port 指定了 process.env.PORT || 3000 是因為 Heroku 會幫你配置 Port，所以如果有被配置就使用，沒有的話就用 3000。通常在本機都是用 3000 進入。
3. 第 6 行是因為 Vue 打包出來的靜態文件中有 js、css、img 等目錄，所以如果是要載入這些資源，Server 就直接把請求的路徑 req.path 用 res.sendFile 丟回前端，不然會有問題。
4. 第 10 行就是要丟回 index.html 的地方，因為 SPA 的 router 主要都是前端的 JavaScript 控制，所以這裡就不用寫什麼規則，只要是請求一律回傳 index.html 做載入就好（當然是除了 JavaScript 等其他靜態資源之外）。
5. 上方的第 3 和 4 點是有關係的，如果把第 10 行的設置放在第 6 行之前，就不會正確載入 JavaScript 等靜態資源，而是全都會丟回 index.html，這點要注意一下。

完成後就能輸入 npm run build 進行打包囉！

打包 Vue 專案

打包完後可以看到專案中出現了 dist 目錄，在執行前請各位到 package.json 中，裡面有個 scripts 的設置，請替我加上 start 指令：

{
  // 略...
  "scripts": {
    // 略...
    "start": "node dist/app.js" // 請加上這行
  }
}

最後輸入 npm run start 透過 Node.js 執行專案囉！執行後如果沒有噴錯，請打開 http://localhost:3000/，也能看到剛剛用 npm run serve 執行的頁面：

用 express 打造的 server

部署到 Heroku

最後就要把專案部署到 Heroku 了！請先到 Heroku 中建立一個新的 application：

網址：https://dashboard.heroku.com/new-app

完成後請回到 Vue 專案，輸入 heroku login 後隨便點一個 q 以外的字母，會跳出一個視窗要你登入 Heroku，登入完後會顯示登入資訊：

透過 heroku login 登入 Heroku

接著輸入下方指令，將 Heroku 上的應用程式和 Git 做連結（Vue 專案建立時通常都預設會有 Git，沒有的話就自己 git init 吧！）：

heroku git:remote -a 這裡輸入各自 Heroku 的 App 名稱

例如筆者上方建立在 Heroku 上的 App 名稱為 vue-examplary-app ，那指令就如下：

heroku git:remote -a vue-examplary-app

在上傳前請先到專案中的 .gitignore，把 /dist 那行刪掉，否則打包後的程式碼就不會被部署到 Heroku。

記得上方所有的修改都要 commit 哦！一切沒問題後就能把專案上傳到 Heroku 上了：

git push heroku master

上傳成功後請到 Heroku 上 application 的 Setting 頁面，找到下方的 Domains 網址：

找到 Domains 的網址

打開後就能看見精美的畫面囉 🎊

部署到 heroku 上的網站

是不是覺得過程非常簡單，雖然通常要顯示靜態網頁只需要用 GitHub 的 Pages 功能就可以了，不需要大費周章加上 Node.js 然後部署到 Heroku 啟動，更何況 Heroku 還會睡著 😂，但是 Heroku 本身也提供了相當不錯的功能，例如與 GitHub 連結做 CD 自動部署，這個部分也很容易，之後有機會（或是沒梗的話 😆）再寫一篇文章和大家分享！

如果對文章的內容有任何問題，再麻煩留言告訴我，非常感謝 🙌！