javascript程序_如何部署您JavaScript应用程序-CSDN博客

javascript程序

Have you just finished your first JavaScript application and are now wondering “How do I get my application online?” In this tutorial, we’ll go over the quickest and easiest way on how to deploy your JavaScript application on to Heroku, using Git, Node, Node Package Manager(NPM), and Express.

您刚刚完成了第一个JavaScript应用程序，现在想知道“如何使我的应用程序联机？” 在本教程中，我们将介绍如何使用Git ， Node ， Node Package Manager (NPM)和Express将JavaScript应用程序部署到Heroku上的最快，最简单的方法。

Heroku, is a cloud-based platform which offers a free plan for web developers to manage and deploy their projects. In order to utilize their services, we will have to sign up.

Heroku是基于云的平台，为Web开发人员提供免费计划以管理和部署其项目。为了利用他们的服务，我们将必须注册。

0.先决条件 (0. Prerequisites)

Before we get started, please verify that Git, Node and NPM is installed by running the below commands in your terminal:

在开始之前，请通过在终端中运行以下命令来验证是否已安装Git，Node和NPM：

* $ means to run the command in your terminal.

* $表示在终端中运行命令。

If Node is not installed, download it here.

如果未安装Node，请在此处下载。

$ npm --version

NPM is normally installed alongside with Node. However, if NPM isn’t installed on your system, try to reinstall a more current version of Node.

NPM通常与Node一起安装。但是，如果您的系统上未安装NPM，请尝试重新安装最新版本的Node。

$ git --version

If Git is not installed, download it here. After Git is installed, let’s initialize a local repository for our application.

如果未安装Git，请在此处下载。安装Git之后，让我们为应用程序初始化一个本地存储库。

$ git init

1.安装Heroku CLI (1. Install Heroku CLI)

Once we have signed up for Heroku and installed all prerequisites, install the Heroku CLI and login through your terminal.

一旦我们注册了Heroku并安装了所有必备软件，请安装Heroku CLI并通过您的终端登录。

$ heroku login

2.在应用程序目录中初始化package.json (2. Initialize a package.json in your Application Directory)

If you already have a package.json file already in your root application directory, you can skip to step 3.

如果您的根应用程序目录中已经有一个package.json文件，则可以跳到步骤3。

Otherwise, in your root application directory, run the following command to initialize a package.json file. This file acts as an identifier (like an ID card for your application) and is required by NPM to know which dependencies to install for your application.

否则，在您的根应用程序目录中，运行以下命令来初始化package.json文件。该文件用作标识符(如您的应用程序的ID卡)，并且NPM要求该文件知道要为您的应用程序安装哪些依赖项。

$ npm init

After running the command, you will be prompted with a series of questions which will auto-populate your package.json file with metadata from your answers. You can skip the questions for now by pressing enter as you are able to edit the file later.

运行命令后，系统将提示您一系列问题，这些问题将使用答案中的元数据自动填充package.json文件。您可以通过按enter暂时跳过问题，因为以后您可以编辑文件。

3.安装Express (3. Installing Express)

Next, we will be using a Node.js web application framework called Express to set up our server. To install Express, we’ll need to run the following command:

接下来，我们将使用称为Express的Node.js Web应用程序框架来设置服务器。要安装Express，我们需要运行以下命令：

$ npm install --save express

Using NPM, this will help us download and install the necessary files for the Express module into the application directory. The --save flag will also list Express as a dependency in our package.json file.

使用NPM，这将帮助我们下载Express模块所需的文件并将其安装到应用程序目录中。 --save标志还将在我们的package.json文件中将Express列为依赖项。

4. 设置Express服务器 (4. Setting up the Express server)

Create a server.js file. This will act as our initializer script when we deploy our application on Heroku.

创建一个server.js文件。当我们在Heroku上部署应用程序时，它将用作我们的初始化脚本。

$ touch server.js

Next open the server.js file and save in the following code:

接下来打开server.js文件，并保存以下代码：

What does this even mean? Let’s go into a little bit more detail.

这到底是什么意思？让我们再详细一点。

const express = require('express');
const app = express();
const path = require('path');

In order for our server.js script to use Express, we need to require the Express module by initializing const express = require('express').

为了使我们的server.js脚本使用Express，我们需要通过初始化const express = require('express')来要求Express模块。

The following line, const app = express(), then initializes the app variable with a new Express object. This will allow us to use the methods provided by the Express module.

下一行const app = express() ，然后使用新的Express对象初始化app变量。这将使我们能够使用Express模块提供的方法。

Another module we’ll be using is the Path module provided by Node which we can access by const path = require('path'). This will provide us with a set of methods we can use when working with path directories. In our case, we’ll mostly be using path.join(...).

我们将使用的另一个模块是Node提供的Path模块，可以通过const path = require('path') 。这将为我们提供一系列使用路径目录时可以使用的方法。在我们的例子中，我们将主要使用path.join(...) 。

app.use(express.static(path.join(__dirname)));

The app.use(path, callback) is called whenever a request (GET, POST, PATCH, DELETE) is sent to the path which triggers the callback function. Simply put, think of an event listener being placed on the denoted path with a callback function. However; if a path is not specified, the callback will trigger on every request regardless of the path. Since we currently don’t have a path set, our callback function express.static(...) will trigger on every request our site receives.

所述app.use(path, callback)每当请求(GET，POST，PATCH，DELETE)被发送到其触发回调函数的路径被调用。简而言之，请考虑使用回调函数将事件侦听器放置在指定的路径上。然而; 如果未指定路径，则无论路径如何，回调都会在每个请求上触发。由于我们当前没有设置路径，因此我们的回调函数express.static(...)将在网站收到的每个请求上触发。

The express.static(...) is a middleware function which allows us to expose a directory or file for public usage. In our case, we have passed in path.join(__dirname) as the argument in our middleware function where __dirname represents the root directory of our application. This means every directory and file in our root application directory can be accessed by the client when their browser performs a request.

express.static(...)是一个中间件函数，允许我们公开目录或文件以供公共使用。在我们的例子中，我们在中间件函数中传递了path.join(__dirname)作为参数，其中__dirname表示应用程序的根目录。这意味着客户端的浏览器执行请求时，客户端可以访问我们根应用目录中的每个目录和文件。

Don’t be alarmed! Remember that each time a client goes on to our website, their browser is performing a GET request. In turn, our server should send back a response along with html, css, and js file which makes up the basic web application. If we want to only allow a certain directory to be accessed publicly, we can pass in path.join(__dirname, '[name of the directory]') instead. As our web applications become more sophisticated in manner, we may want to keep certain files hidden which may contain our API keys, secrets, etc. by limiting which files can be accessed publicly.

不要惊慌！请记住，每次客户访问我们的网站时，他们的浏览器都会执行GET请求。反过来，我们的服务器应将构成基本Web应用程序的响应以及html ， css和js文件一起发送回去。如果我们只允许公开访问某个目录，则可以传入path.join(__dirname, ' [name of the directory] ') 。随着我们的Web应用程序变得越来越复杂，我们可能希望通过限制可以公开访问的文件来隐藏某些包含API密钥，机密等内容的文件。

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Here is where we set our routes. In the app.get(path, callback) function, the callback triggers when a GET request is made to the specified path. In our example, we currently have one route to '/’ in which we are sending back index.html to the client. As long as our app.use(express.static(...)) allows our css and js files to be publicly used, the client browser will be able to receive those files for use as well. For now, this is enough to get our site up and running.

这是我们设置路线的地方。在app.get(path, callback)函数中，当对指定路径进行GET请求时，回调将触发。在我们的示例中，我们目前有一条通往'/'路由，在该路由中，我们将index.html发送回客户端。只要我们的app.use(express.static(...))允许我们的css和js文件被公开使用，客户端浏览器也将能够接收这些文件以供使用。目前，这足以使我们的网站正常运行。

app.listen(process.env.PORT || 3000);

This line tells our web application which port to listen on. When we deploy our web application, Heroku will set a default port value for the server to use which will be denoted as process.env.PORT. If a port is not provided, our web application will default to port 3000.

此行告诉我们的Web应用程序要监听哪个端口。当我们部署Web应用程序时，Heroku将为服务器设置一个默认端口值，将其表示为process.env.PORT 。如果未提供端口，则我们的Web应用程序将默认为端口3000。

To quickly test this out, we can run $ node server.js and go to http://localhost:3000 in our browser. Once everything looks good, press Ctrl + C in your terminal to shut down the local server.

为了快速进行测试，我们可以运行$ node server.js并在浏览器中转到http://localhost:3000 。一切正常后，请在终端中按Ctrl + C ，以关闭本地服务器。

4.配置package.json (4. Configuring package.json)

Once we have our server.js configured, we will have to set up instructions for Heroku to run our server when deployed. In your package.json file under scripts add "start": "node server.js".

一旦配置好server.js ，我们将必须设置指令以让Heroku在部署时运行我们的服务器。在脚本的package.json文件中，添加"start": "node server.js" 。

Heroku will automatically look for the start script and execute it when deployed.

Heroku将自动查找启动脚本并在部署后执行。

5.使用Git提交所有更改 (5. Commit all changes using Git)

Now that we have configured all the files we need, run the following commands to commit our changes. First, we will need to stage our changes.

既然我们已经配置了所有需要的文件，请运行以下命令来提交更改。首先，我们需要进行变更。

$ git add .

This command will add all our files to the staging area. Next, we will need to commit the changes.

此命令会将所有文件添加到暂存区。接下来，我们需要提交更改。

$ git commit -m '[type some detailed message here]'

After committing your changes, we can finally deploy our application!

提交更改后，我们终于可以部署我们的应用程序了！

6.将我们的应用程序部署到Heroku (6. Deploying our application to Heroku)

Run the following command and replacing the [] with a name of your application.

运行以下命令，并将[]替换为您的应用程序的名称。

$ heroku create [name of your app]

This will initialize an app on the Heroku website and set up Heroku as a remote repository in your .git file. Once that is done, let’s push our local repository to the remote Heroku repository.

这将在Heroku网站上初始化一个应用程序，并将Heroku设置为您的.git文件中的远程存储库。完成后，让我们将本地存储库推送到远程Heroku存储库。

$ git push heroku master

Once our web application has successfully been pushed up to the remote repository, Heroku will automatically run the npm start script which we have previously defined in our package.json file. In turn, this will run node server.js and start up our server! If all goes well, we will be returned a URL to our web application!

将我们的Web应用程序成功推送到远程存储库后，Heroku将自动运行我们先前在package.json文件中定义的npm start脚本。反过来，这将运行node server.js并启动我们的服务器！如果一切顺利，我们将为我们的Web应用程序返回一个URL！

Good luck and happy coding!

祝您好运，编码愉快！