无法通过反应将 nginx 代理设置为 docker 容器答案

【问题标题】：Can't setup nginx proxy to docker container with react无法通过反应将 nginx 代理设置为 docker 容器
【发布时间】：2019-07-19 07:40:58
【问题描述】：

我正在尝试基于 docker 容器构建 Web 应用程序，并包含 symfony 和 react 的使用。问题是我的带有 nginx 的容器没有代理我的容器，反应在开发模式下运行。/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;
}

码头工人撰写

    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:

【问题讨论】：

在npm start 在端口:80 上工作之后，您是否对应用做出反应？我认为默认情况下应该是:3000，所以在你的nginx中你应该有proxy_pass http://frontend:3000/;。尽管如此，npm start 的这种配置应该只用于开发环境。在生产环境中，您应该使用使用 npm run build 生成的静态文件
在位置/您的代理通行证使用http://frontend，但在顶部它说您的前端服务器侦听端口8080，所以我希望该值是prox_pass http://localhost:8080;
@ttmalak 当我运行docker-compose up 时，我可以从日志中看到来自前端容器的这条消息Project is running at http://localhost:8080/。但是我尝试将端口从 8080 更改为 3000，但它不起作用
@dbrumann 不幸的是它不起作用，我尝试了不同的设置组合。有上游指令，没有它（如你所建议），总是 502 错误
为什么需要start 提供服务？我认为可能存在一些安全限制，不允许通过 npm start 和 proxy_pass 服务响应应用程序

标签： reactjs symfony docker nginx docker-compose

【解决方案1】：

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

devServer: {
    disableHostCheck: true,
    historyApiFallback: true
}

【讨论】：