heroku 静态网站

When it comes to deploying an application, there are usually two options: a VPS or a PaaS (platform as a service). This article will show you a recipe for deploying an application to production on a PaaS like Heroku.

部署应用程序时，通常有两个选择： VPS或PaaS (平台即服务)。 本文将向您展示将应用程序部署到像Heroku这样的PaaS上的生产环境的方法。

步骤1-建立专案 (Step 1 - Create the project)

The first step is to create a simple structure for our project with some basic files. For this article, I’ll create a demo server with NodeJS.

第一步是使用一些基本文件为我们的项目创建一个简单的结构。 对于本文，我将使用NodeJS创建一个演示服务器。

In a new folder I’ll open a terminal and run the command

npm init -y

in order to create a new project.  The dummy server will be written in Express, so we need to run the

npm install express

command to install this module.

在一个新文件夹中，我将打开一个终端并运行命令

npm init -y

来创建一个新项目。 虚拟服务器将用Express编写，因此我们需要运行

npm install express

命令来安装此模块。

Once this library is installed, we can create a new file for our project, named

app.js

. Inside it we'll write the code for our simple server:

安装该库后，我们可以为我们的项目创建一个名为

app.js

的新文件。 在其中，我们将为简单服务器编写代码：

We can start the application by running

node app.js

. Then we can try it out at the following URL

http://localhost:3000

. At this point you should see the message

Hello World

in the browser.

我们可以通过运行

node app.js

来启动应用程序。 然后，我们可以在以下URL

http://localhost:3000

进行尝试。 此时，您应该在浏览器中看到消息

Hello World

。

第2步-版本控制系统 (Step 2 - Version control system)

The next step is to choose a version control system and to place our code in a development platform in a repository.

下一步是选择一个版本控制系统，并将我们的代码放在存储库中的开发平台中。

The most popular version control system is Git along with Github as a development platform, so that's what we'll use here.

最受欢迎的版本控制系统是Git以及Github作为开发平台，因此我们将在这里使用它。

On GitHub, go ahead and create a new repository for your application, like this:

在GitHub上，继续为您的应用程序创建一个新的存储库，如下所示：

To upload your local code into a repository, you need to run the commands that are listed on Github after you click

Create repository

button:

要将本地代码上传到存储库中，您需要在单击

Create repository

按钮后运行Github上列出的命令：

! Before we do this, we must ignore some files. We want to upload to the repository only the code that we write, without the dependencies (the installed modules).

！ 在执行此操作之前，我们必须忽略一些文件。 我们只想将我们编写的代码上传到资源库，而没有依赖项(已安装的模块)。

For that, we need to create a new file

.gitignore

and inside it write the file that we want to ignore.

为此，我们需要创建一个新文件

.gitignore

并在其中写入要忽略的文件。

Now, we can write the commands listed in the picture above (the one from GitHub).

现在，我们可以编写上图中列出的命令(来自GitHub的命令)。

If you ran the commands correctly, then it'll be on your repository’s page. If you refresh it you should see your files, except the one that you explicitly ignored, namely

node_modules

.

如果您正确运行了命令，那么它将在您存储库的页面上。 如果刷新它，则应该看到您的文件，但您明确忽略的文件即

node_modules

。

第3步-将存储库与Heroku链接 (Step 3 - Link the repository with Heroku)

At this step, we can link the repository from Github to our Heroku application.

在这一步，我们可以将存储库从Github链接到我们的Heroku应用程序。

First, create a new application on Heroku and follow the steps listed on the platform.

首先，在Heroku上创建一个新应用程序，然后按照平台上列出的步骤进行操作。

Once the application has been created, a window similar to this should appear:

创建应用程序后，将出现类似于以下的窗口：

Now, if you look at the navigation at the top, you'll see  

Overview

,

Resources

,

Deploy

,

Metrics

 and so on. Be sure that

Deploy

is selected. Then on the second row, click on the GitHub icon.

现在，如果您查看顶部的导航，您将看到

Overview

，

Resources

，

Deploy

，

Metrics

等。 确保选择了

Deploy

。 然后在第二行上，单击GitHub图标。

Search for the desired application, which is

demo-deploy-app-09

in our case. Then click

Connect

.

搜索所需的应用程序，在本例中为

demo-deploy-app-09

。 然后单击“

Connect

。

Once the application is successfully connected with your Heroku account, you can click

Deploy Branch

to deploy your application.

应用程序成功与您的Heroku帐户连接后，可以单击

Deploy Branch

部署应用程序。

If you want, you can also select the option

Enable Automatic Deploys

which will automatically pull the code from your Github repository every time you make a push to that repository.

如果需要，您还可以选择选项

Enable Automatic Deploys

，该选项将在每次您推送到该存储库时自动从Github存储库中提取代码。

Once the application has been deployed, you can click on View to open your application.

部署应用程序后，您可以单击“视图”打开您的应用程序。

第4步-配置Heroku以正确运行应用程序 (Step 4 - Configure Heroku to properly run the application)

If you open the application at this point, you should see something like this:

如果此时打开应用程序，则应该看到类似以下内容：

That’s right, an error. That’s because Heroku doesn’t know how to start our application.

是的，这是一个错误。 那是因为Heroku不知道如何启动我们的应用程序。

If you remember, we ran the command

node app.js

to start the application locally.Heroku has no way of knowing what commands it needs to run to start the application, and that's why it threw an error.

如果您还记得的话，我们运行了命令

node app.js

在本地启动应用程序.Heroku无法知道启动该应用程序需要运行哪些命令，这就是为什么会引发错误。

To solve this problem, we must create a new file named

Procfile

with the following content:

web: node ./app.js

.

要解决此问题，我们必须创建一个名为

Procfile

的新文件，其内容如下：

web: node ./app.js

。

To update our application, all we need to do is push a new commit to GitHub. If we have enabled the

Automatic Deploys

option, then the code will be automatically pulled to Heroku. Otherwise we need to click on

Deploy Branch

again.

要更新我们的应用程序，我们要做的就是将新的提交推送到GitHub。 如果我们启用了“

Automatic Deploys

选项，那么代码将被自动拉至Heroku。 否则，我们需要再次单击

Deploy Branch

。

Once the application is rebuilt, we should see it working like so:

重建应用程序后，我们应该可以看到它的工作方式如下：

第5步-如何添加加载项 (Step 5 - How to add an add-on)

One key benefit that Heroku provides is the fact that you can easily add resources in the form of

add-ons

to your project. These external resources come in the form of databases, logging & monitoring tools, CI and CD tools, or testing tools.

Heroku提供的一项主要好处是，您可以轻松以

add-ons

的形式向项目添加资源。 这些外部资源以数据库，日志记录和监视工具，CI和CD工具或测试工具的形式出现。

So now let's see how to add a new resource to your project. First, we'll go to Resources, and from there we'll add a new tool for testing.

现在，让我们看看如何向项目中添加新资源。 首先，我们将转到参考资料，然后从那里添加一个新的测试工具。

Go ahead and click on

Find more add-ons

and then search for

Loadmill

.

继续，单击“

Find more add-ons

，然后搜索

Loadmill

。

Loadmill is a testing tool which is really great for regression testing and load testing.

Loadmill是一种测试工具，对于回归测试和负载测试确实非常有用。

Go ahead and click on

Install…

. Then choose the application you want to link.

继续并单击

Install…

。 然后选择您要链接的应用程序。

At this step, Heroku will automatically create a new account for you on the provisioned platform.

在这一步，Heroku将在预配置的平台上自动为您创建一个新帐户。

On the resources tab, you can see the newly added resource:

在资源选项卡上，您可以看到新添加的资源：

If you go ahead and access this add-on, you should see its dashboard with an intro tutorial and a demo test created for you.

如果继续并访问此加载项，则应看到其仪表板，其中包括入门教程和为您创建的演示测试。

结论 (Conclusion)

Heroku allows developers to quickly and almost painlessly deploy an application on a web server.

Heroku允许开发人员快速，几乎不费力地在Web服务器上部署应用程序。

It also provides a lot of plugins that you can integrate into your application.

它还提供了许多插件，您可以将它们集成到应用程序中。

A PaaS solution will always allow you to move faster than the solution with a VPS where you have to configure everything from the ground up.

PaaS解决方案将始终使您的移动速度比VPS解决方案要快，在VPS中，您必须从头开始配置所有内容。

翻译自: https://www.freecodecamp.org/news/how-to-deploy-an-application-to-heroku/

heroku 静态网站