Manually deploying a Nuxt project is pretty easy when teams are small. However, as projects and teams grow, they usually turn to continuous integration and deployment (CI/CD) in their DevOps to automate their testing and deployment. This is when deployments — and the setup of deployments — can get complicated.

当团队规模较小时，手动部署Nuxt项目非常容易。 但是，随着项目和团队的成长，他们通常会在DevOps中转向持续集成和部署(CI / CD)，以自动进行测试和部署。 在这种情况下，部署以及部署的设置可能会变得很复杂。

In this article, we’ll look at how to easily set up an automated CI/CD system for a Nuxt project using Heroku and CircleCI. We’ll walk through all the details, from setting up your GitHub repository to automating your tests to pushing your code changes. Then we’ll look at some suggested next steps.

在本文中，我们将研究如何使用Heroku和CircleCI轻松为Nuxt项目设置自动化的CI / CD系统。 我们将详细介绍所有细节，从设置GitHub存储库到自动化测试到推送代码更改。 然后，我们将讨论一些建议的后续步骤。

什么是Nuxt.js？ (What Is Nuxt.js?)

First, here’s a little background on Nuxt and why developers might choose it as part of their stack.

首先，这里是有关Nuxt的一些背景知识，以及为什么开发人员可能选择它作为其堆栈的一部分。

When Vue was first released, developers fell in love. With its simple template syntax and component structure, Vue makes it easy to spin up beautiful single-page applications (SPAs) with ease.

Vue首次发布时，开发人员坠入爱河。 凭借其简单的模板语法和组件结构，Vue使轻松轻松启动漂亮的单页应用程序(SPA)变得容易。

However, developers soon realized SEO was a problem. Since SPAs are deployed as a shell and the content isn’t inserted until runtime, developers learned it could be difficult for search engines to accurately index the contents. Because of this, developers needed a solution for handling server-side rendering (SSR) of their Vue applications.

但是，开发人员很快意识到SEO是一个问题。 由于SPA是作为外壳部署的，其内容要等到运行时才能插入，因此开发人员了解到搜索引擎可能很难准确地为内容建立索引。 因此，开发人员需要一种解决方案来处理其Vue应用程序的服务器端呈现(SSR)。

Enter Nuxt.

输入Nuxt 。

Nuxt is an open-source framework that combines all of the oft-used Vue libraries, bundling in Vue Router, Vuex, and Vue server-side rendering (SSR), to provide Vue.js developers with the architecture for a smoother development experience. With Nuxt, developers can get an SEO-friendly Vue application (with SSR) up and running within minutes.

Nuxt是一个开源框架，它结合了所有常用的Vue库，并捆绑在Vue Router ， Vuex和Vue服务器端渲染(SSR)中，为Vue.js开发人员提供了更流畅的开发体验。 使用Nuxt，开发人员可以在几分钟内启动并运行SEO友好的Vue应用程序(带有SSR)。

我们的样本项目 (Our Sample Project)

Now let’s look at our sample project and deployment setup. For this project, we’ll be using GitHub as our repository, Heroku as our host, and CircleCI as our CI/CD tool.

现在，让我们看一下示例项目和部署设置。 对于此项目，我们将使用GitHub作为存储库，使用Heroku作为宿主，使用CircleCI作为CI / CD工具。

Heroku is a PaaS solution that makes it easy to deploy and manage apps. CircleCI provides cloud-based CI/CD, running automated jobs in containers as soon as the project code is pushed to GitHub. These jobs perform tests, send success or failure notifications, and then deploy built applications to cloud-service environments.

Heroku是一种Pa​​aS解决方案，可轻松部署和管理应用程序。 CircleCI提供基于云的CI / CD，将项目代码推送到GitHub后即可在容器中运行自动化作业。 这些作业执行测试，发送成功或失败通知，然后将构建的应用程序部署到云服务环境。

In the end, we want our outcome to be: When we push our master branch to GitHub, an automated process will run all of our tests and then (if all the tests pass) deploy the application to Heroku.

最后，我们希望我们的结果是：当我们将master分支推送到GitHub时，一个自动化过程将运行我们的所有测试，然后(如果所有测试通过)将应用程序部署到Heroku。

To that end, I’ll take you through the following steps:

为此，我将指导您完成以下步骤：

1. Set up a GitHub repository
2. Create a basic Nuxt application
3. Create the tests for our Nuxt application
4. Manually deploy the Nuxt application to Heroku
5. Set up automated testing with CircleCI
6. Set up atuomated deployment to Heroku

Sound pretty simple? It will be. Let’s go!

听起来很简单？ 这将是。 我们走吧！

1.设置GitHub存储库 (1. Set Up a GitHub Repository)

This tutorial requires an account with GitHub. A basic GitHub Free account will be sufficient.

本教程需要使用GitHub帐户。 一个基本的GitHub Free帐户就足够了。

We’ll set up a GitHub repository to house our project code. Later, we’ll connect our GitHub account with our CircleCI account. Whenever we push code to GitHub, this action will trigger a webhook to notify CircleCI to begin the CI/CD automation process.

我们将建立一个GitHub存储库来容纳我们的项目代码。 稍后，我们将把GitHub帐户与CircleCI帐户连接起来。 每当我们将代码推送到GitHub时，此操作都会触发一个Webhook，通知CircleCI开始CI / CD自动化过程。

On the “Your Repositories” page in GitHub, click on the “New” repository button.

在GitHub的“您的存储库”页面上，单击“新建”存储库按钮。

Choose any name you’d like for this private repository. For this tutorial, we’ll call our repository my-heroku-nuxt-app.

选择您要为此私人存储库使用的任何名称。 对于本教程，我们将其存储库称为my-heroku-nuxt-app 。

Click on “Create repository” to finish up. Then, clone the repository onto your local machine. In the command below, make sure to use your own GitHub username. Notice we’re cloning the empty repository into a folder called app.

单击“创建存储库”以完成操作。 然后，将存储库克隆到本地计算机上。 在下面的命令中，确保使用您自己的GitHub用户名。 注意，我们正在将空存储库克隆到名为app的文件夹中。

~/$ git clone git@github.com:[GITHUB USERNAME]/my-heroku-nuxt-app.git app 
Cloning into 'my-heroku-nuxt-app'... 
warning: You appear to have cloned an empty repository.

Excellent. Now that we have our app folder, let’s fill it up with a shiny, new Nuxt application.

优秀的。 现在我们有了app文件夹，让我们用一个闪亮的新Nuxt应用程序填充它。

2.创建一个Nuxt应用程序 (2. Create a Nuxt Application)

Just for your reference, we’ll be using Node v10.20.0 throughout this tutorial. We’ll also be using Yarn as our package manager.

仅供您参考，在本教程中，我们将使用Node v10.20.0。 我们还将使用Yarn作为包管理器。

From within your app folder, run the following command to create a new Nuxt application:

在您的app文件夹中，运行以下命令以创建新的Nuxt应用程序：

~/app$ yarn create nuxt-app
create-nuxt-app v3.0.0
✨ Generating Nuxt.js project in .
? Project name my-heroku-nuxt-app
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose Nuxt.js modules None
? Choose linting tools None
? Choose test framework Jest
? Choose rendering mode Universal (SSR / Static)
? Choose development tools None

The interactive prompts will ask you to choose some options. You can choose whatever you’d like for “Project name,” but it’s important that you choose the options I’ve shown above.

交互式提示将要求您选择一些选项。 您可以选择“项目名称”中的任何内容，但是选择上面显示的选项很重要。

By the way, if you’d like to use npm instead of Yarn, you can use the command npx create-nuxt-app instead of the yarn create command above.

顺便说一句，如果您想使用npm代替Yarn，则可以使用命令npx create-nuxt-app代替上面的yarn create命令。

Verify that your application works by running yarn dev from the command line. Your browser window should look like the following:

通过从命令行运行yarn dev来验证您的应用程序是否正常运行。 您的浏览器窗口应如下所示：

Great! Now that our application is up and running, let’s write some tests.

大！ 现在我们的应用程序已启动并正在运行，让我们编写一些测试。

3.为我们的Nuxt应用程序创建测试 (3. Create the Tests for Our Nuxt Application)

We’ll write tests just for our index page. Keep in mind we’re not planning to build anything beyond this basic boilerplate Nuxt application. Our goal is to learn how to automate testing and deployment to Heroku.

我们将只为index页面编写测试。 请记住，我们不打算在此基本样板Nuxt应用程序之外构建任何东西。 我们的目标是学习如何自动化测试和部署到Heroku。

For testing, we’ll use Jest, which is a popular JavaScript testing framework. It’s easy to use and lightning fast. When we created our Nuxt application above, we opted to bundle in Jest.

对于测试，我们将使用Jest ，这是一个流行JavaScript测试框架。 易于使用，闪电般快速。 当我们在上面创建Nuxt应用程序时，我们选择将其捆绑在Jest中。

In the app/pages folder, create a new test file called index.test.js. We’ll write three tests verifying that our index page has certain content.

在app/pages文件夹中，创建一个名为index.test.js的新测试文件。 我们将编写三个测试，以验证我们的index页是否包含某些内容。

// FILE: ~/app/pages/index.test.jsimport { mount } from '@vue/test-utils'
import index from './index.vue'describe('index page', () => {   
  const wrapper = mount(index)  
  describe('app title', () => {    
    const element = wrapper.find('.title')    
    it('displays app title', () => {      
      expect(element.text()).toEqual('my-heroku-nuxt-app')    
    })  
  })  
  describe('links', () => {    
    const links = wrapper.find('.links')    
    describe('nuxtjs', () => {      
      it('contains link with correct text', () => {        
        const link = links.find('[href="https://nuxtjs.org/"]')        
        expect(link.text()).toEqual('Documentation')      
      })    
    })    
    describe('github', () => {      
      it('contains link with correct text', () => {        
        const link = links.find('[href="https://github.com/nuxt/nuxt.js"]')        
        expect(link.text()).toEqual('GitHub')      
      })    
    })  
  })
})

Let’s run our tests. We won’t be concerned about test coverage, so let’s include the --coverage false flag.

让我们运行测试。 我们不会担心测试的覆盖范围，因此让我们包括--coverage false标志。

~/app$ yarn test --coverage false
  PASS pages/index.test.js
    index page
       app title
         ✓ displays app title (3 ms)
       links
         nuxtjs
          ✓ contains link with correct text (1 ms)
         github
          ✓ contains link with correct text (1 ms)Test Suites: 1 passed, 1 totalTests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.405 s, estimated 2 s
Ran all test suites.
Done in 2.21s.

Now, with tests working, let’s check in our code:

现在，随着测试的进行，让我们检查一下代码：

~/app$ git add .
~/app$ git commit -m "Create nuxt app with tests."
~/app$ git push origin

Nicely done. Now, we have a Nuxt application with a few tests (which are passing), and we’ve pushed our master branch to GitHub.

做得很好。 现在，我们有一个带有一些测试(正在通过)的Nuxt应用程序，并且我们已经将master分支推送到了GitHub。

4.手动将我们的应用程序部署到Heroku (4. Manually Deploy Our Application to Heroku)

Before we build in automation, let’s walk through a basic, manual deployment to Heroku. This will help us understand what we’re doing later on when we automate deployment through CircleCI.

在构建自动化之前，让我们逐步完成对Heroku的基本手动部署。 这将有助于我们了解以后通过CircleCI进行自动化部署时正在做什么。

If you don’t already have one, set up a new account with Heroku. The free plan will work fine for this example. Then, log into your account. From the dashboard, click on “New” and then “Create new app”.

如果您还没有，请使用Heroku设置一个新帐户。 免费计划适用于此示例。 然后，登录到您的帐户。 在仪表板上，单击“新建”，然后单击“创建新应用”。

Choose a name for your application. For this tutorial, we’ll go with the same name that we’ve been using thus far. Note that app names on Heroku must be unique across their system. So it’s possible that my-heroku-nuxt-app won’t be available. If that’s the case, choose another name, and take note of that for substitution as we go through this tutorial.

为您的应用程序选择一个名称。 在本教程中，我们将使用到目前为止一直使用的相同名称。 请注意，Heroku上的应用程序名称在整个系统中必须唯一。 因此my-heroku-nuxt-app可能无法使用。 如果是这样，请选择其他名称，并在进行本教程时记下该名称以进行替换。

After the app has been created, you’ll see app-deployment settings. We’ll be using the “Heroku Git (Use Heroku CLI)” method for deployment. We’ll use this as we deploy manually from our local machine command line, and then we’ll configure CircleCI to deploy via the command line, too.

创建应用程序后，您将看到应用程序部署设置。 我们将使用“ Heroku Git(使用Heroku CLI)”方法进行部署。 从本地计算机命令行手动部署时，我们将使用它，然后还将CircleCI配置为通过命令行部署。

Further down on Heroku’s deployment-settings page, you’ll see a link with instructions for installing the Heroku CLI on your local machine. After installing the Heroku CLI, log into Heroku from the command line:

在Heroku的“部署设置”页面的下方，您将看到一个链接，其中包含在本地计算机上安装Heroku CLI的说明。 安装Heroku CLI后，从命令行登录到Heroku：

~/app$ heroku login
 heroku: Press any key to open up the browser to login or q to exit:
 Opening browser to https://cli-auth.heroku.com/auth/cli/browser/ ...
 Logging in... done
 Logged in...

Since our GitHub repository for this project already exists, we want to add the new Heroku remote. Make sure to use the Heroku application name that you chose above if my-heroku-nuxt-app wasn’t available.

由于我们已经存在该项目的GitHub存储库，因此我们想添加新的Heroku遥控器。 如果my-heroku-nuxt-app不可用，请确保使用上面选择的Heroku应用程序名称。

~/app$ heroku git:remote -a my-heroku-nuxt-app

Next, we want to set a few Heroku configuration variables to get our production deployment running. These instructions come from the Nuxt documentation on deploying to Heroku.

接下来，我们要设置一些Heroku配置变量以使我们的生产部署运行。 这些说明来自有关部署到Heroku的Nuxt文档。

~/app$ heroku config:set HOST=0.0.0.0
~/app$ heroku config:set NODE_ENV=production

Now, we can push our Nuxt application to Heroku for deployment.

现在，我们可以将Nuxt应用程序推送到Heroku进行部署。

~/app$ git push heroku
 Enumerating objects: 17, done.
 Counting objects: 100% (17/17), done.
 Delta compression using up to 4 threads
 Compressing objects: 100% (14/14), done.
 Writing objects: 100% (17/17), 167.78 KiB | 5.99 MiB/s, done.
 Total 17 (delta 0), reused 0 (delta 0), pack-reused 0
 remote: Compressing source files... done.
 remote: Building source:
 remote: -----> Node.js app detected
 remote: -----> Creating runtime environment
 remote: -----> Installing binaries
 remote: -----> Installing dependencies
 remote: -----> Build
 remote: -----> Pruning devDependencies
 remote: -----> Caching build
 remote: -----> Build succeeded!
 remote: -----> Discovering process types
 remote: -----> Compressing...
 remote: -----> Launching...
 remote: https://my-heroku-nuxt-app.herokuapp.com/ deployed to Heroku
 remote: Verifying deploy... done.

The command above is where all of the magic happens. Heroku detects that this is a Node app, and then it creates the proper deployment environment and installs all dependencies. After installing dependencies, Heroku also runs the build script command found in your package.json — this bundles all of the files needed for the client and for the server.

上面的命令是所有魔术发生的地方。 Heroku检测到这是一个Node应用程序，然后它创建正确的部署环境并安装所有依赖项。 安装依赖项后，Heroku还运行在package.json找到的build脚本命令-这将捆绑客户端和服务器所需的所有文件。

When we visit the URL for our Heroku app, we see our Nuxt application up and running on the web:

当我们访问Heroku应用程序的URL时，我们会看到Nuxt应用程序已启动并在网络上运行：

Just like that … our Nuxt SSR application has been deployed to Heroku and is live. All that’s left to do is build in automated CI/CD through CircleCI.

就是这样……我们的Nuxt SSR应用程序已部署到Heroku并已投入使用。 剩下要做的就是通过CircleCI内置自动CI / CD。

5.使用CircleCI设置自动测试 (5. Set Up Automated Testing With CircleCI)

Create a new account at CircleCI by clicking on “Log In with GitHub.”

通过单击“使用GitHub登录”在CircleCI上创建一个新帐户。

By logging in with GitHub, you authorize CircleCI to access all of your repositories. Within CircleCI’s dashboard, you’ll be able to select which of your GitHub repositories you want CircleCI to monitor.

通过使用GitHub登录，您授权CircleCI访问您的所有存储库。 在CircleCI的仪表板中，您可以选择希望CircleCI监视的GitHub存储库。

From the CircleCI projects dashboard, you’ll see your GitHub repository named my-heroku-nuxt-app — click on the “Set Up Project” button to its right.

在CircleCI项目仪表板中，您将看到名为my-heroku-nuxt-app GitHub存储库-单击右侧的“设置项目”按钮。

CircleCI will choose a config template for you to start with (by default, it chooses the “Hello World” template). Shortly, we’ll provide our own CircleCI config file. For now, select “Hello World,” and click on “Start Building.”

CircleCI将为您选择一个配置模板(默认情况下，它选择“ Hello World”模板)。 很快，我们将提供自己的CircleCI配置文件。 现在，选择“ Hello World”，然后单击“开始构建”。

This will pop up a modal saying that CircleCI will create a new branch and add this config template to that branch. But we don’t need CircleCI to do this for us, so select “Add Manually.”

这会弹出一个模态，说CircleCI将创建一个新分支并将此配置模板添加到该分支。 但是我们不需要CircleCI为我们执行此操作，因此请选择“手动添加”。

We’re told that we’ll need to create a .circleci subfolder in our repository root folder and then add a config.yml to that subfolder. That’s what we’re about to do. We don’t need to download the template config.yml file since we’re going to write our own. So just click on “Start Building.”

有人告知我们需要在存储库根文件夹中创建一个.circleci子文件夹，然后.circleci子文件夹添加config.yml 。 那就是我们要做的。 我们将要编写自己的模板， config.yml无需下载模板config.yml文件。 因此，只需单击“开始构建”。

When you set up your project for monitoring by CircleCI (and because CircleCI has been authorized to access your GitHub repositories), CircleCI will add a new public key to your GitHub repository’s settings.

当您设置要由CircleCI监视的项目时(并且由于CircleCI被授权访问您的GitHub存储库)，CircleCI将向GitHub存储库的设置添加新的公共密钥。

CircleCI will immediately execute a workflow for this project. You’ll notice this first build attempt fails. That’s because CircleCI is looking for the config.yml file in the .circleci subfolder of the master branch of your project repository. That file doesn't exist yet, so let’s create it now.

CircleCI将立即为该项目执行工作流程。 您会注意到第一次构建尝试失败。 这是因为CircleCI在项目存储库的master分支的.circleci子文件夹中寻找config.yml文件。 该文件尚不存在，所以现在就创建它。

In your project root folder, create a new subfolder called .circleci:

在您的项目根文件夹中，创建一个名为.circleci的新子文件夹：

~/app$ mkdir .circleci

In that folder, create a new file named config.yml. We’re going to break this part of the tutorial into two separate parts. First, we’ll configure CircleCI to run our tests. Then, after we get that up and running, we’ll move on to configuring for Heroku deployment.

在该文件夹中，创建一个名为config.yml的新文件。 我们将本教程的这一部分分为两个单独的部分。 首先，我们将配置CircleCI来运行测试。 然后，在启动并运行之后，我们将继续进行Heroku部署的配置。

The contents of config.yml should be the following:

config.yml的内容应为以下内容：

// FILE: ~/app/.circleci/config.ymlversion: 2.1
 jobs:
 run-test-suite:
 docker:
 - image: circleci/node:10.20.0
 working_directory: ~/project
 steps:
 - checkout
 - run:
 name: Fetch dependencies
  command: yarn install --no-progress --non-interactive --silent --pure-lockfile
 - run:
 name: Run test suite
 command: yarn test_ci
 - persist_to_workspace:
 root: ~/project
 paths:
 - .
 workflows:
 test-and-deploy:
 jobs:
    - run-test-suite

Let’s walk through what the above configuration does:

让我们来看一下上述配置的作用：

1. We define a new job called run-test-suite.

   我们定义了一个名为run-test-suite的新工作。

2. This job sets up an environment that supports Node with the version we want.
   这项工作建立了一个支持Node所需环境的环境。

3. Then, this job executes four steps. It checks out the repository code, installs dependencies, runs the test suite by running yarn test_ci, and then saves the current workspace folder to the machine so other jobs can still access the contents in its current state.

   然后，此作业执行四个步骤。 它签出存储库代码，安装依赖项，通过运行yarn test_ci运行测试套件，然后将当前工作空间文件夹保存到计算机，以便其他作业仍可以访问其当前状态的内容。

4. Our overall workflow, called test-and-deploy, only has one job in it: run-test-suite.

   我们的整个工作流程称为“ test-and-deploy ，其中只有一项工作： run-test-suite 。

You may have noticed that CircleCI will call yarn test_ci from within our project folder to run the test suite. But we haven’t defined test_ci in our package.json script commands yet.

您可能已经注意到，CircleCI将在我们的项目文件夹中调用yarn test_ci来运行测试套件。 但是我们还没有在package.json脚本命令中定义test_ci 。

We'll define that command with an extra flag that tells Jest to run in continuous integration mode. This affects how Jest handles snapshot tests. Though we don't have any of those in our project right now, you'll want to keep this in mind in case you write snapshot tests for your projects in the future.

我们将用一个额外的标志定义该命令，该标志告诉Jest在连续集成模式下运行。 这会影响Jest处理快照测试的方式。 尽管目前我们的项目中没有这些，但是您还是要记住这一点，以防将来为项目编写快照测试。

Since we’re updating our package.json file, let’s also turn off code=coverage testing when running Jest:

由于我们正在更新package.json文件，因此在运行Jest时还要关闭code = coverage测试：

// Excerpt from FILE: ~/app/package.json...
  "scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest --coverage false",
      "test_ci": "yarn test --ci"
  },
 ...

Now, let’s add our new .circleci/config.yml file and our updated package.json file to git staging, and then commit them.

现在，让我们将新的.circleci/config.yml文件和更新的package.json文件添加到git暂存中，然后提交它们。

~/app$ git add .
~/app$ git commit -m "Add CircleCI config for testing, update package.json"

We push our new commit to master:

我们将新提交提交给master ：

~/app$ git push origin

Within a few seconds, you should see a new pipeline entry on your CircleCI dashboard for this project. The test-and-deploy workflow for your project on the master branch will begin executing. It’ll execute the first and only job, which is to run-test-suite. Our tests should pass, and everything should be green.

在几秒钟内，您应该在CircleCI仪表板上看到该项目的新管道条目。 您在master分支上的项目的test-and-deploy工作流将开始执行。 它将执行第一个也是唯一的工作，即run-test-suite 。 我们的测试应该通过，并且所有内容都应该是绿色的。

6.设置自动部署到Heroku (6. Set Up Automated Deployment to Heroku)

For our final step, we want to configure CircleCI to deploy the code to Heroku when our tests pass.

对于最后一步，我们想配置CircleCI在测试通过时将代码部署到Heroku。

To do this, we need to modify our config.yml file with the CircleCI configuration. We’ll make use of CircleCI’s Heroku orb. CircleCI orbs are reusable packages used to simplify configuration. CircleCI has a huge registry of prebuilt orbs that simplify integration with third-party technologies (like Heroku).

为此，我们需要使用CircleCI配置修改config.yml文件。 我们将使用CircleCI的Heroku orb 。 CircleCI球是可重复使用的软件包，用于简化配置。 CircleCI拥有大量的预建球体注册表，可简化与第三方技术(如Heroku)的集成。

Our updated config.yml should look like the following:

我们更新的config.yml应该如下所示：

// FILE: ~/app/.circleci/config.ymlversion: 2.1
orbs:
   heroku: circleci/heroku@1.0.0
jobs:
run-test-suite:
docker:
- image: circleci/node:10.20.0
working_directory: ~/project
steps:
- checkout
- run:
name: Fetch dependencies
command: yarn install --no-progress --non-interactive --silent --pure-lockfile
- run:
name: Run test suite
command: yarn test_ci
- persist_to_workspace:
root: ~/project
paths:
- .
  deploy-to-heroku:
   docker:
    - image: circleci/node:10.20.0
   working_directory: ~/project
   steps:
     - attach_workspace:
        at: ~/project
    - heroku/deploy-via-git
workflows:
test-and-deploy:
jobs:
- run-test-suite
   - deploy-to-heroku:
       requires:
         - run-test-suite
       filters:
         branches:
          only: master

Here’s what we’ve added:

这是我们添加的内容：

1. In addition to the original run-test-suite job, we now have a deploy-to-heroku job. It also uses the same Node version and working directory.

   除了原始的run-test-suite作业之外，我们现在还有一个deploy-to-heroku作业。 它还使用相同的Node版本和工作目录。

2. The deploy-to-heroku job has two steps: First, it attaches to the workspace that we persisted in the previous job. Second, it calls the deploy-via-git command, which is defined in CircleCI’s Heroku orb. Essentially, it runs a Heroku CLI command similar to what we did when we manually deployed our application to Heroku above.

   deploy-to-heroku作业有两个步骤：首先，它将附加到我们在上一个作业中deploy-to-heroku工作区。 其次，它调用deploy-via-git命令，该命令在CircleCI的Heroku Orb中定义。 本质上，它运行一个Heroku CLI命令，类似于我们将应用程序手动部署到上面的Heroku时的操作。

3. We have added this new deploy-to-heroku job to our test-and-deploy workflow, but we put some constraints on this job. First, it’ll only run after a successful run of the run-test-suite job. Also, it’ll only run if CircleCI is responding to a webhook for the master branch from our GitHub repository. This means that all branches pushed to GitHub will result in a run of the run-test-suite job. But only the master branch will continue on with the deploy-to-heroku job. This makes sense because we would, of course, only want to deploy the master branch to production.

   我们已经将这个新的“ deploy-to-heroku作业添加到了“ test-and-deploy工作流中，但是我们对该作业施加了一些限制。 首先，它只能在run-test-suite作业成功运行之后run-test-suite 。 另外，它仅在CircleCI响应GitHub存储库中master分支的webhook时运行。 这意味着所有推送到GitHub的分支都将导致run-test-suite作业。 但是只有master分支将继续进行deploy-to-heroku工作。 这是有道理的，因为我们当然只希望将master分支部署到生产中。

Before this new CircleCI configuration will work, however, we need to update our CircleCI project settings with some environment variables related to our Heroku app deployment. In your CircleCI project settings, click on “Environment Variables.”

但是，在此新的CircleCI配置生效之前，我们需要使用一些与Heroku应用程序部署相关的环境变量来更新CircleCI项目设置。 在CircleCI项目设置中，单击“环境变量”。

We need to add two environment variables. The first is HEROKU_API_KEY, which can be found in your Heroku account settings.

我们需要添加两个环境变量。 第一个是HEROKU_API_KEY ，可以在您的Heroku帐户设置中找到。

Click on “Reveal,” and then copy/paste that value over in CircleCI as the value for the HEROKU_API_KEY environment variable.

单击“显示”，然后将该值复制/粘贴到CircleCI中，作为HEROKU_API_KEY环境变量的值。

The second environment variable we need in CircleCI is HEROKU_APP_NAME, which is the name of the Heroku app that you established when creating the app. (For our tutorial, it’s my-heroku-nuxt-app.)

CircleCI中我们需要的第二个环境变量是HEROKU_APP_NAME ，这是您在创建应用程序时建立的Heroku应用程序的名称。 (对于我们的教程，它是my-heroku-nuxt-app 。)

After adding these two environment variables, your CircleCI project settings should look similar to below:

添加这两个环境变量之后，您的CircleCI项目设置应类似于以下内容：

Now that we’re all set, we can stage and commit our updated .circleci/config.yml file to Git, then push to GitHub:

现在我们已经准备.circleci/config.yml ，我们可以.circleci/config.yml更新的.circleci/config.yml文件提交到Git，然后推送到GitHub：

~/app$ git add .
~/app$ git commit -m "Update CircleCI config for Heroku deployment"
~/app$ git push origin

When we do this push to GitHub, here’s what happens:

当我们将其推送到GitHub时，会发生以下情况：

1. The new commit on the master branch is pushed to GitHub.

   master分支上的新提交已推送到GitHub。

2. GitHub, receiving a new push, sends a webhook to CircleCI, indicating the name of the branch that just got a new commit.
   GitHub收到新的推送，将一个Webhook发送到CircleCI，指示刚刚获得新提交的分支的名称。

3. CircleCI goes into action to launch the test-and-deploy workflow for this project.

   CircleCI开始采取行动以启动该项目的test-and-deploy工作流。

4. The first job in the workflow is run-test-suite. All of the tests run, and they all pass.

   工作流中的第一项工作是run-test-suite 。 所有测试都运行，并且都通过了。

5. The deploy-to-heroku job runs next since run-test-suite succeeded and the branch that just got a new commit is master.

   由于run-test-suite成功，并且刚刚获得新提交的分支是master ，因此下一步将run-test-suite deploy-to-heroku作业。

6. Armed with the HEROKU_API_KEY environment variable (which gives CircleCI authorization to access your Heroku apps) and the HEROKU_APP_NAME environment variable (which lets CircleCI know which Heroku app to deploy), the job pushes the code to Heroku.

   作业配备了HEROKU_API_KEY环境变量(授予CircleCI访问您的Heroku应用程序的权限)和HEROKU_APP_NAME环境变量(使CircleCI知道要部署哪个Heroku应用程序)，此作业会将代码推送到Heroku。

7. Upon receiving the code pushed from CircleCI, Heroku builds the Nuxt application and then starts up the server.
   收到CircleCI推送的代码后，Heroku会构建Nuxt应用程序，然后启动服务器。

审查并总结 (Review and Wrap Up)

And there you have it. You have just set up complete CI/CD automation of your Nuxt SSR application. By simply pushing your project to GitHub, your project tests will run, and your project will deploy to Heroku.

那里有。 您刚刚为Nuxt SSR应用程序设置了完整的CI / CD自动化。 只需将项目推送到GitHub，即可运行项目测试，并将项目部署到Heroku。

Let’s quickly review what we did:

让我们快速回顾一下我们所做的事情：

1. We set up a GitHub repository for our project.
   我们为我们的项目建立了一个GitHub存储库。

2. We created a new Nuxt application, using yarn create nuxt-app.

   我们使用yarn create nuxt-app创建了一个新的Nuxt应用yarn create nuxt-app 。

3. We wrote tests for our Nuxt application, using Jest.
   我们使用Jest为Nuxt应用程序编写了测试。
4. We manually deployed our project to Heroku using the Heroku CLI.
   我们使用Heroku CLI将项目手动部署到了Heroku。
5. We set up CircleCI to automate running our test suite whenever we push code to GitHub.
   我们将CircleCI设置为在将代码推送到GitHub时自动运行测试套件。

6. We set up CircleCI to automate deployment to Heroku whenever we push the master branch to GitHub and all of the tests pass.

   每当将master分支推送到GitHub并且所有测试通过时，我们都将CircleCI设置为自动部署到Heroku。

下一步 (Next Steps)

You now have the foundation you need to take this to the next level. From here, what might be some next steps you could take to build on this new knowledge?

现在，您已经具备了将其提升到更高水平所需的基础。 从这里开始，您可以采取哪些下一步措施来建立这种新知识？

• Expanding on this bare-bones Nuxt application, you can build out new features accompanied by comprehensive tests. Now that you’ve automated test runs and deployment to Heroku, all you need to worry about is writing tests, writing code, and pushing to GitHub.
  扩展此基本的Nuxt应用程序，您可以构建新功能并进行全面测试。 现在，您已经完成了自动测试运行并将其部署到Heroku，您所需要担心的就是编写测试，编写代码以及推送到GitHub。
• Or if you already have an existing NuxtJS application, you can apply the Heroku deployment and CircleCI automation steps to your existing project. In less than an hour of your time, you can build in CI/CD.
  或者，如果您已经拥有现有的NuxtJS应用程序，则可以将Heroku部署和CircleCI自动化步骤应用于现有项目。 您可以在不到一个小时的时间内构建CI / CD。

Because deployment of Nuxt SSR applications to Heroku is so quick and simple, you reduce the friction you’ll encounter when it’s time to go live. And with CI/CD baked into your development process, you free up yourself and your team from another checklist of things to do when it’s time to ship your code.

由于将Nuxt SSR应用程序部署到Heroku的过程如此简单快捷，因此可以减少上线时遇到的麻烦。 随着CI / CD进入您的开发过程，您和自己的团队可以从另一个检查清单中解放出来，在需要交付代码时就可以这样做。

Published with permission from my colleague Alvin Lee.

经我的同事Alvin Lee的许可发表。