使用Gulp将Node应用的dist文件夹部署到Heroku

Question

我对Node、Git、Github和Heroku都相对陌生，我正在努力找到最佳方法将我的应用程序发送到Heroku，同时避免在存储库中混杂我的已编译、缩小的应用程序，并尽量减少在Heroku上进行太多操作。

我的node.js项目大致如下：

- client
     ... code
- server
     ... code
- node_modules
- package.json
- gulpfile.js
- dist
    - client
    - server

除了node_modules和dist文件夹外，所有内容都要放到GitHub上。

gulpfile将所有内容编译、压缩和合并，准备发布到dist文件夹中。如何只将dist文件夹推送到Heroku，而不将其放入GitHub？最佳实践是什么？我不想将我的gulpfile发送到Heroku，因为这意味着需要在package.json中移动devDependencies并使用一个post update script，这比我想要的将项目与Heroku绑定更紧密。

不使用后置钩子的原因在这两篇文章中得到了很好的总结：https://dev59.com/QGYr5IYBdhLWcg3wTYgQ#15050864 & https://dev59.com/QGYr5IYBdhLWcg3wTYgQ#21056644，但是不幸的是，它们没有提供易于理解的替代方案。

- conradj

Answer 1

Heroku现在正在开发一个静态构建包来处理这个问题（请参见https://github.com/heroku/heroku-buildpack-static）

创建static.json文件，使用带有.html后缀的dist/目录中的文件，并将所有调用重新路由到SPA

{
  "root": "dist/",
  "clean_urls": true,
  "routes": {
      "/**": "index.html"
  }
}

扩展 package.json 中的 scripts 以确保构建 dist/ 目录，例如：

"scripts": {
  ...
  "heroku-postbuild": "gulp"
}

确保 package.json 中的开发依赖被安装

heroku config:set NPM_CONFIG_PRODUCTION=false --app

多个构建包，让您可以构建和部署

heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>

在这种情况下，您的 Procfile 可以为空。

- jprosevear

Answer 2

我曾经遇到了只能将dist文件夹推送到heroku应用程序的问题，现在我使用了一种不同的方法，不确定是否是最佳方法，但对我来说有效。我创建了一个deploy文件并添加了以下代码。

  import {spawnSync} from 'child_process';

  function deploy(){ 
    options = {
      cwd: path.resolve(__dirname, './dist')
    };
    //push dist folder to deploy repo
    console.log('Initialising Repository');
    spawnSync('git',['init'],options);
    console.log('Adding remote url');
    spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
    console.log('Add all files');
    spawnSync('git',['add','.','--all'],options)
    console.log(`Commit with v${version}`);
    spawnSync('git', ['commit','-m',`v${version}`], options)
    console.log('Push the changes to repo');
    spawnSync('git', ['push', '-f', remote.name, 'master'],options)
 }

将仓库信息保留在package.json中，并在此处读取，我在webpack构建任务后运行此操作。因此，这将推送我的新构建到heroku。即使dist内的.git被删除，它也会处理。

- Sreevisakh

Answer 3

继续，在Heroku上设置一个后置钩子，构建您的应用程序并将文件复制到它们将被提供的位置。这是相当正常的做法，一旦设置好，您只需要进行git push即可部署您的应用程序，这真的非常方便。另一种选择是拥有一个单独的存储库，您可以手动将文件复制并从中推送，但在我看来，这似乎不够流畅，极易出现人为错误，例如混淆依赖项或忘记删除不再需要的生成文件等。

- liamness

---

依赖管理或清理工作不会出现人为错误，因为gulpfile会自动完成。这两篇文章很好地总结了不使用后置钩子的原因：https://dev59.com/QGYr5IYBdhLWcg3wTYgQ#15050864和https://dev59.com/QGYr5IYBdhLWcg3wTYgQ#21056644，但遗憾的是它们没有提供易于理解的替代方案。 - conradj

也许你应该编写一个 gulp 任务来为你进行部署。你可以像往常一样构建应用程序，然后在完成后执行类似于第二个链接中的脚本。 - liamness