ci/cd heroku_在Heroku上部署Dash或Flask Web应用程序。 简易CI / CD。

ci/cd heroku

First, we’ll transform the animated scatter map built in my previous article into a basic Dash app, then we’ll take stock on CI/CD concepts, and finally, we’ll deploy the app on Heroku from this GitHub repo.

首先，我们将上一篇文章中构建的动画散点图转换为基本的Dash应用程序，然后评估CI / CD概念，最后，从该GitHub存储库将应用程序部署到Heroku 上 。

Plotly animated scatter map 绘制动画散点图

构建应用 (Building the App)

Dash is a Python framework built on top of Flask and Plotly, designed to make data-driven web applications. Thanks to plotly it provides some basic charts such as histograms and pie charts, and it comes with a multitude of highly parameterizable controls such as dropdowns, checkbox, date sliders, and many more.

Dash是在Flask和Plotly之上构建的Python框架，旨在制作数据驱动的Web应用程序。 多亏了它，它提供了一些基本的图表，例如直方图和饼图，并且还提供了许多高度可参数化的控件，例如下拉菜单，复选框，日期滑块等。

Let’s start by creating a very basic app with as little as a single title and running it.

让我们从创建一个仅包含一个标题的基本应用程序开始并运行它。

Dash’s “Hello World” script Dash的“ Hello World”脚本

By changing the title to “Hello World!”, we’d find here the most basic dash app possible. For people who know about Flask, until now it looks very similar.

通过将标题更改为“ Hello World！”，我们将在这里找到最基本的破折号应用程序。 对于了解Flask的人来说，到目前为止，它看起来非常相似。

Basic Dash app — Rendered interface 基本Dash应用程序-渲染界面

Let’s fulfill that blank page with our scatter map. As the purpose of this article is the Heroku deployment, we’ll assume that data preparation has already been done and stored in a dictionnary with the pickle module. If you’re curious about it, here are some helpful resources:

让我们用散点图填写空白页面。 由于本文的目的是Heroku部署，因此我们假设数据准备已经完成，并与pickle模块一起存储在dictionnary 。 如果您对此感到好奇，这里有一些有用的资源：

• How to prepare data for the map and indicators

  如何为地图和指标准备数据

• The data preparation script and the associated CSS file

  数据准备脚本和关联CSS文件

App’s basic structure 应用程序的基本结构

And here we are with a nice tittle, indicators about the pandemic, and the plotly animated scatter map.

在这里，我们有了一个不错的标题，有关大流行的指示器以及密谋生动的散点图。

Dash application 短跑应用

Note: This app does not aim to demonstrate the power of Dash and its callbacks. It is a very basic application mostly used to demonstrate how to deploy on Heroku from GitHub.

注意：此应用并非旨在演示Dash及其回调的功能。 这是一个非常基本的应用程序，主要用于演示如何从GitHub部署在Heroku上。

Now that we have prepared our application, we will be able to deploy it. To do this we will use the Heroku platform, but let’s start by discovering the concepts of integration and continuous deployment.

现在我们已经准备好应用程序，我们将能够对其进行部署。 为此，我们将使用Heroku平台，但让我们从发现集成和连续部署的概念开始。

CI / CD (CI/CD)

What does it mean? You might have heard about GitLab CI/CD, Circle CI, Travis CI, or any other tool containing these letters. But what does it mean?

这是什么意思？ 您可能听说过GitLab CI / CD，Circle CI，Travis CI或包含这些字母的任何其他工具。 但是这是什么意思？

CI/CD, or Continuous Integration/Delivery and Continuous Deployment, focuses on the rapid release of small incremental changes and the use of automation throughout the development process. At the heart of DevOps, CI/CD tooling is the key to its success. Here are some definitions of those concepts.

CI / CD或持续集成/交付和持续部署致力于快速发布小的增量更改以及在整个开发过程中使用自动化。 作为DevOps的核心，CI / CD工具是其成功的关键。 这是这些概念的一些定义。

CI pipeline with Github and Heroku Github和Heroku的CI管道

Continuous integration: with CI, developers merge their code changes into the repo’s main branch as often as possible. As soon as a change is validated, automated build and test processes are run to validate the accuracy of the change. Defects are detected as early as possible in the development cycle. Test automation is the key to continuous integration to ensure that new commits do not corrupt the application when integrated into the main branch.

持续集成：使用CI，开发人员尽可能频繁地将其代码更改合并到存储库的主分支中。 确认更改后，将运行自动构建和测试过程以确认更改的准确性。 在开发周期中尽早发现缺陷。 测试自动化是持续集成的关键，以确保新提交在集成到主分支中时不会损坏应用程序。

Continuous Delivery: it is an extension of CI, where the software is designed, configured, and parameterized in such a way that it can be put into production automatically at any time.

连续交付 ：这是CI的扩展，在其中可以对软件进行设计，配置和参数化，使其可以随时自动投入生产。

Continuous deployment: it goes even further than continuous delivery, by automatically orchestrating the deployment of applications to the customer with each change. By accelerating the customer feedback loop, the gains can be enormous — in terms of software quality, project deadlines, results, and development costs.

持续部署 ：通过每次更改自动为客户编排应用程序部署，它比持续交付要走得更远。 通过加速客户反馈循环，可以带来巨大的收益-在软件质量，项目截止日期，结果和开发成本方面。

Heroku (Heroku)

Heroku is a cloud Platform as a service (PaaS) that provides servers for web app deployment. It supports several technologies among wich Python, provides a CI/CD service, and has a “Free and Hobby” plan, which makes it a very handy tool for sharing your POCs or other personal projects with customers and friends.

Heroku是一种云平台即服务(PaaS)，可为Web应用程序部署提供服务器。 它支持Python中的多种技术，提供CI / CD服务，并具有“自由自在”的计划，这使其成为与客户和朋友共享POC或其他个人项目的非常方便的工具。

Heroku website) Heroku网站 )

As mentioned earlier, we’ll use CI/CD: we’ll map our app deployment to any push on the master branch of the GitHub repo. Which means that minor modifications should be done on another branch (develop branch for instance). And when modifications have been approved, we’ll merge the develop branch into the master branch. This action will then trigger Heroku and run a new build/deployment of the app from your new code.

如前所述，我们将使用CI / CD： 将应用程序部署映射到GitHub repo master分支上的任何推送 。 这意味着应该在另一个分支(例如， develop分支)上进行较小的修改。 当修改被批准后，我们​​会将develop分支合并到master分支。 然后，此操作将触发Heroku并从您的新代码中运行该应用程序的新生成/部署。

先决条件 (Prerequisite)

When Heroku checks your repo it will automatically detect the used technology (Python in our case). However, for the application to run, there are a few instructions to be followed :

当Heroku检查您的仓库时，它将自动检测使用的技术(在我们的例子中为Python)。 但是，要运行该应用程序，需要遵循一些说明：

• You need to run your app from the app.py file, and this file needs to be at the root of the repo. Any other attempt will result in the following message and a deployment crash.

  您需要从app.py文件运行您的应用程序，并且该文件必须位于存储库的根目录下。 任何其他尝试都会导致以下消息和部署崩溃。

Using index.py instead of app.py as the main file results in a crash 使用index.py而不是app.py作为主文件会导致崩溃

• You need to use a Procfile, it will be looked up by Heroku. It is a single-line file which must be named Procfile and contains the instruction to start the webserver web: gunicorn app:server.

  您需要使用Procfile，Heroku将查找它。 它是一个单行文件 ，必须命名为Procfile并包含启动Web服务器web: gunicorn app:server.的指令web: gunicorn app:server.

• If you used any library for your project, you should specify them in a requirements.txt file. Heroku runs a pip install -r requirements.txt at the beginning of each build. If any used package is not in that file, the deployment will crash. To make sure you don’t forget any package, you can use the Linux command pip freeze > requirements.txt at the root of your project, and it will generate the file with all the needed information.

  如果为项目使用了任何库，则应在requirements.txt文件中指定它们。 Heroku在每个构建的开始都运行pip install -r requirements.txt 。 如果该文件中没有使用的软件包，则部署将崩溃。 为了确保您不会忘记任何软件包，可以在项目的根目录下使用Linux命令pip freeze > requirements.txt ，它将生成包含所有必需信息的文件。

• Important: in addition to your libraries you must add thegunicorn package in your requirements file.

  重要提示：除了库，您还必须在需求文件中添加gunicorn软件包。

• Of course, the app’s code needs to be bug-free!
  当然，应用程序的代码必须没有错误！

Now that you’ve prepared your project for deployment, let’s start the ultimate part deployment!

现在您已经准备好要部署的项目，让我们开始最终的部分部署！

第一次部署 (First deployment)

Here are the steps to follow to instantiate the continuous deployment of an application and achieve its first release.

以下是实例化应用程序的连续部署并实现其首次发布的步骤。

• Sign up and log in to Heroku. When it’s done you’ll land on your personal Dashboard, which is empty for now.

  注册并登录到Heroku 。 完成后，您将进入个人仪表板，该仪表板目前为空。

• Click on “New” on the top-right button and “Create New App”
  点击右上角的“新建”，然后点击“创建新应用”

• You can now enter your application name. It will tell you automatically if it is available or not. As “covid” and all sorts of “covid19”, “covid-19” or “covid_19” were already taken, I choose here “covid-19-world map”. You can also select the region where your app will be hosted: the United States or Europe. The common choice is to select the closest from your users ;)!
  现在，您可以输入您的应用程序名称。 它会自动告诉您是否可用。 由于已经拍摄了“ covid”和各种“ covid19”，“ covid-19”或“ covid_19”，因此我在这里选择“ covid-19世界地图”。 您还可以选择托管应用的区域：美国或欧洲。 常见的选择是从您的用户中选择最接近的;)！
• Click on Create app to access the next screen and associate your repo.
  单击创建应用程序以访问下一个屏幕并关联您的仓库。
• No need to add a pipeline for a single application
  无需为单个应用程序添加管道
• It is time to select the deployment method. Heroku provides a CLI (Command Line Interface) tool, to set-up the deployment from your terminal. But we want to configure it from the interface, then select “Connect to GitHub”
  现在该选择部署方法了。 Heroku提供了CLI(命令行界面)工具，用于从终端设置部署。 但是我们要从界面配置它，然后选择“连接到GitHub”

• As this is the first time, you need to log in to your GitHub account.
  由于这是第一次，您需要登录到GitHub帐户。

• Then you can select the repo to and click on connect. After a few seconds, you’ll be able to select the branch associated with continuous deployment. A best practice is to choose the master branch.

  然后，您可以选择存储库并单击连接。 几秒钟后，您将能够选择与持续部署关联的分支。 最佳实践是选择master分支。

• Check the “Wait for CI to pass before deploy” option and click on “Enable Automatic Deploys”.
  选中“等待CI在部署前通过”选项，然后单击“启用自动部署”。

• When updating your branch it will now run a new build and deploy. You can also select the branch to deploy right now.
  现在，更新分支机构时，它将运行新的构建并部署。 您还可以选择立即部署的分支。

And now the magic happens: after a few seconds, build and deploy will be done. You can connect to your app!

现在神奇的事情发生了：几秒钟后，将完成构建和部署。 您可以连接到您的应用程序 ！

附加信息 (Additional information)

• Now, whenever you update your master branch by pushing a commit or merging a request, the application rebuilds!
  现在，每当您通过推送提交或合并请求来更新master分支时，应用程序都会重建！

• Sometimes the deploy process fails. It is not fun, but it happens. You have 2 tools to help you with that: the logs and the console. You can access both of them from the application page on Heroku, by clicking on the top-right button “More”. With the logs, you can understand what failed and why, but if you still do not understand why your app does not run correctly, you can enter the virtual machine through the console to check your files.

  有时部署过程会失败。 这不是很有趣，但是它确实发生了。 您有2种工具可以帮助您： 日志和控制台 。 您可以通过在Heroku上的应用程序页面上单击右上方的“更多”按钮来访问它们。 通过日志，您可以了解失败的原因以及原因，但是，如果仍然不了解为什么应用程序无法正常运行，则可以通过控制台进入虚拟机以检查文件。

• For now, you’ve subscribed to the Heroku free plan. It is enough for our needs, but it comes with a restriction: after a few hours with no use of the application, the server will shut down. It is not a real problem, though it means that when the next user will use it, he will have to wait for the server to start and the first loading might be a bit longer. If you know that you’ll need to show your piece of work, it can be a good idea to look at the URL a few minutes before to avoid this latency effect.
  目前，您已经订阅了Heroku免费计划。 足以满足我们的需求，但有一个限制：几个小时不使用应用程序后，服务器将关闭。 这不是一个真正的问题，尽管这意味着下一个用户使用它时，他将不得不等待服务器启动，并且第一次加载可能会更长一些。 如果您知道需要展示自己的作品，那么最好在几分钟前查看URL，以避免这种延迟的影响。

结论 (Conclusion)

You’ve deployed your first dash application on Heroku, and now as soon as you modify your code, you can make it visible to anyone all over the globe by simply pushing your code to GitHub. I hope you liked it! It’s now your turn yo deploy basic (and even complex) web applications on Heroku!

您已经在Heroku上部署了第一个破折号应用程序，现在，只要修改代码，只需将代码推送到GitHub，即可将其显示给全球任何人。 我希望你喜欢它！ 现在该轮到您在Heroku上部署基本(甚至复杂)的Web应用程序了！

Next time we’ll discover how to deploy a dash application with Docker using Docker-Compose! Stay tuned :)

下次，我们将发现如何使用Docker-Compose在Docker上部署破折号应用程序！ 敬请关注 ：)

As a reminder, the full code is available on GitHub. Also, you might have noticed the use of the logzero package in the code! I really love this package and its ability to color print statements in the console. I suggest you look at it and read this article where I explain why you should use it in your DS projects.

提醒一下，完整的代码可以在GitHub上找到 。 另外，您可能已经注意到代码中使用了logzero包！ 我真的很喜欢这个程序包及其在控制台中为打印语句着色的功能。 建议您仔细阅读该文章，并阅读本文，解释在DS项目中为什么要使用它。

翻译自: https://towardsdatascience.com/deploying-dash-or-flask-web-application-on-heroku-easy-ci-cd-4111da3170b8

ci/cd heroku