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

Question

我对node，git，github和Heroku相当陌生，我正在努力找出将我的应用程序发送到Heroku的最佳方式，而不会用我编译的，缩小的应用程序弄乱存储库，也不会在Heroku中做太多事情。

我的节点.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并使用更新后脚本，因为它将项目与Heroku联系起来比我想要的要多。

不使用 post hook 的原因在这两篇文章中得到了很好的总结：https://stackoverflow.com/a/15050864/344022 & https://stackoverflow.com/a/21056644/344022，不幸的是，它们没有提供易于理解的替代方案。

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 脚本以确保构建 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 可以为空。

Answer 2

我遇到了同样的问题，即仅将dist文件夹推送到heroku应用程序，现在我正在使用不同的方法，不确定空闲的方法，但它对我有用。我创建了一个部署文件并添加了以下代码

  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 中保留了 repo 信息并在此处阅读，我在 webpack 构建任务之后运行它。因此，这将把我的新构建推向 heroku。即使dist中的.git被删除，它也会处理它。

Answer 3

继续，在 heroku 上设置一个帖子钩子，它构建您的应用程序并将文件复制到它们将被提供的位置。这是相当正常的做法，一旦设置好，您需要做的就是 git push 来部署您的应用程序，这确实非常方便。另一种方法是拥有一个单独的存储库，您可以手动将文件复制到并从中推送，但这对我来说似乎并不那么流畅，通过弄乱依赖项或忘记删除不再需要的生成文件等，人为错误的可能性更大。