Question

前言

我正在构建一个应用程序，该应用程序将把React用于与nginx后面的graphql后端配对的静态前端。我正在尝试将nginx用作React应用程序的静态文件服务器以及作为我的graphql api的反向代理。一个泊坞窗容器包含Nginx服务器和React文件，另一个泊坞窗容器运行graphql api。

问题

当在nginx后面提供服务时，让React在浏览器上正常工作时遇到问题。

所有文件都可以访问，我对所有请求都获得200个OK，但是由于某种原因，React似乎无法找到/加载静态资产。例如，没有css正在加载，javascript似乎在运行，因为找不到包时我没有收到默认消息。我什至尝试cURLing反应的所有静态资产都可以（成功）获取。但是，仍然没有css，svgs或图像都想要加载。

我正在运行一个完全不变的create-react-app。我已经通过开发服务器运行了完全相同的应用程序，并且按预期运行，甚至下载了zeit / serve并成功运行了该静态文件服务器。

我一直在查找SO帖子，阅读CRA - deployment，尝试修改“ start_url”和“ homepage” CRA变量，但似乎找不到问题。我可能可以在另一个docker容器中运行zeit / serve，并通过nginx对其进行反向代理，但我不希望这样做，因为nginx应该比提供这些响应文件更强大。

以下是一些有用的屏幕截图/配置。如果有任何指针/猜测，我将很乐意尝试一下。如果您还希望上传任何其他屏幕截图或文件，这对于给我一个指示很有用，请告诉我。

对Nginx服务器的请求/响应

nginx.conf

events {

}

http {
  server {
    listen 80;
    index index.html;
    root /app;

    location / {
      try_files $uri /index.html;
    }

    location /api {
      rewrite ^/api(.*)$ / break;
      proxy_pass http://lab1_api:4000;
    }
  }
}

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" href="./favicon.ico"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="description" content="Web site created using create-react-app"/>
        <link rel="apple-touch-icon" href="logo192.png"/>
        <link rel="manifest" href="./manifest.json"/>
        <title>React App</title>
        <link href="./static/css/main.dfca195d.chunk.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script>
            !function(i) {
                function e(e) {
                    for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, l = []; f < n.length; f++)
                        t = n[f],
                        Object.prototype.hasOwnProperty.call(p, t) && p[t] && l.push(p[t][0]),
                        p[t] = 0;
                    for (r in o)
                        Object.prototype.hasOwnProperty.call(o, r) && (i[r] = o[r]);
                    for (s && s(e); l.length; )
                        l.shift()();
                    return c.push.apply(c, u || []),
                    a()
                }
                function a() {
                    for (var e, r = 0; r < c.length; r++) {
                        for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
                            var u = t[o];
                            0 !== p[u] && (n = !1)
                        }
                        n && (c.splice(r--, 1),
                        e = f(f.s = t[0]))
                    }
                    return e
                }
                var t = {}
                  , p = {
                    1: 0
                }
                  , c = [];
                function f(e) {
                    if (t[e])
                        return t[e].exports;
                    var r = t[e] = {
                        i: e,
                        l: !1,
                        exports: {}
                    };
                    return i[e].call(r.exports, r, r.exports, f),
                    r.l = !0,
                    r.exports
                }
                f.m = i,
                f.c = t,
                f.d = function(e, r, t) {
                    f.o(e, r) || Object.defineProperty(e, r, {
                        enumerable: !0,
                        get: t
                    })
                }
                ,
                f.r = function(e) {
                    "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                        value: "Module"
                    }),
                    Object.defineProperty(e, "__esModule", {
                        value: !0
                    })
                }
                ,
                f.t = function(r, e) {
                    if (1 & e && (r = f(r)),
                    8 & e)
                        return r;
                    if (4 & e && "object" == typeof r && r && r.__esModule)
                        return r;
                    var t = Object.create(null);
                    if (f.r(t),
                    Object.defineProperty(t, "default", {
                        enumerable: !0,
                        value: r
                    }),
                    2 & e && "string" != typeof r)
                        for (var n in r)
                            f.d(t, n, function(e) {
                                return r[e]
                            }
                            .bind(null, n));
                    return t
                }
                ,
                f.n = function(e) {
                    var r = e && e.__esModule ? function() {
                        return e.default
                    }
                    : function() {
                        return e
                    }
                    ;
                    return f.d(r, "a", r),
                    r
                }
                ,
                f.o = function(e, r) {
                    return Object.prototype.hasOwnProperty.call(e, r)
                }
                ,
                f.p = "./";
                var r = window.webpackJsonpfrontend = window.webpackJsonpfrontend || []
                  , n = r.push.bind(r);
                r.push = e,
                r = r.slice();
                for (var o = 0; o < r.length; o++)
                    e(r[o]);
                var s = n;
                a()
            }([])
        </script>
        <script src="./static/js/2.14750350.chunk.js"></script>
        <script src="./static/js/main.7811a2b9.chunk.js"></script>
    </body>
</html>

它的外观（应该是stock create-react-app）

这是整个index.html登陆页面。
请注意消息正在输出到屏幕，这表明javascript至少正在运行，否则将获得默认消息。

项目结构（主持人）

nginx docker容器结构

Answer 1

我在 docker 中使用 nginx 遇到了类似的问题，我不得不使用 include /etc/nginx/mime.types; 来解决我的问题。


events {
        worker_connections 768;
        # multi_accept on;
}

http {
    include /etc/nginx/mime.types;
    server {
        listen      80 default_server;

        root /usr/share/nginx/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        location / {
            try_files $uri /index.html;
        }
        
        location /api {
            proxy_pass http://localhost:5000;
        }

    }
}

从nginx错误加载资产中投放create-react-app

1 个答案: