如何將我的 Typescript Node.js 應用程序部署到 Heroku？

Question

在本地測試時，我以前運行過：

"build-live": "nodemon --exec ./node_modules/.bin/ts-node -r dotenv/config -- ./index.ts"

然后我想我的 Procfile 應該是這樣的：

web: ./node_modules/.bin/ts-node -- ./index.ts

但它說找不到模塊“typescript”，即使它在package.json 。 我在幾個地方讀到ts-node不是部署到 Heroku 的方式，所以我不知道該怎么做。

更新：我想我應該編譯它，所以我試過：

web: ./node_modules/.bin/tsc --module commonjs --allowJs --outDir build/ --sourceMap --target es6 index.ts && node build/index.js

這成功了，但是在實際運行它時，我正在使用的一堆庫得到“找不到模塊'...'”。

Answer 1

或者，您可以將 TypeScript 編譯為安裝后掛鈎並運行node build/index.js作為唯一的 Procfile 命令：

您的package.json應該包含在npm install和節點進程啟動之前執行的 postinstall 提示：

"scripts": {
  "start": "node build/index.js",
  "build": "tsc",
  "postinstall": "npm run build"
}

然后，您可以按原樣保留 Procfile：

web: npm start

Heroku 在這里記錄了這種“基於部署的構建”方法。

Answer 2

您給 Heroku 的命令是通過編譯 index.ts 和依賴項並在 index.js 處啟動節點來啟動網絡“進程”。 根據時間的不同，index.js 在節點啟動時可能存在也可能不存在。

在啟動應用程序時，您需要已經編譯好源代碼。 例如， web 應該只是web: node index.js或類似的。

每個構建過程都不同，因此您需要為自己的設置弄清楚這一點。 但是，假設您有一個經典的設置，您推送到 git，然后 Heroku 獲取更改並使用新的 slug 更新應用程序。 您可以只在本地編譯，並在存儲庫中包含 index.js 和任何其他構建輸出，以便在 Heroku 使用的 slug 中提供它。

更好的方法是使用與 Heroku 集成的構建服務器。 在那里完成構建后，將其配置為將構建結果發送到 Heroku。 Travis有這樣一個簡單的設置。 這樣你就不需要在你的存儲庫中包含構建輸出，這被認為是一種反模式。

---

在側節點上，嘗試使用tsconfig.json來保留 tsc 配置。 它將使您不必到處編寫如此長的命令行。

Answer 3

Fabian 說我們可以這樣做：

"scripts": {
  "start": "node build/index.js",
  "build": "tsc",
  "postinstall": "npm run build"
}

在我寫這篇文章時，我對此進行了測試，並且可以聲明： postinstall不是必需的，因為構建腳本是由 Heroku 運行的。 如果您想在沒有構建腳本的情況下執行此操作，則可以使用 heroku-postbuild，它將在安裝依賴項后運行tsc進行編譯。

Answer 4

我的問題是缺少 Typescript npm 模塊。 將應用程序部署到 Heroku 時，未找到 Typescript 編譯器tsc 。

Heroku 部署過程（正確地）不安裝開發依賴項，在我的例子中，Typescript 模塊是devDependencies 的一部分，因此tsc命令沒有在 Heroku 平台上運行。

解決方案1

將typescript添加到依賴項： npm i typescript -s

解決方案2

• 打開 Heroku 控制台：

• 選擇控制台類型：

• 運行命令npm i typescript && npm run tsc

Answer 5

您可以將打字稿從 devDependencies 移動到依賴項。

Answer 6

安裝 typescript 作為開發依賴項（參見https://www.typescriptlang.org/download ）。 構建完成后，您的應用就不再需要打字稿了！

npm install -D typescript

然后在你的package.json ：

{
  "main": "index.js", // <- file will be generated at build time with `tsc`
  "scripts": {
    "build": "tsc",
    "start": "node ."
    "start:dev": "ts-node index.ts" // idem, install ts-node as a dev dependency
  }
}

這里的關鍵點是"build": "tsc" 。

為什么？

Heroku 確實在構建期間安裝了所有依賴項，並在部署應用程序之前刪除了開發依賴項（來源在這里）。

Node.js 部署將在構建期間自動執行應用程序的build腳本（自 3 月 11 日起。2019 年來源在這里）

Answer 7

就我而言，我從“devDependencies”刪除了一些依賴項到“dependencies”，所以它是這樣的：

"dependencies": {
    // The other dependencies goes here, I don't touch them.
    // But all TS dependencies I remove to here. 
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.2.3",
    "ts-loader": "^8.0.18"
},