将 Node.js 微服务部署到 ZEIT Now

ZEIT Now是一个部署无服务器应用程序的云平台，我最喜欢 Now 的一点是他们的 DX（开发者体验），它使得将微服务部署到云端变得非常愉快。

在本文中，我们将学习如何安装 Now 并使用单个命令开始部署now。

先决条件

• Node.js 10 LTS 已安装
• 一个终端
• 您选择的代码编辑器
• 一个 ZEIT Now 账户，您可以在这里免费注册

安装

首先，让我们通过运行以下命令now来安装 CLI ：npm

$ npm install -g now

登录

接下来，我们需要在平台中识别自己，nowCLI 提供了一种简单的方法，通过运行：

$ now login

这将要求您提供电子邮件并向您发送一封验证电子邮件，只需单击“验证”即可登录平台，就像魔术一样🔮！

创建您的第一个微服务

我们已准备好开始创建我们的第一个应用microservice程序（或无服务器应用程序，您可以随意命名）。

现在提供了一个示例列表，对于我们的练习，我们将使用 Node.js ⬢，但是嘿！现在也支持其他语言和平台，只需尝试一下你最喜欢的那个 😉

首先从 Node.js 模板运行以下命令：

$ now init nodejs microservice

这将创建一个名为microserviceNode.js 模板的文件夹。

现在是时候将我们的示例部署到云端了，让我们转到该文件夹​​并执行now以查看会发生什么！

$ cd microservice
$ now

在继续我们的下一个技巧之前，让我们先来探索一下我们正在部署的文件：

index.js

request它包含一个带有 Node.js对象的简单函数response，该函数将在对我们的微服务发出的每个请求时执行。

module.exports = (req, res) => {
  res.end(`Hello from Node.js on Now 2.0!`);
};

now.json

它是部署配置文件，用于指定我们项目的名称、我们将要使用的构建器类型、路线等。更多信息可以在他们的文档中找到。

{
    "version": 2,
    "name": "nodejs",
    "builds": [
        { "src": "*.js", "use": "@now/node" }
    ]
}

单一仓库

到目前为止，我们所看到的看起来很简单，但是，真正的力量就在这里now，我们可以混合和匹配不同的微服务来monorepo创建一个完整的无服务器项目。

对于我们的下一个技巧，我们将创建一个Nuxt.js静态应用程序，它将向 Node.js 微服务发出 API 请求，两者都将now使用该monorepo方法进行部署。

让我们创建一个monorepo文件夹然后运行create-nuxt-app，这将为您创建一个基本的 Nuxt.js 应用程序，只需确保Axios在功能部分选择支持，我们稍后会使用它😉。

$ mkdir monorepo
$ cd monorepo
$ npx create-nuxt-app www

我们的前端应用程序几乎已经准备好了，我们需要为我们的monorepo项目添加一个 API，让我们创建一个api文件夹并在其中添加一个 Node.js microservice（不需要创建now.json，我们稍后会处理）。

让我们创建一个bands微服务：

$ mkdir api
$ touch api/bands.js

api/bands.js

module.exports = (req, res) => {
  const bands = [
    {
      name: 'Dio',
      genre: 'Heavy Metal'
    },
    {
      name: 'Anthrax',
      genre: 'Trash Metal'
    },
    {
      name: 'Tenebrarum',
      genre: 'Gothic Metal'
    }
  ]
  res.end(JSON.stringify(bands))
}

是的，我喜欢金属🤘

让我们创建一个部署配置文件来连接 monorepo 中的两个项目。

now.json

{
  "version": 2,
  "name": "monorepo",
  "builds": [
    { "src": "www/package.json", "use": "@now/static-build" },
    { "src": "api/*.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/$1" },
    { "src": "/(.*)", "dest": "/www/$1" }
  ]
}

有关路线如何在其文档中工作的更多信息。

在这里，我们使用两个不同的无服务器应用程序在一个 repo 中创建 API 和 Web 项目，一个由 提供服务@now/node，另一个由 构建@now/static-build。

在部署之前，让我们将以下内容添加到我们的www项目中：

• now-build向文件中添加package.json如下脚本：

"now-build": "API_URL=https://monorepo.julianduque.now.sh npm run generate"

这将设置Axios为在正确的 URL 中发现我们的 API 端点（请确保在此处使用您的别名），并将告诉now如何为 Nuxt 生成静态站点。

• 让我们更新pages/index.vue页面以执行我们用 Node.js 实现的 Bands 微服务

export default {
  components: {
    Logo
  },
  data: function () {
    return {
      bands: []
    }
  },
  methods: {
    async loadBands () {
      try {
        this.bands = await this.$axios.$get('/api/bands.js')
      } catch (err) {
        console.error(err)
      }
    }
  }
}

• 添加一个按钮<template>并使用 Vue.js 渲染项目

<a v-on:click="loadBands">Load Bands</a>
<ul v-bind:key="band.name" v-for="band in bands">
  <li>{{ band.name }} - {{ band.genre }}</li>
</ul>

瞧！现在，我们已经将两个无服务器应用程序连接到一个 monorepo 中了！

我希望你喜欢这个教程，如果你会说西班牙语，我邀请你参加我在Twitch上每两周一次的 Node.js 秀- Node.js ¡En Vivo! 💜