我们来玩玩云原生部署系列1 - 部署node.js 应用到Heroku

最近有点时间可以折腾手上的玩具，这周就定个小目标：

准备工作(15 分钟）

我先写一下在Mac上的操作。回头我再整理一份上的版本吧。

首先我们需要注册一个的账号，免费的放心。

在浏览器打开，根据页面指引注册一个免费账号。使用账号你可以免费得到一个Dyno和一个月550小时的使用时间。免费的Dyno上的是会自动休眠的。所以基本上550小时够你整个月玩了。用笔记下你的账号和密码，后面我们会用到。你的账号一般是你的邮箱。

另外你也可以考虑注册一个的账号，也是免费的。以后我们的练习可以用到。在浏览器打开， 根据页面指引注册就是了。这样你也可以把你的 Image推送到 hub里。

如果你还没安装node.js，请从下载LTS版本。

接着，我们安装 CLI，我们会用 CLI生成一个可以直接运行的项目模版，然后把它做进镜像。

npm install -g @angular/cli

跑 CLI命令创建一个项目

$ ng new my-first-heroku-project

我选择了添加 和使用Sass。不过这个并不重要。

$ ng new my-first-heroku-project
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.
html       ]
CREATE my-first-heroku-project/README.md (1037 bytes)
CREATE my-first-heroku-project/.editorconfig (246 bytes)...（此处忽略300行）...added 1345 packages from 1063 contributors and audited 17091 packages in 111.71s
found 0 vulnerabilitiesSuccessfully initialized git.

什么？怎么急着要创建 镜像了？ 不着急，我们先体验一下，然后回来玩。

游戏1: 部署一个node.js项目到 (25 分钟）

不过在玩之前，我们先体验一下。简单来说，就是你随便写一个可以输出hello world 的web服务器，然后把它丢到的一个Dyno里，体验一下自己在网上有个服务器的在跑着的感觉。

那我们先搞一个简单的web服务吧，我们用到的材料很简单：

创建一个目录

创建一个node.js项目

在本地跑起来

用git把这些文件push到的Git

然后剩下的事情就是体验有个服务器在跑的感觉。（还是免费的）

第一步）创建一个目录，我们这期的练习全丢这个目录

$ mkdir MyWorkspaceForHeroku
$ cd MyWorkspaceForHeroku

第二步）然后我们要写一个本地可以跑的node.js项目。我希望的玩具酷一点，但是又懒得写很多东西。那我们用 CLI给我们生成一个项目吧。

第三步）我们当了一回甩手掌柜就得到一个可以跑的node.js 项目，现在我们在本地跑一下

cd my-first-heroku-project/
ng serve

看到下面的输出就是成功了

$ ng serve10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.htmlchunk {main} main.js, main.js.map (main) 11.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.07 MB [initial] [rendered]
Date: 2019-07-24T11:28:59.004Z - Hash: 5d04f920269fed2489e5 - Time: 15127ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

在浏览器打开 :4200 可以看见

现在我们有个可以跑的项目了，接下来需要把项目“包装”一下，这样才能丢给。

第四步）用git把这些文件push到的Git

现在你需要安装的CLI，#-and- 安装后你可以查看版本验证是不是工作正常，以下是我使用的版本

$ heroku --version
heroku/7.26.2 darwin-x64 node-v11.14.0

接下来我们用 CLI创建一个在Dyno里面跑的app。打个比方，你可以想象Dyno就是云里面的一台虚拟服务器，然后你的App被部署在这个服务器里面跑。因为我们使用的是免费的计费计划，所以Dyno可以使用的资源是有限的，也设计得很贴心，一段时间不被调用的app就会自动进入休眠状态，不占用资源。

回到话题上，我们可以开始跟玩游戏了。基本步骤是

登录 CLI

创建app和app对应的git

为修改部分代码

把代码push进app的git

Boom！完成！

好！先执行下面的命令登录

$ heroku auth:login -i
Email [idonttellu@gmail.com]:
Password: **********
Logged in as idonttellu@gmail.com

登录成功后，技术上本地是缓冲了一个登录token，接下来的 CLI命令都会自动带上这个token，这样就知道为你服务了。你要是好奇这个token长什么样子，你可以输入以下命令：

$ heroku auth:token›   Warning: token will expire 07/24/2020›   Use heroku authorizations:create to generate a long-term token
583707b4-ffff-4773-ffff-3e02b3b99a3c     被我mask了：-）

后面我会介绍这个token怎么用，现在先放一下。

我们登录成功后，接下来就可以创建app。

$ heroku create helloheroku-ivy
Creating ⬢ helloheroku-ivy... done
https://helloheroku-ivy.herokuapp.com/ | https://git.heroku.com/helloheroku-ivy.git

我创建了一个app名字叫做-ivy。是不允许app有重复名字的，因为这个app名字是域·名的一部分。如果你自己练习，可以改用自己家宠物的名字:-)

创建好app后，我们修改一下.json，配合的工作。我们要修改.json的主要原因是生成的模版把部分开发阶段的依赖写在下面，这部分不会拉取，会造成git push 后在服务器端出错。我们先来体验一下出错：

$ git init
$ heroku git:remote -a helloheroku-ivy
set git remote heroku to https://git.heroku.com/helloheroku-ivy.git
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
Enumerating objects: 38, done.
Counting objects: 100% (38/38), done.
Delta compression using up to 4 threads
Compressing objects: 100% (36/36), done.
Writing objects: 100% (38/38), 107.04 KiB | 5.35 MiB/s, done.
Total 38 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected** 省略100行 **
remote: -----> Launching...
remote:        Released v3
remote:        https://helloheroku-ivy.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/helloheroku-ivy.git* [new branch]      master -> master

貌似很顺利哈，但是你打开浏览器访问

What the … ? 我们运行 logs --tail看看log吧。

$heroku logs --tail** 省略100行 **
2019-07-25T03:40:18.612022+00:00 heroku[web.1]: Starting process with command `npm start`
2019-07-25T03:40:20.552521+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-25T03:40:20.577775+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-25T03:40:20.454785+00:00 app[web.1]:
2019-07-25T03:40:20.454805+00:00 app[web.1]: > my-first-heroku-project@0.0.0 start /app
2019-07-25T03:40:20.454807+00:00 app[web.1]: > ng serve
2019-07-25T03:40:20.454808+00:00 app[web.1]:
2019-07-25T03:40:20.461605+00:00 app[web.1]: sh: 1: ng: not found
2019-07-25T03:40:20.465924+00:00 app[web.1]: npm ERR! file sh
2019-07-25T03:40:20.466148+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-07-25T03:40:20.466314+00:00 app[web.1]: npm ERR! errno ENOENT** 省略100行 **

出错原因是依赖的ng没有安装

我们按^c退出log tail，把.json调整一下, 在段加上 , 还有上加上三个依赖：

"scripts": {
..."preinstall": "npm install -g @angular/cli@8.1.0 @angular/compiler-cli@8.1.0 typescript@3.4.3 @angular-devkit/build-angular@0.801.0"},
...
"dependencies": {..."@angular/cli": "~8.1.0","@angular/compiler-cli": "~8.1.0","typescript": "~3.4.3"},

保存.json，然后push到git再试试

$ git add .
$ git commit -m "modify package.json, add preinstall script and dependencies"
$ git push heroku master

我们先看log

$ heroku logs --tail
...
2019-07-25T04:08:50.698384+00:00 app[web.1]: chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered]
2019-07-25T04:08:50.701262+00:00 app[web.1]: Date: 2019-07-25T04:08:50.659Z - Hash: 7d5de7561462bbacf7da - Time: 28964ms
2019-07-25T04:08:50.727114+00:00 app[web.1]: ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
2019-07-25T04:08:50.874261+00:00 app[web.1]: ℹ ｢wdm｣: Compiled successfully.

看起来很美，但是浏览器打开还是报错。后台日志显示：

2019-07-25T04:10:31.209479+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=helloheroku-ivy.herokuapp.com request_id=9812b089-a018-4d4e-99ea-cdbba6534c1a fwd="202.45.129.182" dyno= connect= service= status=503 bytes= protocol=https
2019-07-25T04:10:31.725826+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=helloheroku-ivy.herokuapp.com request_id=492e6ea9-ee7c-4fad-b0f7-09faee59be97 fwd="202.45.129.182" dyno= connect= service= status=503 bytes= protocol=https

知道了，我们的程序在后台启用的是8400端口，但是默认只允许访问80端口。怎么办呢？

我个人不太主张正式环境跑 ng serve, 毕竟这个工具只是为了调试方便，其性能差开销大。我们换成用好了。思路是，先在部署完成后触发的预编译命令，然后把预编译好的代码交给去发布。

我们在.json里面做一下修改：

"scripts": {"start": "node server.js",
..."preinstall": "npm install -g @angular/cli@8.1.0 @angular/compiler-cli@8.1.0 typescript@3.4.3 @angular-devkit/build-angular@0.801.0","heroku-postbuild": "ng build --aot --prod"},
..."dependencies": {
..."@angular/cli": "~8.1.0","@angular/compiler-cli": "~8.1.0","typescript": "~3.4.3","express": "4.17.1"},

增加一个.js到项目根目录去启动。在.js 里面，我们允许 去通过.env.PORT指定web 服务的端口。

//Install express server
const express = require('express');
const path = require('path');const app = express();// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/my-first-heroku-project'));app.get('/*', function(req,res) {res.sendFile(path.join(__dirname+'/dist/my-first-heroku-project/index.html'));
});// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

提交修改到git

$ git add .
$ git commit -m "modify package.json to modify scripts and add express dependency. add service.js to initial the express"
$ git push heroku master

BOOM！成功！

预告： 下一个游戏，我们在上玩+-boot