在 create-react-app 中配置生产环境(SyntaxError: Unexpected token < in JSON at position 0)

IT技术 node.js reactjs production-environment create-react-app
2021-05-07 06:23:54

我想在我的应用程序中配置生产环境(使用 create-react-app)。也许这是一个愚蠢的问题,因为我正在搜索并且有很多关于此的文章,但这些都没有帮助我。此外,我在此处(生产)和此处(开发)中使用了 create-react-app 中的代码,但仍然无法正常工作。

对于服务器端,我正在使用节点,并且所有 API 都在 React 的开发模式下运行良好。但是当我使用生产模式时它不起作用。

才回来

语法错误:位置 0 处的 JSON 中出现意外标记 <

在浏览器控制台中。

我无法在生产模式下访问服务器中的路由。

我该如何解决?帮助表示赞赏。

这是我的应用程序树,前端文件夹包含我的react代码并在不同的端口上运行(服务器:3000,react:生产:3001,开发:5000)。我已将这行代码添加到 app.js 中:

app.use(express.static(path.join(__dirname, 'front-end/build')));
 app.get('*', function (req, res) {
 res.sendFile(path.join(__dirname, 'front-end/build', 'index.html'));
 });

这在 www.js 中:

if (process.env.NODE_ENV === 'production') {
app.use(express.static('front-end/build'));
 }

在此处输入图片说明

1个回答

我找到了答案,我的应用程序现在在生产模式下工作,我已经部署了它。我刚刚将这一行添加到服务器端代码(节点应用程序)根目录中的 app.js 中:

let root = path.join(__dirname, '..', 'myapp/fron-end/build');
  app.use(express.static(root));
  app.use(function(req, res, next) {
  if (req.method === 'GET' && req.accepts('html') && !req.is('json') && 
     !req.path.includes('.')) {
         res.sendFile('index.html', { root });
    } else next();
  });

这里myapp是我的项目文件夹(服务器端)的名称,fron-end是我的前端文件夹的名称,其中包括为生产创建的构建文件夹。(我将前端文件夹放在服务器端文件夹中)

这个链接对我有帮助。 未捕获的语法错误:意外的令牌 < #1812

希望这对其他人有帮助。