Предисловие
Я создаю приложение, которое будет использовать React для статического интерфейса в паре с бэкэндом graphql, расположенным за nginx.Я пытаюсь использовать nginx в качестве статического файлового сервера для приложения React и в качестве обратного прокси-сервера для моего GraphQL API.Один Docker-контейнер содержит сервер nginx и файлы React, другой Docker-контейнер запускает graphql api.
Проблема
У меня проблема с получением правильной работы React набраузер, когда обслуживается за nginx.
Все файлы доступны, и я получаю 200 OK для всех запросов, но почему-то кажется, что реакция не может найти / загрузить статические активы.Например, ни одна из css не загружается, кажется, javascript запускается, потому что я не получаю сообщение по умолчанию, когда пакет не может быть найден.Я даже попытался свернуть все статические активы, которые реагируют, могут быть получены (успешно).Тем не менее, однако, ни один из css, svgs или образов не хочет загружаться.
Я запускаю совершенно нетронутое приложение create-реагировать.Я запустил точно такое же приложение через сервер разработки, и оно работает, как и ожидалось, я даже скачал Zeit / serve и успешно запустил этот статический файловый сервер.
Я просматривал сообщения SO, прочитал CRA- развертывание , попытался изменить переменные CRA "start_url" и "homepage", но, похоже, проблема не найдена.Я, вероятно, могу запустить zeit / serve в другом контейнере Docker и просто обратиться к нему через прокси через 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>
Как это выглядит(должно быть в наличии create-response-app)
- Это целая целевая страница index.html.
- Обратите внимание, что сообщение выводится на экран, это означает, чтоJavaScript, по крайней мере, работает, иначе получит сообщение по умолчанию.
структура проекта (хост)
Структура контейнера док-станции nginx
