Я попытался запустить некоторые службы через docker-compose. Одним из них является обратный прокси-сервер nginx , обрабатывающий разные пути. Один путь ("/ реагирует") - это контейнерный реактивный реактив с приложением nginx на порту 80. Исключительно, обратный прокси-сервер работает правильно. Кроме того, если я сервер Nginx React_app на порт 80, все работает нормально. Объединение обоих без изменения чего-либо в конфигурации приводит к 404 для статических файлов, таких как css и js.
Настройка № 1
Правильный вперед для пути / теста в Google.
докер-compose.yml
version: "3"
services:
#react_app:
# container_name: react_app
# image: react_image
# build: .
reverse-proxy:
image: nginx:latest
container_name: reverse-proxy
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- ྌ:80'
nginx.conf (обратный прокси)
location /test {
proxy_pass http://www.google.com/;
}
Настройка № 2
Нет обратного прокси. Правильный ответ от nginx внутри контейнера Reaction_app.
докер-compose.yml
version: "3"
services:
react_app:
container_name: react_app
image: react_image
build: .
#reverse-proxy:
# image: nginx:latest
# container_name: reverse-proxy
# volumes:
# - ./nginx.conf:/etc/nginx/nginx.conf
# ports:
# - ྌ:80'
Настройка № 3 (не работает!)
Обратный прокси-сервер и приложение React с nginx. Загружает index.html, но не работает, поэтому загружайте файлы в / static
nginx.conf (обратный прокси)
location /react {
proxy_pass http://react_app/;
}
докер-compose.yml
version: "3"
services:
react_app:
container_name: react_app
image: react_image
build: .
reverse-proxy:
image: nginx:latest
container_name: reverse-proxy
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
ports:
- ྌ:80'
Активация обеих систем приводит к сбою статического содержимого. Мне кажется, что обратный прокси-сервер пытается сервировать файлы, но терпит неудачу (по уважительной причине), потому что в nginx response_app нет записи журнала. Вот конфиг из response_app nginx, возможно, я что-то упустил.
nginx.conf (внутри контейнера Reaction_app)
events {}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
location / {
try_files $uri /index.html;
}
}
}
-> Обновить
Это довольно неудовлетворительный обходной путь - но он работает. Хотя теперь реагирует, маршрутизация перепутана. Я не могу связаться / отреагировать / войти
http {
server {
server_name services;
location /react {
proxy_pass http://react_app/;
}
location /static/css {
proxy_pass http://react_app/static/css;
add_header Content-Type text/css;
}
location /static/js {
proxy_pass http://react_app/statics/js;
add_header Content-Type application/x-javascript;
}
}
}
Всего 1 ответ
Если вы проверите пути отсутствующих статических файлов в вашем браузере, вы заметите, что их относительные пути не соответствуют вашим ожиданиям. Вы можете исправить это, добавив суб-фильтры в конфигурацию обратного прокси-сервера nginx.
http {
server {
server_name services;
location /react {
proxy_pass http://react_app/;
######## Add the following ##########
sub_filter 'action="/' 'action="/react/'
sub_filter 'href="/' 'href="/react/'
sub_filter 'src="/' 'src="/react/'
sub_filter_once off;
#####################################
}
}
}
Это обновит относительные пути к вашим статическим файлам.