reactjs - 无法使用React将nginx代理设置为Docker容器

Question

我正在尝试基于docker容器构建Web应用程序，并包括使用symfony和react。问题是我的Nginx容器无法代理我的容器在开发模式下运行React。通过/api/...请求后端也可以，但是例如当我尝试访问前端domain.com时，出现502错误。

我的 nginx 配置:

upstream frontend {
  server frontend:8080;
}

server {
set $APP_ENV "dev";
set $APP_DEBUG "1";

listen 80;
listen [::]:80 default_server;
server_name store.com;
root /var/www/store/public;

location /api {
    try_files $uri /index.php$is_args$args;
}

location /oauth {
    try_files $uri /index.php$is_args$args;
}

location /_wdt {
    # try to serve file directly, fallback to app.php
    try_files $uri /index.php$is_args$args;
}

location /_profiler {
    # try to serve file directly, fallback to app.php
    try_files $uri /index.php$is_args$args;
}

# DEV
# This rule should only be placed on your development environment
# In production, don't include this and don't deploy app_dev.php or config.php
location ~ ^/(index)\.php(/|$) {
    fastcgi_pass   php:9000;
    fastcgi_split_path_info ^(.+\.php)(/.*)$;
    include fastcgi_params;
    # When you are using symlinks to link the document root to the
    # current version of your application, you should pass the real
    # application path instead of the path to the symlink to PHP
    # FPM.
    # Otherwise, PHP's OPcache may not properly detect changes to
    # your PHP files (see https://github.com/zendtech/ZendOptimizerPlus/issues/126
    # for more information).
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    fastcgi_param DOCUMENT_ROOT $realpath_root;
}

location = /favicon.ico {
        log_not_found off;
        access_log off;
}
location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
}

# return 404 for all other php files not matching the front controller
# this prevents access to other php files you don't want to be accessible.
location ~ \.php$ {
    return 404;
}

location / {
    proxy_pass   http://frontend/;
    proxy_redirect off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
 }

error_log /var/log/nginx/project_error.log;
access_log /var/log/nginx/project_access.log;
}

docker 组成

    version: '3'
services:
    php:
        build: php
        working_dir: /var/www/store
        links:
            - mysql
        volumes:
            - ../backend:/var/www/store
            - ./php/php.ini:/usr/local/etc/php/php.ini:ro
        networks:
            - backend
            - frontend
        environment:
            XDEBUG_CONFIG: remote_host=192.168.31.32

    nginx:
        image: nginx
        links:
            - php
            - frontend
        ports:
            - "80:80"
            - "443:443"
        networks:
            - backend
            - frontend
        volumes:
            - ../backend:/var/www/store
            - ../frontend:/var/www/app
            - ./nginx/vhosts/dev/default.conf:/etc/nginx/conf.d/default.conf:ro

    mysql:
        restart: always
        image: mysql:5.6
        environment:
            MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
            MYSQL_DATABASE: ${MYSQL_DATABASE}
            MYSQL_USER: ${MYSQL_USER}
            MYSQL_PASSWORD: ${MYSQL_PASSWORD}
        networks:
            - backend
        volumes:
            - mysql-data:/var/lib/mysql
        ports:
            - "3306:3306"

    frontend:
        image: node:latest
        user: node
        command: bash -c "npm install && npm start"
        working_dir: /home/node/app
        networks:
            - frontend
        volumes:
            - ../frontend:/home/node/app

networks:
    frontend:
    backend:

volumes:
    mysql-data:

Answer 1

问题不在于nginx或docker配置中，问题在于webpack开发服务器的配置中。通过使用命令"start": "webpack-dev-server --host 0.0.0.0 --inline --content-base"解决启动开发服务器和一些其他配置的问题

devServer: {
    disableHostCheck: true,
    historyApiFallback: true
}