利用github部署应用_如何从GitHub将超酷Node应用程序部署到Azure

利用github部署应用

by Rohit Ramname

由Rohit Ramname

如何从GitHub将超酷Node应用程序部署到Azure (How to deploy your super cool Node app to Azure from GitHub)

Are you a Nodejs developer who loves developing wonderful apps as a hobby but needs some place to show it off?

您是一个Nodejs开发人员，喜欢将开发优秀的应用程序作为一种爱好，但是需要一些地方来炫耀它吗？

Are you a person fascinated by Azure and tempted to try it out?

您是一个对Azure着迷并想尝试的人吗？

Are you also that person overwhelmed by the configurations that Azure offers?

您是否也被Azure提供的配置所淹没？

Well.. today I will be explaining a very simple way to get your app up and running on Azure in a few clicks.

好吧..今天，我将解释一种非常简单的方法，只需单击几下即可启动您的应用程序并在Azure上运行。

I had published an article about deploying a “cool node app“ to Heroku from Github for free. But now that we have decided to build a “super cool” Node app, we will use another hot cloud service in the market.

我已经发表了一篇关于从Github免费将“酷节点应用程序”部署到Heroku的文章 。 但是，既然我们已经决定构建“超酷” Node应用程序，那么我们将在市场上使用另一种热云服务。

Enough of chitchat…now let’s get to the business.

足够的闲谈……现在让我们开始做生意。

步骤1：创建该超级酷的Node应用程序 (Step 1: Create that super cool Node app)

Let’s create that super cool Node app first.

让我们首先创建一个超酷的Node应用程序。

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

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

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并接受所有默认设置来创建。)

{"name": "supercoolnodeapp","version": "1.0.0","description": "super node app ","main": "app.js","scripts": {"start": "node app.js"},"repository": {"type": "git","url": ""},"author": "","license": "ISC","bugs": {"url": ""},"homepage": ""}

One very important change to notice is this line:

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

"start": "node app.js"

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

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

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

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

const http = require('http');

const port=process.env.PORT || 3000

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/html');

res.end('<h1>Hello World</h1>');

});

server.listen(port,() => {

console.log(`Server running at port `+port);

});

This code is 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 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 created a basic but super cool Nodejs app.

凉！ 我们创建了一个基本但超酷的Node.js应用程序。

步骤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存储库克隆本地文件夹。

Open command prompt inside your app where the package.json file is located. In the command prompt, run the below commands in this sequence.

在您的应用中打开package.json文件所在位置的命令提示符。 在命令提示符下，按顺序运行以下命令。

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/MySuperCoolNodeApp.git

5. And push your change:

5.并推动您的更改：

git push — set-upstream origin master

You should see messages like below at the command prompt.

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

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

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

步骤3：现在，让我们在Azure上进行安装 (STEP 3: Now, let’s get it up on Azure)

This exercise assumes that you have a Microsoft Azure subscription set up and ready for use. If you don’t have one, you can create it for free by going to Microsoft’s Azure website. It will ask you for your credit card information. Your card is never charged unless you purchase paid services (which is not required for this demo).

本练习假定您已设置Microsoft Azure订阅并可以使用。 如果您还没有，则可以访问 Microsoft的Azure 网站免费创建它。 它将询问您的信用卡信息。 除非您购买付费服务(此演示不需要此服务)，否则从不对您的卡收费。

Open portal.azure.com and login with your credentials.

打开portal.azure.com并使用您的凭据登录。

Click Create New Resource on the top left. Enter “web app” in the search box to get the required resource type and hit Enter.

单击左上方的创建新资源。 在搜索框中输入“网络应用”以获取所需的资源类型，然后按Enter。

Select Web App from the search results.

从搜索结果中选择Web App。

And click Create button.

然后点击创建按钮。

We will be asked to provide some basic information for this App:

我们将被要求提供此应用程序的一些基本信息：

The first box is the name of your app. Which is super easy since its SuperCoolNodeApp :)

第一个框是您的应用程序的名称。 自从它的SuperCoolNodeApp :)超级简单

The second option is the subscription. I have registered for the “Pay As You Go” subscription since I have already consumed my free trial. You can select your Free Subscription plan here.

第二个选项是订阅。 我已经使用了免费试用版，因此已经注册了“按需付费”订阅。 您可以在此处选择免费订阅计划。

Next is the resource group. This is the logical grouping of your apps on Azure. You can create new for this app or use existing ones. I created a new one for this app as SuperCoolNodeApp.

接下来是资源组。 这是Azure上应用程序的逻辑分组。 您可以为此应用创建新应用，也可以使用现有应用。 我为此应用程序创建了一个新的SuperCoolNodeApp。

Then, in the end, you will have to select the app service plan. I have created a free plan with the name Test Plan. You can create a new plan if you don’t already have one but make sure you select a Free Version. While selecting, Azure automatically selects S1 tier which is NOT FREE. Make sure you change it to free plan for the demo (Of course, if you want higher capabilities, processing powers etc, go for paid plans.)

然后，最后，您将必须选择应用程序服务计划。 我创建了一个名为Test Plan的免费计划。 如果您还没有一个新计划，则可以创建一个新计划，但请确保选择一个免费版本。 选择时，Azure会自动选择非免费的S1层。 确保将其更改为演示的免费计划(当然，如果您需要更高的功能，更高的处理能力等，请选择付费计划。)

Click Create.

单击创建。

Azure will queue up your request for creating an App with the service plan that you chose and show you a small notification at the top. Creating an app should not take much longer. If you refresh your page in a minute or 2, you should be able to see the app and service plan that was created under all Resources.

Azure将使用您选择的服务计划将您创建应用程序的请求排队，并在顶部显示一条小通知。 创建一个应用程序不需要花费太多时间。 如果在一分钟或两分钟后刷新页面，您应该能够看到在所有参考资料下创建的应用程序和服务计划。

Now, click on it to see the details of the app that we just created.

现在，单击它以查看我们刚刚创建的应用程序的详细信息。

It shows the detail like the subscription the plan is running on, status as Running, Subscription ID, Location on the server that the app is hosted on “Central US” and some FTP details. But the most important thing here is the URL. That is going to be the URL of our application in the cloud.

它显示详细信息，例如计划在其上运行的订阅，状态为正在运行，订阅ID，应用程序在“美国中部”托管的服务器上的位置以及一些FTP详细信息。 但是这里最重要的是URL 。 那将是我们在云中的应用程序的URL。

Now let’s get it there….

现在，让它到达那里。

A little spoiler alert, :) In this section, we will configuring the deployment strategy for our application.

扰流板警报：)在本节中，我们将为应用程序配置部署策略。

Scroll down and click on Deployment Options.

向下滚动并单击部署选项。

Click on Configure required settings and select GitHub. It should show you the below screen.

单击配置所需的设置，然后选择GitHub。 它应该显示以下屏幕。

Click Choose project. This should show you all the repositories on your GitHub account.

单击选择项目。 这应该显示您GitHub帐户上的所有存储库。

If you are doing this for the first time, you will have to provide Azure the authorization to access your GitHub account.

如果您是第一次这样做，则必须向Azure提供访问GitHub帐户的授权。

Here you will be selecting that MySuperCoolNodeApp that you pushed to GitHub.

在这里，您将选择推送到GitHub的MySuperCoolNodeApp。

Next, we can select the branch that we want to deploy from.

接下来，我们可以选择要从中部署的分支。

For now, I only have master so I am leaving the default one.

目前，我只有一位高手，所以我将保留默认的一位。

And that’s it. Click OK.

就是这样。 单击确定。

Azure will take care of deploying the app. It will even show you this little notification that Azure is on his way to do this job.

Azure将负责部署应用程序。 它甚至会向您显示此小通知，说明Azure正在执行此工作。

When it’s done (which really shouldn’t take that long), click on the Deployment options again. You should be able to see the last deployment.

完成后(实际上不应该花那么长时间)，再次单击Deployment选项。 您应该能够看到最近的部署。

If you click on the record, Azure will even show the log of the deployment event.

如果单击该记录，Azure甚至会显示部署事件的日志。

Cool. Now, if you open your app by going to the URL mentioned in the overview section https://supercoolnodeapp.azurewebsites.net/, you expect to see the Hello World message but instead you see the error below.

凉。 现在，如果您通过转到概述部分https://supercoolnodeapp.azurewebsites.net/中提到的URL来打开您的应用程序，则希望看到Hello World消息，但会看到以下错误。

Huh… what is wrong? Logs show that the application was deployed, you don’t see any errors, but the app does not work. It’s a mystery.

嗯...怎么了？ 日志显示该应用程序已部署，您没有看到任何错误，但是该应用程序无法正常工作。 这是一个谜。

There is one small setting that you need to do on the Azure portal to help Azure treat it as a Nodejs app and start it accordingly.

您需要在Azure门户上执行一个小设置，以帮助Azure将其视为Nodejs应用并相应地启动它。

Open the Application Settings and scroll down to the Application Settings section and add the below entry.

打开“应用程序设置”，然后向下滚动到“应用程序设置”部分，然后添加以下条目。

App setting name : WEBSITE_NODE_DEFAULT_VERSION

Value: 8.9.0

It’s basically telling Azure to use this Node version and open the website.

基本上是告诉Azure使用此Node版本并打开网站。

Click Save at the top.

点击顶部的保存。

Now if you go to the URL https://supercoolnodeapp.azurewebsites.net/

现在，如果您转到URL https://supercoolnodeapp.azurewebsites.net/

WOOHOO!!! There you go. We just got our super cool Node app up and running in Azure.

哇！ 妳去 我们刚刚在Azure中启动并运行了超酷的Node应用程序。

Congratulations!! Now every time you make any change to your app and push to GitHub, Azure will catch those and do the continuous deployment.

恭喜!! 现在，每次您对应用程序进行任何更改并推送到GitHub时，Azure都会捕获这些并进行持续部署。

P.S : If you ever build an app cooler than mine :), then please do share.

PS：如果您构建的应用程序比我的酷：)，请共享。

If this article helped you , I love applause here and connects on twitter :)

如果这篇文章对您有所帮助，我会在这里热烈鼓掌，并在Twitter上发表意见：

I only write about programming and technology on Twitter.

我只在Twitter上写有关编程和技术的文章。

Have fun!!

玩得开心！！

翻译自: https://www.freecodecamp.org/news/how-to-deploy-your-super-cool-node-app-to-azure-from-github-47ebff6c5448/

利用github部署应用