☰

使用解析服务器托管 reactjs 应用程序

tag-icon • tag-icon parse-server
使用解析服务器托管 reactjs 应用程序

我正在尝试在与解析服务器相同的站点中托管 ReactJS 应用程序。我正在使用以下

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

以及常规解析服务器快速配置

// Serve the Parse API on the /parse URL prefix
var mountPath = process.env.PARSE_MOUNT || '/parse'
app.use(mountPath, api)

但它不起作用。如果能给我指明正确的方向，我将非常感激。

附言：没有错误，我只是得到一个空白页。

答案1

如果没有更多信息很难回答，但我想检查以下几点：

  • 打开开发工具，查看空白页上是否出现错误。您可能正在加载未构建的代码，其中的 egimport语句完整无缺，浏览器会将其视为语法错误

  • 如果您在 express 前面使用反向代理（例如 nginx），请检查其配置。

  • 确保 express 知道index.html响应时要加载/。我不使用 express 来提供静态文件（我直接在 nginx 中执行此操作），因此不熟悉这里的约定。

我使用nginx它来提供静态服务client-build（webpack 包），然后我将parse-server其作为 express 应用程序和parse-dashboard它自己的应用程序运行。nginx，parse-server并且parse-dashboard每个都在自己的 docker 容器中，都在同一个 docker 网络上。

如果有帮助的话，这里是nginx我使用的文件：

server {

    listen 80;
    server_name localhost;
    charset utf-8;
    client_max_body_size 200M;

    # Forward to parse-server docker container
    location /api/ {
        proxy_pass http://server:80/;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-NginX-Proxy true;
        client_max_body_size 200M;
    }

    # Forward to parse-dashboard docker container
    location /parse-dashboard/ {
      include /etc/nginx/mime.types;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-NginX-Proxy true;
      proxy_pass http://parse-dashboard/parse-dashboard/;
      proxy_ssl_session_reuse off;
      proxy_set_header Host $http_host;
      proxy_redirect off;
    }

    # Serve static client build
    location / {
      alias /usr/clientbuild/;
      try_files $uri /index.html;
      gzip_static on;
      expires max;
      add_header Cache-Control public;
    }
}

下面是我在 express 中安装 parse-server 的方法：

var express = require('express');
var ParseServer = require('parse-server').ParseServer;

/* Sample env keys:

    PARSE_SERVER_APPLICATION_ID=yourproduct

    # localhost is the address of parse-server from the perspective of itself
    PARSE_SERVER_URL=http://localhost/api/parse/

    # localhost:9595 is the public address of nginx
    PARSE_PUBLIC_SERVER_URL=http://localhost:9595/api/parse/

    # Note that nginx mount path is /api
    PARSE_SERVER_MOUNT_PATH=/api/parse

    PARSE_SERVER_CLOUD_CODE_MAIN=/usr/src/app/server/build/cloud.js

*/

var startParseServer = function() {

    const cfg = {
        databaseURI: process.env.PARSE_SERVER_DATABASE_URI,
        cloud: process.env.PARSE_SERVER_CLOUD_CODE_MAIN,
        appId: process.env.PARSE_SERVER_APPLICATION_ID,
        masterKey: process.env.PARSE_SERVER_MASTER_KEY,
        serverURL: process.env.PARSE_SERVER_URL,
        publicServerURL: process.env.PARSE_PUBLIC_SERVER_URL,
        mountPath: process.env.PARSE_SERVER_MOUNT_PATH,
        filesAdapter: s3adapter,
        fileKey: process.env.PARSE_SERVER_FILE_KEY,
        allowClientClassCreation: false,
        maxUploadSize: '200mb'
    }

    var api = new ParseServer(cfg);

    var app = express();
    app.set('trust proxy', (ip) => true)

    app.use('/', (req, res, next) => {

        // Static code in development runs from localhost:3000
        const {
            PARSE_SERVER_ALLOW_ORIGIN='http://localhost:3000'
        } = process.env

        res.header('Access-Control-Allow-Origin', PARSE_SERVER_ALLOW_ORIGIN);
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

        next();
    });

    // Not sure if both these are necessary. Haven't messed with it.
    app.use('/parse', api);
    app.use('/api/parse', api);

    var port = process.env.PORT;
    app.listen(port, function() {
        console.log('Running on port ' + port.toString() + '.');
    });
};

startParseServer();

process.on('SIGINT', function() {
    console.log('Received SIGINT');
    process.exit(0);
});

process.on('SIGTERM', function() {
    console.log('Received SIGTERM');
    process.exit(0);
});

希望这对你有帮助。

相关内容