react部署_如何为您的React应用设置持续集成和部署

最新推荐文章于 2024-07-24 11:09:48 发布

cumian8165

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量416

点赞数

文章标签： java github git docker python

原文链接：https://www.freecodecamp.org/news/how-to-set-up-continuous-integration-and-deployment-for-your-react-app-d09ae4525250/

版权

react部署

by Zac Kwan

扎克·关(Zac Kwan)

如何为您的React应用设置持续集成和部署 (How to set up continuous integration and deployment for your React app)

Setting up a React development environment can be confusing and daunting to newcomers. You might have heard developers talking about how different packages like babel, Webpack and so on, are needed as well (but this is debatable).

设置React开发环境可能会使新手感到困惑和艰巨。您可能已经听过开发人员在谈论如何同时需要babel ， Webpack等不同的软件包(但这值得商bat )。

With React getting more popular, there are a few boilerplate projects that aim to help developers create a suitable React development environment. create-react-app is one of the most popular starter templates.

随着React越来越流行，一些样板项目旨在帮助开发人员创建合适的React开发环境。 create-react-app是最受欢迎的入门模板之一。

It aims to allow developers to create a react app with zero build configuration.

它旨在允许开发人员使用零构建配置来创建React应用。

Developers no longer have to worry about how webpack should be setup, what should be configured with babel to use es6, or which linter and test package to use. Everything will just work out of the box. Yes, it is so easy!

开发人员不再需要担心如何webpack应该设置什么应该被配置babel在使用es6 ，或linter和test包使用。一切都将立即可用。 是的，这很容易！

For developers who need to manage the underlying configuration, it has a npm run eject that allows them to mess with the configuration and do what they couldn’t do previously. The only thing to note is that once eject is run, it cannot be reversed.

对于需要管理基础配置的开发人员，它具有npm run eject ，使他们可以弄乱配置并做以前无法做的事情。唯一要注意的是，一旦eject运行，就无法撤消。

React开发栈 (Development Stack for React)

I wrote the following guide to help developers build a Continuous Integration and Continuous Deployment stack for their React app. We will be using CircleCI, CodeClimate, and Heroku. If you do not have an account at any of the services above, head over to sign up — they’re FREE!

我编写了以下指南，以帮助开发人员为其React应用程序构建持续集成和持续部署堆栈 。我们将使用CircleCI ， CodeClimate 和 Heroku的 。如果您在上述任何服务中都没有帐户，请直接注册-它们是免费的！

At the end, we will have a React app in a Github Repo that will automatically deploy any changes on master branch to Heroku after all tests pass. Here is a sample of the deployed React website.

最后，我们将在Github Repo中提供一个React应用，该应用将在所有测试通过后自动将master分支上的所有更改部署到Heroku 。这是已部署的React网站的示例。

开始吧！ (Let’s Start!)

The first step is to follow the create-react-app guide to create a new React app. Do this:

第一步是按照create-react-app指南创建一个新的React应用。做这个：

$ npm install -g create-react-app$ create-react-app my-react-app$ cd my-react-app/$ npm start

Then the browser should automatically open a page at http://localhost:3000/. If you see a Welcome to React page running, everything is good.

然后，浏览器应自动在http：// localhost：3000 /打开页面。如果您看到“ 欢迎使用React”页面正在运行，那么一切都很好。

CircleCI设置 (CircleCI Setup)

Next, we need to add a little configuration to setup CircleCI for our project. Create a .circleci folder and a config.yml in that directory and add the following:

接下来，我们需要添加一些配置来为我们的项目设置CircleCI 。在该目录中创建一个.circleci文件夹和一个config.yml ，并添加以下内容：

version: 2jobs:  build:    docker:      - image: circleci/node:8    steps:      - checkout      - restore_cache: # special step to restore the dependency cache          key: dependency-cache-{{ checksum "package.json" }}      - run:          name: Setup Dependencies          command: npm install      - run:          name: Setup Code Climate test-reporter          command: |            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter            chmod +x ./cc-test-reporter      - save_cache: # special step to save the dependency cache          key: dependency-cache-{{ checksum "package.json" }}          paths:            - ./node_modules      - run: # run tests          name: Run Test and Coverage          command: |            ./cc-test-reporter before-build            npm test -- --coverage            ./cc-test-reporter after-build --exit-code $?

This setup is for CircleCI 2.0. They are sunsetting Circle 1.0 on August 31, 2018.

此设置适用于CircleCI 2.0 。他们将于2018年8月31日淘汰Circle 1.0 。

The build step sets up a node:8 with a Docker image. It requires v6 or higher to work.

build步骤使用Docker映像设置一个node:8 。需要v6或更高版本才能工作。

In steps, we first check out the project, restore from the cache if any, then install dependencies. We also install cc-test-reporter, a tool provided by CodeClimate to send a coverage report.

在steps ，我们首先检出项目，如果有的话从缓存中还原，然后安装依赖项。我们还安装了cc-test-reporter ，这是CodeClimate提供的用于发送覆盖率报告的工具。

We then run the test between the before-build and after-build commands according to CodeClimate docs. This notifies CodeClimate of the pending report and when completed, it either sends the report or a failure status.

然后，根据CodeClimate文档， after-build before-build after-build命令之间运行test 。这会将待处理的报告通知CodeClimate，并在完成后发送报告或失败状态。

安装Git (Setup Git)

Create a repo in Github and do the following:

在Github中创建一个仓库，并执行以下操作：

$ git init$ git remote add origin git@github.com:username/new-repo-here$ git add .$ git commit -m “first commit”$ git push -u origin master

This will push the project that we’ve created into GitHub.

这会将我们创建的项目推送到GitHub中。

建立并测试项目 (Build and Test the Project)

Head over to CircleCI, sign in, and build the newly created project. At the end of the build, you should see a failure on the Run Test and Coverage.

转到CircleCI ，登录并构建新创建的项目。在构建的最后，您应该在Run Test and Coverage上看到一个失败。

设置代码气候 (Setup CodeClimate)

The above failure is because we are not authorized to post a report to CodeClimate yet. So, now, head over to CodeClimate, sign in and build the created GitHub project. We should get this at the end of the analysis:

上面的失败是因为我们尚未被授权向CodeClimate发布报告。因此，现在，转到CodeClimate ，登录并构建创建的GitHub项目。我们应该在分析结束时得到这个：

In order to fix the CircleCI issue and use Test Coverage feedback, we will need the Test Reporter ID. This can be retrieved at the Settings > Test Coverage tab. Copy the Test Reporter ID without sharing it with anyone.

为了解决CircleCI问题并使用“ Test Coverage反馈，我们将需要“ Test Reporter ID 。可以在“ Settings > Test Cover标签中进行检索。复制he Test Reporter ID，而不与任何人共享。

In CircleCI, navigate to Project > Settings > Environment variable and add CC_TEST_REPORTER_ID with the copied Test Reporter ID.

在CircleCI中 ，导航至“ Project > Settings > Environment va d add CC_TEST_REPOR带有opied Test Repor ID的opied Test Repor 。

Heroku部署设置 (Heroku Deployment Setup)

In order to deploy React on Heroku , we will use a buildpack. Do the following:

为了在Heroku上部署React，我们将使用一个buildpack 。请执行下列操作：

$ heroku create REPLACE_APP_NAME_HERE — buildpack https://github.com/mars/create-react-app-buildpack.git$ git push heroku master$ heroku open

We pushed the latest master branch to heroku with git push heroku master. A webpage will be open at the end showing the Welcome to React page.

我们推的最新master分支heroku与git push heroku master 。最后将打开一个网页，显示“ 欢迎使用React”页面。

Next, we will have to navigate to the newly create app in Heroku Dashboard to setup automated deployment. Do the following on the dashboard:

接下来，我们将不得不导航到Heroku仪表板中新创建的应用程序以设置自动部署。在仪表板上执行以下操作：

Go to Deploy tab and Connect to the correct GitHub repo.
转到Deploy选项卡，然后连接到正确的GitHub存储库。
Enable Automatic deployment and check Wait for CI to pass before deploy.
启用“自动部署”，然后选中“ Wait for CI to pass before deploy 。

我们完了！ (We are done!)

With a few steps, we have a fully automated continuous integration and deployment suite ready. Now with every commit that is pushed to GitHub, it will send a trigger to CircleCI and CodeClimate. Once the test has passed, if it was on the master branch, it will also be automatically deployed to Heroku.

只需几个步骤，我们就可以准备一个全自动的连续集成和部署套件。现在，每一次提交被推送到GitHub时 ，它将向CircleCI和CodeClimate发送一个触发器。测试通过后，如果它在master分支上，它将也自动部署到Heroku 。

View the sample repo here and the deployed website here!

查看样品回购这里和部署的网站在这里 ！

结论 (Conclusion)

This is an update of my previous post almost a year ago. The use of CircleCI has been updated to 2.0 , and we also use the updated cc-test-reporter by CodeClimate. If you are interested in the migration, you can look at the pull request.

这是我将近一年前的文章的更新。 CircleCI的使用已更新至2.0 ，并且我们还使用了CodeClimate更新的cc-test-reporter 。如果您对迁移感兴趣，可以查看pull request 。

谢谢阅读！如果喜欢，请打??? (Thanks for reading! If you like it, please hit ???)

I enjoy reading and writing about tech and products especially related to boosting the productivity of developers. You can say hello to me on my Twitter or my blog.

我喜欢阅读与写作有关技术和产品的文章，尤其是与提高开发人员的生产力有关的文章。您可以在我的Twitter或博客上向我问好。