如何在一个托管平台上部署Strapi和React?

Question

如何在一个托管平台上部署Strapi和React?

4

大家好，我刚部署了一个 Strapi 和 React 项目，但是我将它们分别进行了托管，这看起来有些奇怪。请问如何将它们部署在同一台主机上？我在网上找不到任何关于这方面的指导。

像这样：

Strapi: https://nuclear-leagcy.herokuapp.com/admin https://nuclear-leagcy.herokuapp.com/graphql React: https://nuclear-leagcy.herokuapp.com 我认为我需要使用 Express 在 server.js 文件中定义应用程序，但当前还没有任何思路。

补充说明：我想在 production 环境中使用 GraphQL，但不想在生产环境中显示 playground 接口，以免被他人盗用。

请问我该如何实现呢？

- Jacob Liu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian · Accepted Answer

如果使用3.0.0.beta.19.5在同一台服务器上部署Strapi + React，则需要执行以下操作。

rootDir = 意味着Strapi项目的根文件夹。

您需要创建一个新的中间件，即rootDir/middlewares/serve-react，并在其中放置这两个文件。

defaults.json

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

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。注意，在此情况下，“after”属性末尾的“serve-react”是唯一添加的内容。

{
  "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"
    ]
  }
}