【實作紀錄】Heroku × Angular 佈署

做完的專案如果沒有佈署，就只能在本地執行。而部署到網路上可以透過很多管道，像是Heroku、GitHub Page、AWS…等等。

本文選擇使用Angular的專案佈署至HEROKU。

主要流程

1. 建立Github repository
2. 建立Heroku 專案
3. Angular 專案 (package.json設定、安裝依賴項、建立server.js)
4. 補充

建立Github repository

請參考【實作分享】在GitHub上佈署你的網頁之建立GitHub repository

建立Heroku 專案

1.新增一Heroku專案

2.與Github 連結

3.設定

Enable Automatic Deploys按下的話，只要在GitHub上該Branch有變動則會自動佈署到當前的Heroku專案上。

如果沒有勾選自動佈署，案最下面的Deploy Branch則會進行手動佈署。

建立Angular專案

1.建立專案

ng new test // 建立專案
cd test // 進到專案資料夾

2.與Github連結

git remote add origin <倉庫的網址>
git add .
git commit -m "initial commit"
git push -u origin master

3.佈署前設定

3-1.package.json

• 更改 dependencies

將”devDependencies”:{}中的三個項目複製並貼上到"dependencies": {}中

"@angular/cli": "...",
"@angular/compiler-cli":"...",
"typescript": "..."

• 更改 script

在 sciprt:{} 中加入

"heroku-postbuild": "ng build --prod" // 讓HEROKU知道要編譯前端資源
"start": "node server.js",

• 加上engines:{}

要讓HEROKU知道node及npm版本，與開發版本保持一致。找出當前的node及npm版本

npm -v
node -v

查看完後加在”devDependencies”: {} 後

"devDependencies": {
    ...
},
"engines": {
    "node": "14.17.4",
    "npm": "6.14.14"
}

3–2.安裝依賴項

在本地端我們使用ng serve來運行，上Heroku則需要express協助我們運行

// 提供 異步 require
npm install enhanced-resolve@3.3.0 --save-dev
// 安裝 express
npm install express path --save

3–3.建立server.js

在根目錄下建立server.js(與/src、/dist、/node_modules同層)

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/<你的專案名稱>'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/<你的專案名稱>/index.html'));
});

app.listen(process.env.PORT || 8080);

補充：process.env.PORT || 8080，這邊不能只有寫8080，一定要給process.env.PORT，否則Heroko上去後會開不起來

3-4.完成

將目前的專案儲存後推上GitHub

git add .
git commit -m "heroku test"
git push 

若此時有勾選自動佈署，則可以直接到HEROKU專案點選Open App查看結果。若沒有勾選，則回到HEROKU專案點選Deploy Branch即完成。

4.補充

1.Heroku Deploy成功，點開後顯示Application Error

檢查是否有漏掉安裝項(如:express沒有install)、或是檢查package.json是否有沒有設定到的(如:script、engines)、或是server.js放錯層

不行就查看log

2. Heroku Deploy成功，點開之後畫面空白

檢查server.js的sendFile路徑是否正確

3. 若是要佈署Angular universal

則需將sciprt的值修正為

“start”: “node dist/ssr-angular/server/main.js”,
“heroku-postbuild”: “ng build && ng run ssr-angular:server”,

How to Deploy Angular Application to Heroku