前言

假如你不熟悉 Web 开发，你会花很多时间学习如何用 HTML、CSS 和 JavaScript 来构建静态站点。

随后，你就可以开始了解如何使用诸如 React、VueJS 或 Angular 等流行框架了。

然而，在尝试了一些新的想法并在本地运行一些网站后，你可能想知道如何真正地部署网站或应用程序。结果是，有时候要知道从哪里开始可能会很困难。

我觉得，使用 Heroku 和 Express 是一种最容易的方式。

Heroku 是一种云平台，支持多种编程语言和框架。

解决方案很多，下面罗列一些（不是我的赞助商）：

搜索这些服务，看看哪个最适合你的需求。

我个人觉得 Heroku “开箱即用”最快也最容易。免费服务可能对资源有限制，不过，我建议可以用它进行测试。

这个例子使用 Express 服务器来管理一个简单的网站，下面是概括的步骤：

  • 用 Heroku、Git、npm 来设置
  • 创建 Express.js 服务器
  • 生成静态文件
  • 部署到 Heroku

总计约需要 25 分钟（如果想在静态文件上多花点时间，那就需要更长时间）。

假设你在阅读这篇文章时已经了解：

  • 基础的 HTML、CSS 和 JavaScript 知识
  • 基本的命令行的用法
  • Git 版本控制的基础知识

代码在这个仓库中。

设置

对任何项目来说，第一步都是配置你所需要的工具。

你必须准备好：

创建一个新目录，初始化 Git 仓库

用命令行新建项目目录并访问该目录。

$ mkdir lorem-ipsum-demo
$ cd lorem-ipsum-demo
$ git init

⚠️  这个步骤非常重要，因为 Heroku 依赖于 Git 把本地机器上的代码部署到它的云服务器上。⚠️

你还可以创建一个 README.md 文件，稍后编辑。

$ echo "Edit me later" > README.md

登录 Heroku CLI，创建一个新项目

你可以通过 HerokuCLI（命令行界面）登录 Heroku。你需要一个免费的 Heroku 账户。

以下是两种选择。默认情况下，Heroku 允许通过 Web 浏览器登录。你可以使用 -i 通过命令行登录。

$ heroku login -i

你现在可以新建一个 Heroku 项目了。我的项目名字是 lorem-ipsum-demo。

$ heroku create lorem-ipsum-demo

为项目命名：

  • 如果在命令中没有指定名字，Heroku 会随机生成一个项目名
  • 这个名字将成为项目 URL 的一部分，所以你可以选择自己喜欢的名字
  • 它还意味着你需要选择一个唯一的项目名，而其他人不会使用它
  • 你可以稍后重命名项目（所以不必担心现在就要获得一个完美的名称）

初始化新的 npm 项目并安装 Express.js

下一步，可以通过创建 package.json 文件对新 npm 项目进行初始化。用下面的命令来完成它。

⚠️  这个步骤非常关键，在构建应用程序时，Heroku 依赖于你提供的 package.json 文件，以了解这是一个 Node.js 项目⚠️

$ npm init -y

然后，安装 Express。Express 是 NodeJS 中广泛使用的服务器框架。

$ npm install express --save

终于可以开始写代码了！

写一个简单的 Express 服务器

接下来，我们将创建一个名为 app.js 的文件，它在本地运行 Express 服务器。

$ touch app.js

这个文件将成为应用程序的入口点。也就是说，启动应用程序需要使用以下命令：

$ node app.js

但首先，你需要在你的文件里写一些代码。

编辑 app.js 的内容

用你喜欢的编辑器打开 app.js，编写下面的代码，然后保存。

// create an express app
const express = require("express")
const app = express()

// use the express-static middleware
app.use(express.static("public"))

// define the first route
app.get("/", function (req, res) {
  res.send("<h1>Hello World!</h1>")
})

// start the server listening for requests
app.listen(process.env.PORT || 3000, 
	() => console.log("Server is running..."));

我们快速分解代码来进一步了解它：

  • 头两行只需要 Express 模块​​，然后创建一个 Express 应用实例
  • 接下来的一行需要使用 express.static 中间件。通过这种方式，可以服务于指定目录的静态文件（例如 HTML、CSS 和 JavaScript）。本例中，服务于 public 文件夹中的文件。
  • 接下来的一行使用 app.get() 定义 URL 路径。任何发给根 URL 的 URL 请求都会得到一个简单的 HTML 消息响应。
  • 最后一部分是启动服务器，查看 Heroku 使用哪个端口，如果在本地运行，则默认为 3000。

⚠️ 在最后一行使用 process.env.PORT || 3000 对成功部署应用程序非常重要。⚠️

如果你保存 app.js，使用以下命令启动服务器：

$ node app.js

你就可以通过浏览器访问 localhost:3000，看看服务器是否正常运行。

创建静态文件

接下来要创建一个静态文件。当用户访问项目时，他们会提供 HTML、CSS 和 JavaScript 文件。

在 app.js 中，你曾经告诉 express.static 中间件服务于 public 文件夹中的静态文件。

当然，首先要创建这样一个文件夹和其中包含的文件。

$ mkdir public
$ cd public
$ touch index.html styles.css script.js

编辑 HTML 文档

用你喜欢的文本编辑器打开 index.html，为页面提供基本的结构。

以下示例为 LoremIpsum 生成器创建了一个简单的登录页面，你可以自由修改。

<!DOCTYPE html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
  <p>How many paragraphs do you want to generate?</p>
  <input type="number" id="quantity" min="1" max="20" value="1">
  <button id="generate">Generate</button>
  <button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

编辑 CSS 文件

然后，编辑 CSS 文件 styles.css。请确认在 HTML 文件中链接这个文件。

Lorem Ipsum 示例使用了下面的 CSS。同样，你可以自由发挥修改它。

h1 {
	font-family: 'Alegreya' ;
}

body {
	font-family: 'Source Sans Pro' ;
	width: 50%;
	margin-left: 25%;
	text-align: justify;
	line-height: 1.7;
	font-size: 18px;
}

input {
	font-size: 18px;
	text-align: center;
}

button {
	font-size: 18px;
	color: #fff;
}

#generate {
	background-color: #09f;
}

#copy {
	background-color: #0c6;
}

编辑 JavaScript 文件

最后，你需要编辑 JavaScript 文件 script.js，让你的网页更具有交互性。

下面的代码为 Lorem Ipsum 定义了两个基本功能。我用的是 JQuery，操作起来简单快捷。

$("#generate").click(function(){
	var lorem = $("#lorem");
	lorem.html("");
	var quantity = $("#quantity")[0].valueAsNumber;
	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
	for(var i = 0; i < quantity; i++){
		lorem.append("<p>"+data[i]+"</p>");
	}
})

$("#copy").click(function() {
	var range = document.createRange();
	range.selectNode($("#lorem")[0]);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand("copy");
	window.getSelection().removeAllRanges();
	}
)

注意，这里的 data 列表被截断，以便更容易显示。在实际的应用里，这是一个较长的完整段落列表。你可以在仓库里看到全部的文件，或者在这里找到原始的来源。

部署你的应用程序

写好静态代码，检查之后，就可以部署到 Heroku 了。但还需要做些事情。

创建 Procfile

Heroku 需要一个 Procfile 才能知道如何运行应用程序。

Procfile 是一个“进程文件”，用于告诉 Heroku 运行哪个命令来管理给定的进程。本例中，命令将告诉 Heroku 如何在 Web 上启动服务器进行监听。

用以下命令创建一个文件：

⚠️  这个步骤很重要，因为没有 Procfile，Heroku 就不能让服务器在线。⚠️

$ echo "web: node app.js" > Procfile

注意 Procfile 没有文件扩展名（例如 “txt”、“jason”)。

使用命令 node app.js 在本地运行服务器。

向 Git 添加和提交文件

还记得在设置时初始化了一个 Git 仓库，或许你已经向其中添加并提交了一些文件。

在部署到 Heroku 之前，需要添加所有文件并 commit。

$ git add .
$ git commit -m "ready to deploy"


最后一步是 push 到 Heroku 的 master 分支。

$ git push heroku master

在 Heroku 构建和部署应用程序的过程中，应该可以看到命令行输出了大量信息。

如果看到 Verifying deploy... done，就说明构建成功了。

你现在可以打开浏览器，访问 xxx（你定义的项目名）.herokuapp.com，可以看到你的应用程序将被托管在网络上，大家都可以访问了！

回顾

下面是把一个简单的 Express 应用程序部署到 Heroku 的步骤：

  • 新建目录，初始化一个 Git 仓库
  • 登录到 Heroku CLI，创建一个新项目
  • 初始化一个新的 npm 项目，并安装 Express.js
  • 编辑 app.js 的内容
  • 修改静态 HTML、CSS 和 JavaScript 文件
  • 创建一个 Procfile
  • 添加并 commit 文件到 Git 仓库，然后将其 push 到 Heroku 的 master 分支

如果应用程序不能正常运行？

有时候，即便网络上的教程已经比较全面，你实际做的项目仍然可能不能正常运行。

下列的步骤可以帮助你调试一些可能遇到的常见错误：

  • 你是否已经初始化项目文件夹中的 Git 仓库？检查是否已运行 git init
  • 你创建了 package.json 文件吗？检查是否已运行 npm init -y
  • 服务器是否运行？请确保 Procfile 使用正确的文件名启动服务器，确认有 web: node app.js ，而不是 web: node index.js
  • Heroku 知道要监听的端口吗？确认你在 app.js 文件使用了 app.listen(process.env.PORT || 3000)
  • 静态文件中是否包含错误信息？在本地运行，检查是否有 bug

谢谢阅读！这是完整的 demo。

原文：How to deploy your app to the web using Express.js and Heroku，作者：Peter Gleeson