將 Node.js 應用程序部署到 Heroku
簡介
有許多免費託管服務可用於讓您的 Node.js 應用程序公開運行。 Heroku 就是其中一項服務，它允許您在 Web 上部署、管理和擴展您的應用程序。
在本文中，我們將構建一個簡單的 Node 和 Express.js 應用程序，用於縮短給定鏈接，並將其部署到 Heroku。
創建 Node.js URL 縮短器
為了使開發過程更容易，我們將使用 Express，這是一個輕量級的 Web 框架，靈活且易於定制。 Express 帶有一個應用程序生成器，但我們將從頭開始。
創建項目目錄
讓我們cd 進入工作區並為項目創建一個新目錄：
$ mkdir url-shortener
正在初始化 npm
接下來讓我們初始化npm，並用它來啟動我們的項目：
$ npm init
npm init 會問一系列問題（包名稱、版本、描述等）。為簡單起見，讓我們通過點擊 RETURN 跳過所有這些 對於每個提示。然後節點會生成一個 package.json 文件並打印到終端：
{
"name": "url-shortener",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
}
package.json 中的字段 （包名、描述、作者等）可以隨時更新，不用太擔心。
我們在這里手動添加的是 "start": "node app.js" .當我們將應用程序部署到 Heroku 時，這將非常重要。
Heroku 需要知道如何 運行我們的應用程序，這通常通過 Procfile 完成 .由於我們的應用程序非常簡單，一個 Procfile 將是多餘的，只需簡單地定義我們的應用程序應該通過簡單地執行 node app.js 來運行就足夠了 命令。
安裝 Express
有了這些，我們就可以安裝 Express了：
$ npm install express --save
搭建節點服務器
安裝 Express 後，我將在名為 app.js 的文件中創建一個非常簡單的應用程序 ：
const express = require('express');
const app = express();
const path = require('path');
const port = 3000;
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(port, () => console.log(`url-shortener listening on port ${port}!`));
此時的應用程序實際上只是設置它所需的 Express 樣板，具有一個在端口 3000 上返回 HTML 頁面的單個路由處理程序 .
讓我們繼續定義頁面，它將接受我們想要縮短的 URL。它只包含一個標題和一個接受 URL 的簡單表單：
<h1>URL Shortener</h1>
<form method="POST" action="/url">
<input type="text" name="url" />
<input type="submit" />
</form>
我們可以通過執行來測試應用是否運行良好：
$ node app.js
由於我們添加了 "start" : "node app.js" 命令到我們的 package.json 文件，我們也可以使用 NPM 命令運行它：
$ npm start
並導航到 http://localhost:3000 ：
處理表單提交
當頁面正確呈現時，沒有實際處理 POST 的邏輯 通過 /url 的表單發送的請求 端點。
為了從通過表單發送的請求中獲取 URL，我們將使用 body-parser 模塊並從請求正文中提取它，所以讓我們繼續require 並設置它以供使用：
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.urlencoded());
完成後，我們可以通過 req.body 提取請求的正文 所以讓我們繼續創建另一個請求處理程序，它從正文中打包 URL 並通過響應將其發送回：
app.post('/url', function(req, res) {
const url = req.body.url;
res.send(url);
});
這仍然不是我們想要的，因為我們要返回整個 URL，而不是縮短的版本。
縮短網址
要完成我們的 Node 應用程序，唯一剩下要做的就是在發送回 URL 之前實際縮短 URL。為此，我們可以使用 node-url-shortener 模塊。讓我們通過 npm 安裝它：
$ npm install node-url-shortener --save
然後在應用中 require 包：
const urlShortener = require('node-url-shortener');
最後，讓我們添加另一個代碼塊，在發送回 URL 之前縮短它：
app.post('/url', function(req, res) {
const url = req.body.url;
urlShortener.short(url, function(err, shortUrl){
res.send(shortUrl);
});
});
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
urlShortner 有一個 short() 接受兩個參數的方法：原始 URL 和回調函數。縮短的 URL 被傳遞到回調函數，然後傳遞到 res.send() .
讓我們啟動應用程序並對其進行測試：
輸入網址後，我們會看到：
部署到 Heroku
註冊 Heroku 並安裝 CLI
現在已經構建了應用程序，是時候考慮 Heroku。如果您沒有帳戶，請前往 signup.heroku.com 並創建一個。
擁有帳戶後，接下來要做的是安裝 Heroku 的 CLI 工具，這些工具用於部署。 Heroku 在開發中心提供安裝說明。
推送到 Heroku
通過 Git 部署到 Heroku。一旦您了解了它的工作原理，它就非常簡單。本質上，您可以通過推送到遠程倉庫來部署到 Heroku，就像推送到 GitHub 一樣。
因為這是一個新項目，所以需要初始化Git：
$ git init
現在，我們已準備好添加並提交所有項目文件。不過，在此之前，我們將添加一個 .gitignore 文件，因為我們不想要 node_modules 要提交的目錄。它應該在部署時由 npm 生成，而不是提交到源代碼管理。
在你的 .gitignore 文件，只需添加：
node_modules
有了這個，我們可以添加和提交：
$ git add .
$ git commit -m 'initial commit'
項目提交後，我們需要創建一個與我們的 Node 應用程序對應的 Heroku 應用程序：
$ heroku create
Creating app... !
▸ Invalid credentials provided.
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/browser/abcd1234-b6a7-4df4-bb42-0eaf987d0637
Logging in... done
Logged in as [email protected]
Creating app... done, ⬢ nameful-wolf-12818
https://nameful-wolf-12818.herokuapp.com/ | https://git.heroku.com/nameful-wolf-12818.git
如果這是您第一次使用 CLI，Heroku 會要求您通過瀏覽器登錄。過程非常簡單，按照說明操作即可。
完成後，Heroku 會返回新創建的應用名稱和 URL（您的應用名稱與我的不同）。如果您瀏覽到該 URL，您將看到 Heroku 歡迎頁面。
這仍然不是我們的 URL 縮短應用程序，只是一個公共 Heroku 應用程序，我們將在其中部署我們自己的應用程序。
部署應用
在之前的 heroku create 命令，一個新的遠程將被添加到您的 Git 存儲庫，允許您使用這樣的簡單命令部署到 Heroku：
$ git push heroku master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 326 bytes | 326.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
...
...
...
remote: Verifying deploy... done.
To https://git.heroku.com/nameful-wolf-12818.git
5cb9118..dd0bacd master -> master
既然應用部署成功了，我們可以繼續啟動它：
但是，由於端口不匹配，我們會遇到問題。在我們的應用程序中，我們硬編碼它使用端口 3000 ，但是 Heroku 在不同的端口上工作，這種衝突會使我們的應用程序崩潰。
為了讓應用程序在本地和 Heroku 上都能工作，我們將端口更改為 either 3000 或 process.env.PORT ，由 Heroku 設置：
const port = process.env.PORT || 3000;
再次部署應用，刷新頁面，一切正常！
結論
有許多免費託管服務可用於讓您的應用程序公開運行。 Heroku 就是其中一項服務，它允許您在 Web 上部署、管理和擴展您的應用程序。
我們構建了一個簡單的 Node 和 Express 應用程序，通過 node-url-shortener 縮短提供的 URL 模塊。然後，我們為部署該應用程序做好了準備，並最終在 Heroku 上啟動並運行它。
