精华内容
参与话题
问答
  • herokuManually 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 ...

    heroku

    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.

    在本文中,我们将研究如何使用HerokuCircleCI轻松为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 RouterVuexVue服务器端渲染(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

    Image for post

    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来验证您的应用程序是否正常运行。 您的浏览器窗口应如下所示:

    Image for post

    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设置一个新帐户免费计划适用于此示例。 然后,登录到您的帐户。 在仪表板上,单击“新建”,然后单击“创建新应用”。

    Image for post

    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可能无法使用。 如果是这样,请选择其他名称,并在进行本教程时记下该名称以进行替换。

    Image for post

    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配置为通过命令行部署。

    Image for post

    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配置变量以使我们的生产部署运行。 这些说明来自有关部署到HerokuNuxt文档

    ~/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应用程序已启动并在网络上运行:

    Image for post

    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上创建一个新帐户。

    Image for post

    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存储库-单击右侧的“设置项目”按钮。

    Image for post

    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”,然后单击“开始构建”。

    Image for post

    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为我们执行此操作,因此请选择“手动添加”。

    Image for post

    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文件。 因此,只需单击“开始构建”。

    Image for post

    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文件。 该文件尚不存在,所以现在就创建它。

    Image for post

    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 。 我们的测试应该通过,并且所有内容都应该是绿色的。

    Image for post

    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项目设置中,单击“环境变量”。

    Image for post

    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帐户设置中找到。

    Image for post

    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项目设置应类似于以下内容:

    Image for post

    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的许可发表

    翻译自: https://medium.com/better-programming/how-to-automate-nuxt-js-deployments-with-heroku-and-circleci-8eaf10aa7b17

    heroku

    展开全文
  • 可以省去路由划分的时间,Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置、进一步封装Vuex等等。下面来介绍 如何将Nuxt部署到静态托管上? 云开发(Tencent CloudBase,TCB)是云端一体化的后端...

    48015ddf9e4c75bbe2a91109b20481f0.png

    最开始了解到Nuxt是在vue SSR下了解到,用过之后感觉真香。 可以省去路由划分的时间,Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置、进一步封装Vuex等等。下面来介绍 如何将Nuxt部署到静态托管上?

    云开发(Tencent CloudBase,TCB)是云端一体化的后端云服务 ,采用 serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具(CLI)、Flutter SDK 等能力极大的降低了应用开发的门槛。

    环境要求

    node.js

    工具准备

    Nuxt脚手架: create-nuxt-app 云开发命令工具: @cloudbase/cli

    安装

    1. 安装Nuxt脚手架 npm i create-nuxt-app
    2. 安装云开发命令工具 CLI npm i -g @cloudbase/cli
    测试 cloudbase/cli 是否安装成功 可以使用cloudbase或tcb命令

    cloudbase -v

    tcb -v

    更多命令可以移步全部命令 或运行命令 tcb -h

    创建Nuxt项目

    npx create-nuxt-app demo

    创建过程详细请参考文档

    紧接着进入到项目目录下(这里是demo)

    1. 在命令行下执行npm run generate 生成静态html文件
    2. 在项目目录中会生成一个dist文件夹。该文件夹下的文件就是生成的静态文件

    4adb902af0e7dfae92f48d45a2b871dd.png

    到此Nuxt部分就已经搞定了,现在要做的就是怎样将这个静态网站托管到云开发?

    首先我们打开 云开发

    0da3efc39fd6ee7f5c31aac1dd419302.png
    选择或创建自己的云开发环境

    ffd9a05586ef98b2d7dd91ff93bccb3a.png
    这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。

    9c7d178723da96bf55c96b2056f84836.png
    创建成功后会自动对环境进行初始化(此过程大概2~3分钟)。

    150be756e56ddf8f8978a07f2877a478.png
    初始化成功后我们进到对应的环境中找到静态网站托管并开始使用

    9c76744d9ceaaea508aeb0d37c7c9b7d.png

    等待静态网站服务初始化后就可以使用啦~

    接下来我们就可以将nuxt的静态网站上传到云开发静态网站托管了。

    首先执行登录命令

    tcb login

    71080a4f1e69a6873ab3d77c58977d5b.png

    在弹出的页面进行授权

    9c66538ae87026248de93b7bd06aa73b.png

    接着,将静态网站进行部署到云开发静态网站托管

    这里我们将dist文件夹下的所有文件都部署到静态网站托管中,执行命令

    tcb hosting:deploy 文件夹  -e 云环境ID

    这里的文件夹是将此文件夹下所有的文件都部署到云开发的根目录中,云环境ID可在环境ID下查看

    233ee486b9e2cb143c55870abc711165.png

    因为我们希望将dist下的所有文件部署上去,所以上面的命令我们可以写成

    tcb hosting:deploy ./dist -e demo-1cdbae

    74d4390620b5f0392a11390318cdacdf.png

    上传成功后我们会发现,静态网站托管中多了许多文件

    fa8b422695dd8a9caad0860afaee9b00.png

    那我们如何浏览呢?

    云开发默认提供了一个与环境对应的默认域名,可以通过这个默认域名进行访问。

    8b372d0b1bd0287539adcbc9ccba38e8.png

    73c41ab95e568173c6ca4729491f61a0.png

    $color{green}{这样至此我们的Nuxt就部署成功啦~}$

    默认域名存在限制下行速度10KB/S,如果正式使用的话需要添加一个已经备案的域名

    32cfb8a763a31b3c3239197ce1bde8f6.png

    并为其添加dns解析

    7cd83a026c7e02ba777b345f8d397c40.png

    ede370d508e8f0e10667e4946d1385ef.png

    如果可以ping通这个CNAME就可以进行使用自己的域名进行访问啦~~

    展开全文
  • NuxtJS 项目部署到nginx

    2020-09-30 14:15:46
    NuxtJS 项目完成之后,如何部署到nginx? 总流程:Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护 一:NuxtJS打包部署 npm run build打包应用,打包完成后,我们将: .nuxt server文件夹...

    NuxtJS 项目完成之后,如何部署到nginx?

    总流程:Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护

    一:NuxtJS打包部署

    npm run build 打包应用,打包完成后,我们将:

    .nuxt
    server文件夹(里面有index.js)
    nuxt.config.js
    package.json

    传到服务器空间里,然后在服务器上部署运行:

    npm install #运行npm install安装package里的依赖
    npm start #运行npm start就可以运行起来nuxt的服务渲染了

    注意:npm install如果报错?Error: EACCES: permission denied, mkdir ‘......node-sass/build‘错误?

               解决:npm install node-sass --unsafe-perm --save-dev

    在浏览器地址栏:http://127.0.0.1:3000/  即可访问。

    二:配置nginx代理监听3000端口,package打包时端口3000(默认 可修改)

    找到nginx配置文件:nginx.conf

    server {
            listen       80;
    		server_name  test.ssr.net;
            root D:/nginx/html;
            location / {
                proxy_pass http://127.0.0.1:3000 ;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $remote_addr;
            }
        }

    启动nginx

    输入域名即可访问

    三:pm2开启进程守护

    1、全局安装pm2

    npm install -g pm2

    2、进入到对应的目录执行:

    pm2 start npm --name "SSR-service" -- run start  #SSR-service的名称是我们在package中的项目名称

    执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表,我截一下我个人服务器的pm2列表:

    pm2的一些命令:

    查看当前守护进程 :pm2 list
    停止所有的应用程序:pm2 stop all
    停止某个应用程序:pm2 stop id
    重启所有应用程序:pm2 restart all
    关闭并删除所有应用:pm2 delete all
    删除指定应用:pm2 delete id

     

    展开全文
  • NuxtJS 项目部署如何部署到nginx

    千次阅读 2019-08-28 11:42:01
    NuxtJS 项目完成之后,如何部署到nginx? 总流程:Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护 提示:安装nginx (我目前使用的系统是win7) 官网下载地址: ...

    NuxtJS 项目完成之后,如何部署到nginx?

    总流程:Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护

     

    提示:安装nginx (我目前使用的系统是win7)

    官网下载地址: https://nginx.org/en/download.html  

    可参考:https://blog.csdn.net/u012878818/article/details/98487651

    一:NuxtJS打包部署

    npm run build 打包应用,打包完成后,我们将:

    .nuxt
    nuxt.config.js
    package.json

    传到服务器空间里,然后在服务器上部署运行:

    npm install #运行npm install安装package里的依赖
    npm start #运行npm start就可以运行起来nuxt的服务渲染了

    在浏览器地址栏:http://127.0.0.1:3000/  即可访问。

    二:配置nginx代理监听3000端口,package打包时端口3000(默认 可修改)

    1、找到host(C:\Windows\System32\drivers\etc)文件

    新增:

    127.0.0.1 test.ssr.net #域名可自定义

    2、找到nginx配置文件:nginx.conf

    server {
            listen       80;
    		server_name  test.ssr.net;
            root D:/nginx/html;
            location / {
                proxy_pass http://127.0.0.1:3000 ;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $remote_addr;
            }
        }

    3、启动nginx

    start nginx  #启动nginx

    输入域名:http://test.ssr.net 即可访问:

    三:pm2开启进程守护

    1、全局安装pm2

    npm install -g pm2

    2、进入到对应的目录执行:

    pm2 start npm --name "SSR-service" -- run start  #SSR-service的名称是我们在package中的项目名称

    执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表,我截一下我个人服务器的pm2列表:

    简单的介绍一下pm2的命令:

    pm2 start app.js              # 启动app.js应用程序
    pm2 start app.js -i 4         # cluster mode 模式启动4个app.js的应用实例
                                  # 4个应用程序会自动进行负载均衡
    pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
    pm2 start app.js --watch      # 当文件变化时自动重启应用
    pm2 start script.sh           # 启动 bash 脚本
    pm2 list                      # 列表 PM2 启动的所有的应用程序
    pm2 monit                     # 显示每个应用程序的CPU和内存占用情况
    pm2 show [app-name]           # 显示应用程序的所有信息
    pm2 logs                      # 显示所有应用程序的日志
    pm2 logs [app-name]           # 显示指定应用程序的日志
    pm2 flush                     # 清空所有日志文件
    pm2 stop all                  # 停止所有的应用程序
    pm2 stop 0                    # 停止 id为 0的指定应用程序
    pm2 restart all               # 重启所有应用
    pm2 reload all                # 重启 cluster mode下的所有应用
    pm2 gracefulReload all        # Graceful reload all apps in cluster mode
    pm2 delete all                # 关闭并删除所有应用
    pm2 delete 0                  # 删除指定应用 id 0
    
    pm2 scale api 10              # 把名字叫api的应用扩展到10个实例
    pm2 reset [app-name]          # 重置重启数量
    pm2 startup                   # 创建开机自启动命令
    pm2 save                      # 保存当前应用列表
    pm2 resurrect                 # 重新加载保存的应用列表
    pm2 update                    # Save processes, kill PM2 and restore processes
    pm2 generate                  # Generate a sample json configuration file
    
    

    最后提供一下demo:https://github.com/hwq888/SSR-service

    展开全文
  • Vercel 部署 NuxtJS 应用

    2020-08-29 16:32:16
    部署NuxtJS应用 NuxtJS官方介绍了几个服务端部署的方式。 其中 GitHub 是将应用打包成静态资源,然后使用 GitHub Pages 发布。 GitHub Pages 只能托管静态页面。 像使用NuxtJS开发的SSR应用,可以选择使用 Vercel。 ...
  • Nuxt.js 发布部署 打包 Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。 命令 描述 nuxt 启动一个热加载的 Web 服务器(开发模式)localhost:3000 nuxt build 利用 webpack 编译应用,压缩 JS 和 ...
  • 由于为了达到更好的SEO效果,最近研究了下nuxt.js 来做服务端渲染(SSR)。 本文来讲讲,在本地开发完成后怎么在服务器上配合nginx部署node项目。 技术栈: nuxt.js -- 2.9.2 nginx -- 1.10.3 pm2 -- 3.5.1 node --...
  • nuxtjs服务端部署流程

    千次阅读 2019-03-19 03:41:59
    最近做了一个公司的官网项目,需要做服务端部署,延续了之前用的nuxt框架,但是又需要调用接口,所以不能像之前那样通过 npm generate 复制代码生成静态文件来部署,搞了半天才搞好,废话不多说,下面看流程。 #...
  • NuxtJS服务端部署过程

    2019-08-13 18:18:30
    第二步:打包项目文件参考:nuxt服务端渲染 第三步:修改配置文件 第四步:开启PM2进程守护,如果不开启那么关闭连接服务器之后npm start进程就关闭了,就无法访问 五、运行结果如下: ...
  • NuxtJS服务端部署过程。

    万次阅读 2019-03-27 18:21:49
    第二步:打包项目文件参考:nuxt服务端渲染 第三步:修改配置文件 第四步:开启PM2进程守护,如果不开启那么关闭连接服务器之后npm start进程就关闭了,就无法访问 五、运行结果如下: ...
  • 准备环境 使用的是nuxt-express模板 在Linux 选的是Ubuntu系统 安装vue cli npm i vue-cli -D 下载项目 ...部署方式: 第一步先构建 npm run build 第二步启动 pm2 start ./build/main.js 此时...
  • 1.普通Nuxt编译/发布流程1.1编译命令 NuxtJS 框架提供了如下命令用作开发或部署nuxt 启动一个热加载的Web服务器(开发模式) localhost:3000。nuxt build 利用webpack编译应用,压缩JS和CSS资源(发布用)nuxt start...
  • Nuxtjs项目部署(含部署到CDN)

    千次阅读 2019-08-03 02:14:00
    题外话 首先说一点题外话,之前大概5月份的时候我做过一次简单的项目部署。但是过了两个多月我忘完了,一点关于此...node.js安装 下载 首先服务器先安装node,我是直接去官网下载Linux版的安装包,然后再FTP到我的服...
  • 主要介绍了详解Nuxt.js部署及踩过的坑,Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署,感兴趣的小伙伴们可以参考一下
  • NuxtJS 代码仓库地址:https://gitee.com/cloveryuan/realworld-nuxtjs 一、Nuxt.js是什么 一个基于Vue.js生态的第三方开源服务端渲染应用框架 它可以帮我们轻松的使用Vue.js技术栈构建同构应用 官网:...

空空如也

1 2 3 4 5 ... 20
收藏数 501
精华内容 200
关键字:

nuxtjs部署