65.9K
CodeProject 正在变化。 阅读更多。
Home

NPM 构建和部署

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2016年10月5日

CPOL

4分钟阅读

viewsIcon

14338

使用 NPM 和 Git 构建

引言

本文介绍如何使用 npm 构建和部署一个简单的应用程序,并将其部署在 Heroku 云上。

背景

不久前,我刚接触 npm,当时就在想,如果能有一篇文章可以参考,然后开始使用 node 包管理器进行构建和部署,那就太好了。 所以,我在这里尝试整理一些步骤,以便它可以帮助初学者程序员。

先决条件

在开始构建之前,我们需要确保以下组件已安装在机器上。

  • 最新版本的 NodeJS
    • 使用 “node –version” 命令检查版本
  • 最新版本的 npm
    • 使用 “npm –version” 命令检查版本
  • NPM 应该安装在本地项目目录中。
    • 如果未安装,请在项目目录中使用 “npm install” 命令。
  • Git 客户端应该安装在本地系统中。

构建和部署

Package.json 在 Node/Express 应用程序的构建和部署脚本中扮演着重要的角色。

所有 npm 包都包含此文件,通常位于项目根目录中,称为 package.json - 此文件包含与项目相关的各种元数据。 此文件用于向 npm 提供信息,使其能够识别项目并处理项目的依赖项。 它还可以包含其他元数据,例如项目描述、特定发行版中的项目版本、许可证信息,甚至配置数据 - 所有这些对于 npm 和包的最终用户都至关重要。 package.json 文件通常位于 Node.js 项目的根目录中。

在您的 package.json 中,重要的是 name 和 version 字段。 这些实际上是必需的,如果没有它们,您的包将无法安装。 name 和 version 一起形成一个被认为是完全唯一的标识符。 包的更改应该伴随着版本的更改。

以下是 package.json 文件的示例。

本地部署

请按照以下步骤使用 npm 进行本地构建和部署。

Git init” 命令用于创建一个本地 Git 目录。


  1. Git Add . “ 命令用于将所有文件添加到 git
  2. Git commit -m “Comment”” 命令用于提交本地文件中的更改
  3. 如果远程存储库尚不存在,则创建远程存储库。 使用以下命令创建它
    Git remote add “Remotename” “remotelocaltion”

    这里 Remotename 是远程存储库的名称。

    Remotelocaltion 是远程存储库的位置,它可以是 Web 上的 Git 存储库,也可以是本地系统上的 Git 存储库,您从这里将代码推送到生产/开发环境。

  4. 将您的更改从开发分支推送到远程存储库中的主分支。 使用以下命令
    Git push “origin” master

    Origin 是远程存储库名称。

  5. 对于每次新的代码更改,重复上述步骤 2、3 和 5。

我们可以将步骤 2、3 和 5 合并为一行。 修改 package.json 文件并添加所有以 “&&” 关键字分隔的命令。 请参考以下屏幕

package.json 文件中添加所有命令后,只需运行 “npm run build” 命令。 它将检查新添加的代码,将其推送到远程存储库并重新启动服务器。

以同样的方式,我们可以为自动化设置多个脚本,例如测试、pre/post hooks、代码审查等。 我们可以使用 npm 作为构建工具来实现所有这些。

如果服务器已经启动,我们可以使用 “npm run start” 命令启动。

我们可以在 3000 端口上检查服务器。 端口 3000 是默认侦听器,我们可以通过编写自定义代码来更改它。

为了创建自定义 DNS,我们需要更改以下路径中的 host 文件

  • C:\Windows\System32\drivers\etc\

云部署

在本文档中,我们将介绍在 Heroku Cloud 中的部署。 命令和先决条件根据云环境而变化。

安装

我们需要 Heroku Toolbelt 命令行工具来进行构建和部署。

我们可以从 Heroku.com 下载它。 安装完成后,我们可以从我们的命令 shell 中使用 heroku 命令。

在 Windows 上,启动命令提示符 (cmd.exe) 或 Powershell 以访问命令 shell。

使用您创建 Heroku 帐户时使用的电子邮件地址和密码登录

$ heroku login
Enter your Heroku credentials.
Email: test@example.com
Password:

需要进行身份验证才能允许 heroku 和 git 命令运行。

部署应用程序

在这一步中,我们将应用程序部署到 Heroku。 在 Heroku 上创建一个应用程序,这会准备 Heroku 接收源代码。

$ heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added

当我们创建一个应用程序时,还会创建一个 git remote(称为 heroku)并将其与您的本地 git 存储库相关联。

Heroku 为您的应用程序生成一个随机名称(在本例中为 sharp-rain-871),或者您可以传递一个参数来指定您自己的应用程序名称。

现在使用以下命令部署代码。

$ git push heroku master
Counting objects: 343, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (224/224), done.
Writing objects: 100% (250/250), 238.01 KiB, done.
Total 250 (delta 63), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  0.12.2
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Downloading and installing node 0.12.2...
remote:        Using default npm version: 2.7.4
       ....
remote: -----> Build succeeded!
remote:        +-- ejs@2.3.1
remote:        +-- express@4.9.8
remote:
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing... done, 9.4MB
remote: -----> Launching... done, v8
remote:        http://sharp-rain-871.herokuapp.com deployed to Heroku
To https://git.heroku.com/nameless-savannah-4829.git
 * [new branch]      master -> master
History

现在我们可以通过其应用程序名称生成的 URL 访问该应用程序。 我们可以按如下方式打开网站

$ heroku open command
© . All rights reserved.