如何从Github将NodeJS应用程序部署到Heroku（无需在计算机上安装Heroku）

by Rohit Ramname

由Rohit Ramname

如何从Github将NodeJS应用程序部署到Heroku(无需在计算机上安装Heroku) (How to deploy a NodeJS app to Heroku from Github (without installing Heroku on your machine))

As a web developer, nothing is more satisfying that being able to show (and show off) your work to the word. Not only through the images or videos on Twitter, but letting them actually interact with it — especially if you are working on some cool side projects or applying for a position.

作为一名Web开发人员，没有比能够用文字展示(和展示)您的作品更令人满意的了。 不仅通过Twitter上的图像或视频，而且还可以使它们与之实际交互-尤其是当您从事一些很酷的副项目或申请职位时。

And fortunately, now with all the cloud providers, sharing your work is a must and is a basic step on your journey.

幸运的是，现在与所有云提供商一起，共享您的工作是必须的，并且是您整个旅程的基本步骤。

In this demo, we will be looking at how to deploy your cool NodeJS app to Heroku. By the end of this demo, we will have a basic Hello World app running on a public domain that can be accessed by anyone.

在此演示中，我们将研究如何将您出色的NodeJS应用程序部署到Heroku。 在本演示结束时，我们将在公共域上运行一个基本的Hello World应用程序，任何人都可以访问该应用程序。

For this demo, I assume that you have Node installed on your machine. If not, you can download from the Nodejs.org website. The steps are simple and can be found online easily.

对于此演示，我假设您在计算机上安装了Node。 如果没有，您可以从Nodejs.org网站下载。 步骤很简单，可以在网上轻松找到。

You will also need a GitHub account to host our code online. If you don’t have an account, you can create one for free on Github.com. With a free account, you can create unlimited public repositories. We will be using the Git version control system to push our changes to Github

您还需要一个GitHub帐户来在线托管我们的代码。 如果您没有帐户，则可以在Github.com上免费创建一个帐户。 使用免费帐户，您可以创建无限的公共存储库。 我们将使用Git版本控制系统将更改推送到Github

第1步：创建该炫酷应用 (STEP 1: Create that Cool App)

Now let’s create that Cool Node App that you have been thinking about.

现在，让我们创建您一直在考虑的Cool Node App。

Create a folder on your local machine and give it a name (of your choice), say MyCoolApp.

说MyCoolApp，在您的本地计算机上创建一个文件夹并给它一个名称(您选择)。

Add a file with the name package.json and paste the below content. This file is basic information of our package. (This can also be created by typing command npm init and accepting all default settings.)

添加一个名为package.json的文件，并粘贴以下内容。 该文件是我们包装的基本信息。 (这也可以通过键入命令npm init并接受所有默认设置来创建。)

One very important change to notice is this line:

需要注意的一个非常重要的变化是此行：

"start": "node app.js"

After the deployment, Heroku will run this command to start your application.

部署后，Heroku将运行此命令来启动您的应用程序。

Add a file, app.js, and paste the below code. This will be the starting point of our app.

添加一个文件app.js，并粘贴以下代码。 这将是我们应用程序的起点。

This code is basically opening a port on the local server and serving some HTML.

这段代码基本上是打开本地服务器上的端口并提供一些HTML。

Please note the most important code block here:

请在这里注意最重要的代码块：

const port = process.env.PORT || 3000

This is extremely important when you want to deploy your application to the cloud. The application server is started on a random port on the cloud. If you hard code a port number, like in all Getting Started guides, and deploy to the cloud, the specific port number may not be available. The application will never start. So it’s better to get the port number assigned by the cloud instance and start the HTTP server.

当您要将应用程序部署到云时，这非常重要。 应用程序服务器在云上的随机端口上启动。 如果像所有入门指南中一样对端口号进行硬编码，然后部署到云中，则特定的端口号可能不可用。 该应用程序将永远不会启动。 因此，最好获取云实例分配的端口号并启动HTTP服务器。

Save the file and run the below command in the command prompt window (which is open inside the folder):

保存文件并在命令提示符窗口(在文件夹内打开)中运行以下命令：

node app.js

With this, Node will start the server and show the below message:

这样，Node将启动服务器并显示以下消息：

Now, if we open http://localhost:3000/ in the browser, we will see this:

现在，如果我们在浏览器中打开http：// localhost：3000 / ，我们将看到：

Cool! We just created a basic NodeJs app.

凉！ 我们刚刚创建了一个基本的NodeJs应用程序。

步骤2：推送至GitHub (STEP 2: Push to GitHub)

Now want to upload our code to GitHub. This way, we will be able to edit our code from anywhere and also deploy the committed changes to the cloud instantly.

现在要将我们的代码上传到GitHub。 这样，我们将能够在任何地方编辑我们的代码，并将已提交的更改立即部署到云中。

Let’s create a Repository on GitHub by clicking New Repository.

让我们通过单击“新建存储库”在GitHub上创建存储库。

Give it a name, some description, and click Create repository:

给它起一个名称，一些描述，然后单击“创建存储库”：

GitHub will create a repository and give you some commands that you can run locally so that you can clone your local folder with your GitHub repository.

GitHub将创建一个存储库，并为您提供一些可在本地运行的命令，以便您可以使用GitHub存储库克隆本地文件夹。

In the command prompt, run below commands in this sequence.

在命令提示符下，按以下顺序运行以下命令。

1. Initialize the Git repository at the root level:
   在根级别初始化Git存储库：

git init

2. Add all the files to your local Git (staging). Notice the last dot:

2.将所有文件添加到本地Git(暂存)。 注意最后一个点：

git add .

3. Commit your changes to your local Git:

3.将更改提交到本地Git：

git commit -m “first commit”

4. Link to your GitHub repository. (Please change the URL to point to your repository.)

4.链接到您的GitHub存储库。 (请更改URL以指向您的存储库。)

git remote add origin https://github.com/rramname/MyCoolNodeApp.git

5. And push your change:

5.并推动您的更改：

git push — set-upstream origin master

You should see messages like below at the command promp.

您应该在命令提示符下看到以下消息。

Now if you open GitHub and refresh the repository, you should be able to see the code.

现在，如果您打开GitHub并刷新存储库，则应该可以看到代码。

步骤3：部署到Heroku (STEP 3: Deploy to Heroku)

Now comes the fun, the reason you have survived all this: deployment.

现在变得很有趣，这就是您在所有这一切中幸存下来的原因：部署。

If you don’t have an account with Heroku, you can open a free one by filling out this simple form. (And here, you don’t need to provided Credit Card information :) )

如果您没有Heroku帐户，则可以填写此简单表格来开设一个免费帐户。 (在这里，您不需要提供信用卡信息：))

Once you have your account ready, login with your credentials.

准备好帐户后，请使用您的凭据登录。

Click New on the top right corner and select “Create new app”.

单击右上角的“新建”，然后选择“创建新应用”。

Give your app a name (This will be included in the public URL for your application) and click Create app.

为您的应用命名(该名称将包含在应用的公共URL中)，然后点击创建应用。

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

此步骤将带您到应用程序的仪表板。 打开“部署”选项卡，然后滚动到“部署方法”部分。

Select GitHub as the method.

选择GitHub作为方法。

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

它将显示一个“连接到GitHub”选项，我们可以在其中提供我们的GitHub存储库。 如果您是第一次这样做，Heroku将要求获得访问您的GitHub帐户的许可。

Here, you can search for your GitHub repository and click connect:

在这里，您可以搜索GitHub存储库，然后单击connect：

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

如果能够找到并连接到GitHub存储库，则将显示“部署”部分，您可以在其中选择是否要“自动部署”(将更改推送到GitHub后，Heroku将其选中并部署)或“手动部署”。

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

单击“启用自动部署”(因为这样可以减少演示应用程序的开销：))。 如果需要，您还可以选择GitHub分支，但是对于本演示，我们将从master分支进行部署。

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

现在，我们需要告诉Heroku我们的应用程序是NodeJs应用程序。 为此，我们将需要重新构建NodeJ。

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

打开设置选项卡，找到构建包，然后单击“添加构建包”。

Select nodejs from the options and click Save changes.

从选项中选择nodejs ，然后单击“保存更改”。

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

现在，返回到“部署”选项卡，然后单击底部的“ 部署分支 ”。

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

Heroku将接受代码并将其托管。 打开活动选项卡，您可以在其中看到进度：

And that’s it!

就是这样！

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

打开设置标签，然后向下滚动到“ 域和证书”部分。 在这里，您可以看到刚刚部署的应用程序的URL。 复制该URL并将其粘贴到浏览器中，然后……哦！

We just created our own web application that can be accessed over the internet.

我们只是创建了自己的Web应用程序，可以通过Internet对其进行访问。

Great!

大！

Please go ahead and share with others!

请继续与他人分享！

Happy Hosting :)

祝您托管愉快:)

翻译自: https://www.freecodecamp.org/news/how-to-deploy-a-nodejs-app-to-heroku-from-github-without-installing-heroku-on-your-machine-433bec770efe/