如何将 Strapi 后端和 ReactJS 前端部署到单个 Heroku 应用程序

IT技术 node.js reactjs create-react-app strapi
2021-05-06 19:52:00

是否有任何受支持的方法可以将 Strapi 后端和 ReactJS 前端部署到单个 Heroku 应用程序中?

我已经成功部署了 Strapi 后端,但我完全无法理解或找不到有关如何部署前端的教程。

2个回答

在您的 Strapi 应用程序中,在以下目录中创建以下文件:

./middlewares/serve-react/defaults.json

{
    "serve-react": {
        "enabled": true
    }
}

./middlewares/serve-react/index.js

'use strict';

/**
 * Module dependencies
 */

// Node.js core.
const fs = require('fs');
const path = require('path');
const koaStatic = require('koa-static');

/**
 * Serve react hook
 */

module.exports = strapi => {

  return {
    /**
     * Initialize the hook
     */

    async initialize() {
      const {maxAge, path: publicPath} = strapi.config.middleware.settings.public;
      const staticDir = path.resolve(strapi.dir, publicPath || strapi.config.paths.static);

  strapi.router.get(
    '/*',
    async (ctx, next) => {
      const parse = path.parse(ctx.url);
      ctx.url = path.join(parse.dir, parse.base);

      await next();
    },
    koaStatic(staticDir, {
      maxage: maxAge,
      defer: false, // do not allow other middleware to serve content before this one
    })
  );

  // if no resource is matched by koa-static, just default to serve index file
  // useful for SPA routes
  strapi.router.get('*', ctx => {
    ctx.type = 'html';
    ctx.body = fs.createReadStream(path.join(staticDir + '/index.html'));
  });
},
  };
};

./config/middleware.json

{
  "timeout": 100,
  "load": {
    "before": [
      "responseTime",
      "logger",
      "cors",
      "responses",
      "gzip"
    ],
    "order": [
      "Define the middlewares' load order by putting their name in this array is the right order"
    ],
    "after": [
      "parser",
      "router",
      "serve-react"
    ]
  }
}

如果有人想知道 Muhammad Ahmad 的解决方案是否有效 - 是的,它有效。

最初,我专门使用 MERN 堆栈并使用了两个文件夹 - 一个用于客户端,另一个用于服务器。只有 package.json 位于根目录。在 Heroku 上一切正常,所以我没想到将后端切换到 Strapi 会很困难......

然后我决定尝试将服务器端(Express)替换为 Strapi。之后,将整个案例部署到 Heroku 并在单个 Heroku 应用程序上运行它时出现了问题。

所以,项目结构是:

/root 
      - /client (React UI)
      - /server (Strapi)
      - package.json

为了让整个东西一起工作,有必要在里面修改一下

./middlewares/serve-react/index.js:

 const staticDir = path.resolve(strapi.dir, clientBuildPath || strapi.config.paths.static);

这里clientBuildPath../client/build