reactjs - 如何在一台主机上部署 Strapi 和 React?

标签 reactjs express heroku devops strapi

每个人。
我刚刚部署了 Strapi 和 React 项目。
但是我托管了个人,所以这似乎很奇怪。
如何在一台主机上进行部署。我找不到任何有关此的指南。

像这样:

表带:
https://nuclear-leagcy.herokuapp.com/admin
https://nuclear-leagcy.herokuapp.com/graphql

react
https://nuclear-leagcy.herokuapp.com

我想我必须用 express 定义 server.js。但我现在对此没有任何想法。

补充。
我想在生产中使用 graphql,但想在生产中禁用操场界面,以便其他人不能这样做。

我能怎么做?

最佳答案

使用 3.0.0.beta.19.5 在同一台服务器上部署 Strapi + React 你需要做以下事情。

根目录 = 表示 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'));
          });
        },
      };
    };
    

    在链中添加刚刚创建的中间件。 rootDir/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"
        ]
      }
    }
    

    关于reactjs - 如何在一台主机上部署 Strapi 和 React?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61143308/

    相关文章:

    node.js - 部署到 Heroku 时无法使用 Google OAuth 登录

    node.js - Heroku - Node.js - React App - 构建失败 - "Cannot find file"

    javascript - 状态总是落后一步(setState 异步问题)- React js

    node.js - Passport token auth *without* 数据​​库 session

    heroku - 无法安装 heroku-cli。缺少路径

    spring - Heroku 与 H2 数据库

    javascript - 如何制作单个子 div 滚动条?

    reactjs - Jest 性能问题

    node.js - 如何在不使用任何模板引擎的情况下将一些上下文从 Node 服务器发送到 html 模板

    javascript - 如何使用 Ajax、Json 和 Node.js 刷新表格数据