yeoman_将Yeoman / Angular应用程序部署到Heroku

yeoman

因此，您已经使用Yeoman 启动了AngularJS应用，现在可以向全世界展示它了吗？

好吧，可以将其部署到Heroku！

先决条件

为了充分利用本教程，我们建议您掌握以下技能和资源：

• 终端和命令行基础知识
• 已安装NodeJS和NPM
• Heroku帐户和Heroku工具带
• 现有的Yeoman生成的静态应用

档案

您可以在此处找到该教程项目的仓库 。

让我们向全世界展示您的应用！

节点包

由于我们的Yeoman网站只是一组静态页面，因此我们不能仅仅将其粘贴在Heroku上并期望它能正常工作。 Heroku需要一台服务器来为我们提供页面。

我们将使用Node来为我们的静态站点提供服务，仅包含一些文件和更改。 首先，让我们安装必要的依赖项以部署到Heroku。

npm install gzippo express --save

Gzippo让我们可以提供压缩后的资产，而Express是Node的简单应用程序框架，这将使我们的站点服务更加轻松

服务器文件

我们需要创建一个服务器文件：web.js。 我们将其放在根目录中

/web.js

var gzippo = require('gzippo');
  var express = require('express');
  var app = express();
 
  app.use(express.logger('dev'));
  app.use(gzippo.staticGzip("" + __dirname + "/dist"));
  app.listen(process.env.PORT || 5000);

这就是我们为网站服务所需要的。

dist目录

请注意，我们的服务器正在提供/ dist目录。 如果看不到/ dist目录，那是因为我们尚未构建应用程序。

grunt build

这将编译所有内容，并为您提供一个干净的dist /目录，随时可以使用。 咕gr不妙吗？

重要
值得注意的是，默认情况下git会忽略dist /目录（它们假定您只想对开发项目进行版本控制，而不是已编译的应用程序）。 由于Heroku使用git进行部署，因此我们需要从.gitignore中删除dist /以确保已提交。

Heroku

现在，让我们在根目录中添加一个Procfile。 Procfile告诉Heroku如何启动我们的应用程序。 在这种情况下，我们告诉它使用NodeJS来运行我们的web.js服务器文件。

/程序文件

web: node web.js

对！ 这是关键时刻！ 让我们部署到Heroku！ 首先，让我们将项目目录转换为git repo

git init

假设您拥有一个Heroku帐户并安装了Heroku Toolbelt，则只需运行：

heroku create <your_app_name>

现在提交您的代码并通过推送到Heroku进行部署！

git add .
  git commit -m "Initial Commit"
  git push heroku master

您可能需要将网络工作者扩大到至少一个：

heroku ps:scale web=1

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

要在Heroku上打开您的应用并惊叹于您的成就，请运行：

heroku open

如果您想让我写更多有关使用Angular的信息，请在评论中让我知道。

翻译自: https://www.sitepoint.com/deploying-yeomanangular-app-heroku/

yeoman