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” scriptDash的“ 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及其回調的功能。 這是一個非?；镜膽贸绦?#xff0c;主要用于演示如何從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 HerokuGithub和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

總結

以上是生活随笔為你收集整理的ci/cd heroku_在Heroku上部署Dash或Flask Web应用程序。 简易CI / CD。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。