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

Question

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

不使用 post 钩子的原因在这两个 post 中总结得很好： & ，不幸的是，它们没有提供易于理解的替代方法。

Answer 1

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

Answer 2

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

创建一个 static.json 文件以使用 dist/ 中带有 .html 后缀的文件并将所有调用重新路由回 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 3

我有同样的问题，只将 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 被删除，它也会处理它。

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

Gulp deploy dist folder of Node app to Heroku

git

github

heroku

node.js

gulp

创建一个 static.json 文件以使用 dist/ 中带有 .html 后缀的文件并将所有调用重新路由回 SPA

扩展 package.json 脚本以确保构建 dist/ 目录，例如

以便安装来自 package.json 的开发依赖项

多个构建包，以便您构建和部署