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

Posted 2023-03-07

【中文标题】Gulp 将 Node 应用的 dist 文件夹部署到 Heroku

【英文标题】：Gulp deploy dist folder of Node app to Heroku

【发布时间】：2015-05-17 05:02:21

【问题描述】：

我对 node、git、github 和 Heroku 相当陌生，我正在努力找出将我的应用程序发送到 Heroku 的最佳方式，而不会用我编译的、缩小的应用程序弄乱 repo，也不会做太多事情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 并使用更新后脚本，因为它比我想要的更多地将项目与 Heroku 联系在一起。

这两个帖子很好地总结了不使用 post hook 的原因：https://***.com/a/15050864/344022 和 https://***.com/a/21056644/344022，不幸的是，它们没有提供易于理解的替代方案。

【参考方案1】：

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

【讨论】：

在依赖管理或清理中没有人为错误，因为 gulpfile 会为我完成。这两个帖子很好地总结了不使用 post hook 的原因：***.com/a/15050864/344022 和***.com/a/21056644/344022，不幸的是它们没有提供易于理解的替代方案。

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

【参考方案2】：

Heroku 现在有一个正在开发的静态 buildpack 来处理这个问题（请参阅 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 可以为空。

【参考方案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 被删除，它也会处理它。