Can't setup nginx proxy to docker container with react - reactjs

Question

I'm trying to build web application based on docker containers and included usage of symfony and react. The problem is my container with nginx does not proxy my container with react running in development mode.Requests to backend by /api/... works as well, but when I'm trying to access to frontend domain.com for example, I'v got 502 error.
My nginx configuration:
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-compose
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

The problem was not in the nginx or docker configuration, the problem was in the configuration of webpack dev server. Resolved by using command "start": "webpack-dev-server --host 0.0.0.0 --inline --content-base" for start dev server, and some additional config
devServer: {
disableHostCheck: true,
historyApiFallback: true
}