将Node应用持续部署到Heroku的方法

588 阅读7分钟

CircleCI orbs是YAML配置的可重用包,它将重复的配置片段浓缩到一行代码中。自2018年推出以来,CircleCI orbs注册表已被开发人员、开发团队以及那些希望帮助开发人员将其服务无缝集成到持续集成管道的公司所使用。

在本教程中,我们将展示如何使用CircleCI orbs将一个Node.js应用程序持续部署到Heroku(最流行的托管平台之一)。

前提条件

要继续学习本教程,你首先需要一些东西。

有了这些,你就可以开始学习了。

克隆一个Node.js API项目

我们要在Heroku上托管的应用程序是一个简单的Node.js API项目,由一个返回 "todos "列表的单一路由组成。

由于这个练习的重点是将一个应用程序部署到Heroku平台上,因此没有必要为创建一个新的Node.js应用程序的细节而烦恼。只需从这个 repo 中克隆一个现成的。

要克隆该项目,请运行。

git clone https://github.com/coderonfleek/simple-node-api.git

这将把Express.jsAPI项目克隆到你的系统上。这个应用程序的入口是server.js 文件,其中包含这段代码。

const express = require("express");
const routes = require("./routes");

const app = express();
const port = process.env.PORT || "1337";
app.set("port", port);

app.use('/', routes);

app.listen(port, () => console.log(`Server running on localhost:${port}`));

这段代码在1337端口创建并公开了一个新的Express.js应用程序。然后,该应用程序被设置为使用routes.js 文件中定义的路由。

routes.js 文件创建了一个新的 Express.js 路由器,并公开了一个单一的/todos 路由器,它返回todo.js 文件中定义的待办事项的数组。然后,它导出了路由器对象。下面是代码。

const express = require('express');
const todos = require("./todos");

const router = express.Router();

router.get("/todos", function(req, res) {
  res.json(todos);
});

module.exports = router;

首先安装依赖项,试一试这个项目。在项目的根目录下,输入。

npm install

然后用命令运行该应用程序。

node server.js

该应用程序应该在地址http://localhost:1337 。打开你喜欢的浏览器,访问/todos 路由:http://localhost:1337/todos

Screenshot of what the route returns

如上所示,该路由返回一个todo对象的数组,每个对象都有一个idtask 的名字。

现在在你的GitHub账户上为这个项目创建一个新的仓库,并将项目推送到你刚刚创建的仓库中。

为部署Node.js项目做准备

当没有指定Heroku Procfile时,Heroku会用npm start 命令启动一个Node.js项目。这个命令表明,Heroku需要在我们的package.json 文件中加入一个start 脚本,以便它启动我们的应用程序。

这意味着我们需要在我们的package.json 文件中创建一个start 脚本,以指示Heroku如何启动该应用程序。如果你使用的是克隆的项目,你可以跳过这个步骤。否则,到package.jsonscripts 部分(现在它只包含一个test 脚本),然后添加start 脚本。

….
“scripts” : {
  ……,
  “start”: “node server.js”

}

有了这个脚本,Heroku现在可以成功启动我们的应用程序。

在Heroku上创建一个应用程序

下一步是创建一个Heroku应用程序。这个应用程序将映射到我们的部署,帮助我们管理我们部署的应用程序。它将提供一些功能,如指标、扩展能力和对应用程序日志的访问。

进入你的Heroku仪表板,通过点击新建并选择创建新的应用程序来创建一个新的应用程序。

这将打开应用程序的创建表格。

image.png

我们将应用程序命名为simple-node-api-circleci ,但你可以随意给它取任何名字。只要确保该名称不包含空格或不适合URL的字符。

点击创建应用来设置你的新应用。

在CircleCI上设置项目

将我们的应用程序部署到Heroku的下一步是将我们GitHub仓库中的应用程序连接到CircleCI。

进入你的CircleCI仪表板,在添加项目部分添加项目。

Screenshot of the dashboard

在你的项目旁边(在这里是simple-node-api-updated ),点击Set Up Project按钮。

Screenshot Set Up Project form 在这个屏幕上,你会立即看到一个错误,说在项目中找不到CircleCI的配置文件

这是可以理解的,因为我们还没有包括我们的管道配置文件。我们将在本教程的后面进行。

现在,选择Write your own using our starter config.yml template 。在该页面,选择skip this step ,然后选择Use existing config 。构建将运行并失败。

在CircleCI上配置Heroku访问

为了从CircleCI推送我们的项目到Heroku,我们需要在CircleCI和Heroku之间配置一个认证的握手。通过在CircleCI项目的设置中创建两个环境变量来配置握手。

  • **HEROKU_APP_NAME**是你的Heroku应用程序的名称(在这里是simple-node-api-circleci )。
  • HEROKU_API_KEY是你的Heroku账户API密钥。这可以在你的Heroku账户的账户标签下的账户设置中找到。滚动到API Key部分,点击Reveal来复制你的API Key。

进入你的CircleCI仪表板,点击你的项目的设置

CircleCI project settings

在设置页面的侧边栏菜单上,点击构建设置下的环境变量

Environment Variables form

在环境变量页面,创建两个名为HEROKU_APP_NAMEHEROKU_API_KEY 的变量,并输入它们的值。

有了这些,我们的CircleCI配置将能够在Heroku平台上进行认证部署。

使用Heroku orb来部署应用程序

现在到了主要的行动区域:我们的部署管道。这里有一个提示:这将是最简单的一步。这是不是让你的脸上露出了笑容?我想是的

这一步对于每一个CI工具来说都不容易,但对于CircleCI orbs来说,我们可以创造奇迹。这是因为CircleCI orbs注册表有一个现成的轨道,用于将应用程序部署到Heroku。我们将在我们的CircleCI配置中使用Heroku orb来部署我们的应用程序。

在你的项目的根部,创建一个名为.circleci 的文件夹,并在其中创建一个名为config.yml 的文件。添加这个配置。

version: 2.1
orbs:
  heroku: circleci/heroku@1.2.6
workflows:
  heroku_deploy:
    jobs:
      - heroku/deploy-via-git

这就是全部吗?你肯定是这样的!记住,我告诉过你,我们会创造奇迹。

在上面的配置中,我们拉入了Heroku orbcircleci/heroku@1.2.6 ,它自动让我们访问一套强大的Heroku作业和命令。

其中一个作业是heroku/deploy-via-git ,它可以将你的应用程序从GitHub repo直接部署到你的Heroku账户。

现在,你可能有几个问题。Heroku CLI是如何安装的?代码是什么时候从 repo 中签出的?认证凭证是如何获取的?Heroku的部署命令是什么时候运行的?

这就是orbs的真正威力所在。前面问题中的所有过程都已经被Heroku的轨道抽象出来了。拉入兽皮可以确保我们有一个部署到Heroku的环境,同时工作检查出我们的代码,将其部署到Heroku,并启动应用程序。它抽象了这个过程中的细枝末节。

保存配置并将你的修改推送到你的GitHub仓库。这将立即触发通过CircleCI向Heroku部署的过程。

Screenshot of successful deployment

成功了!要了解Heroku orb在幕后做了什么,请点击构建过程。

Build process details

你不需要定义这些步骤,因为轨道为你处理了一切。

要确认应用程序已经成功部署,并且现在正在运行,请访问链接https://YOUR_HEROKU_APP_NAME.herokuapp.com 。在本教程中,这个URL将是https://simple-node-api-circleci.herokuapp.com/todos 。这将按照预期返回我们的todos列表。我使用了一个用于Chrome的JSON格式化插件,以获得更好的可见性。

Application using formatter plugin

就这样,你拥有了它。通过CircleCI orbs的力量,Node.js API项目已经在很少的步骤中成功部署到Heroku。

总结

CircleCI orbs是CI/CD世界中的一个游戏规则改变者。抽取大量繁琐、容易出错的模板配置代码,以提供简单、稳定和强大的抽象,帮助开发人员专注于他们最擅长的事情:成功部署应用程序。

请务必检查CircleCI orbs注册表,以寻找适合您的编程语言和部署偏好的orbs。与你的同事们分享这个教程。让他们知道,有了CircleCI orbs,你不需要重新发明车轮。

编码愉快!