node.js - 如何将静态 React "app"部署到 Heroku？

Question

标题是:如何修复 Heroku 上的“无法在模块外使用 import 语句”错误，而不导致“必须使用 import 加载 ES 模块”错误？

这是在我明白我正在尝试部署一个“静态”React“应用程序”并且 Heroku 正在运行 index.js 之前，就好像它是服务器代码一样。

我设置了 Procfile 来包含:

web: node ./src/index.js

然后我看到了这个错误:

...
2020-03-29T02:34:01.000000+00:00 app[api]: Build succeeded
2020-03-29T02:34:02.637867+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-29T02:34:02.622526+00:00 heroku[web.1]: Process exited with status 1
2020-03-29T02:34:02.583667+00:00 app[web.1]: /app/src/index.js:1
2020-03-29T02:34:02.583689+00:00 app[web.1]: import React from 'react';
2020-03-29T02:34:02.583690+00:00 app[web.1]: ^^^^^^
2020-03-29T02:34:02.583690+00:00 app[web.1]:
2020-03-29T02:34:02.583691+00:00 app[web.1]: SyntaxError: Cannot use import statement outside a module
2020-03-29T02:34:02.583691+00:00 app[web.1]: at wrapSafe (internal/modules/cjs/loader.js:1072:16)
...

我尝试通过将其添加到 package.json 来修复它:

  "type": "module",

然后我得到了这个错误:

...
2020-03-29T03:05:01.000000+00:00 app[api]: Build succeeded
2020-03-29T03:05:06.293573+00:00 heroku[web.1]: Starting process with command `node ./src/index.js`
2020-03-29T03:05:08.744086+00:00 heroku[web.1]: State changed from starting to crashed
2020-03-29T03:05:08.724957+00:00 heroku[web.1]: Process exited with status 1
2020-03-29T03:05:08.650103+00:00 app[web.1]: internal/modules/cjs/loader.js:1174
2020-03-29T03:05:08.650125+00:00 app[web.1]: throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
2020-03-29T03:05:08.650126+00:00 app[web.1]: ^
2020-03-29T03:05:08.650126+00:00 app[web.1]:
2020-03-29T03:05:08.650126+00:00 app[web.1]: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/src/index.js
2020-03-29T03:05:08.650127+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
2020-03-29T03:05:08.650127+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:1002:32)
...

我应该注意到，我的 React“应用程序”只是一个前端，它使用我已经在其他地方部署的 GraphQL API。换句话说，不存在“为[我的] React 应用程序提供服务的 server.js”。 ( HMR 的评论让我意识到了这一点。我想正确的术语应该是称之为“静态应用程序”。)

server.js 中的这段代码仅稍微改编自 Tin Nguyen的答案有效:

const http = require('http');
const path = require('path');
const express = require('express');

let wss;
let server;
const app = express();
app.use(express.static(path.join(__dirname, './build')));

server = new http.createServer(app);

server.on('error', err => console.log('Server error:', err));
server.listen(process.env.PORT);

...使用这个Procfile:

web: node ./server.js

唯一的变化是构建目录的路径，我在使用 heroku run bash 窥探后调整了该路径。

我的网站无法正常工作，但我认为这是我的构建不正确的结果。也许可以通过构建包来解决这个问题。但这属于另一个问题。 (我可能不会费心去弄清楚，因为我计划采纳 Tin Nguyen 的建议并尝试在 GitHub 上托管。)

更新:问题不在于我的构建，而在于客户端路由(如 https://create-react-app.dev/docs/deployment/ 中所述)。此代码(来自该页面)修复了它(在 server.js 中):

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT);

---

link in HMR's comment帮助我达成了这种理解，但 Dave Ceddia 写道，他的文章介绍了如何将 React 应用程序和 API 服务器保持在一起。是否有关于如何在 Heroku(或其他地方)上部署前端且 API 服务器已部署在其他地方的文档？

(我发现 this answer 其中 Paras 推荐 Netlify 。)

Answer 1

如果我没看错的话，您有一个静态网站，并且希望将其托管在 Heroku 上。

静态网站可以在 Netlify 和 GitHub 页面上提供。他们不需要网络服务器。您仍然可以通过将 Web 服务器包裹在 Heroku 上来托管它，然后为您的静态文件提供服务。

const http = require('http');
const path = require('path');
const express = require('express');

let wss;
let server;
const app = express();
app.use(express.static(path.join(__dirname, './../build')));

server = new http.createServer(app);

server.on('error', err => console.log('Server error:', err));
server.listen(process.env.PORT);

如何知道您是否有静态网站？
您应该在项目中的某个位置生成了构建文件。您可以导航到该文件夹​​并打开 index.html。即使您没有运行 node 或 npm，该网站也应该可以正常工作。该文件夹位于我的示例 ./../build 中。

我个人建议您通过 Heroku 在 GitHub 上托管静态网站。 Heroku 是“免费”的，但有很多限制。 dyno 时间有限，网站长时间不使用后需要启动等等。