是否有任何受支持的方法可以将 Strapi 后端和 ReactJS 前端部署到单个 Heroku 应用程序中?
我已经成功部署了 Strapi 后端,但我完全无法理解或找不到有关如何部署前端的教程。
是否有任何受支持的方法可以将 Strapi 后端和 ReactJS 前端部署到单个 Heroku 应用程序中?
我已经成功部署了 Strapi 后端,但我完全无法理解或找不到有关如何部署前端的教程。
在您的 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。