How to properly configure Nginx with Docker for static?

Question

Nginx

Hello.

There are three containers:

• Node.js is a Vue.js front-end application built with Webpack (+ Express.js server for SSR and HMR)
  
• Nginx is a web server, when opened "/" proxies requests to Node.js, and "/api/" to PHP-FPM
  
• PHP-FPM - Symfony API
  

Three questions:

1. What is the best way to configure all files from the /assets/uploads folder of the php-fpm container to be served not through PHP, but through Nginx, and all the rest through PHP?
   
2. And what is the best way to configure all files from the /dist folder of the nodejs container, whose extensions are equal: js, css and png, to be served through Nginx too, and not Node.js?
   
3. Now the contents of the backend application are received as volumes by two containers: php-fpm and nginx, i.e. in fact, there is duplication (or am I wrong?) not only of php files, but also of the contents of /assets/uploads, which contains hundreds of thousands of files (images and videos)
   How can I get around this? How to properly configure volumes?
   Or is the problem in the wrong logic between applications?
   

docker-compose.yml:

version: "3.5"

services:
  nodejs:
    container_name: nodejs
    build:
      context: .
      dockerfile: docker/nodejs/Dockerfile
    volumes:
      - ./front:/app
    ports:
      - "3000:3000"
    networks:
      - test-network

  php-fpm:
    container_name: php-fpm
    build:
      context: .
      dockerfile: docker/php-fpm/Dockerfile
    volumes:
      - ./back:/app
    networks:
      - test-network

  nginx:
    container_name: nginx
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    volumes:
      - ./back:/app
    ports:
      - "80:80"
    depends_on:
      - nodejs
      - php-fpm
    networks:
      - test-network

networks:
  test-network:
    name: test-network
    driver: bridge

nginx.config:

events {}

http {
    include  /etc/nginx/mime.types;

    server {
        listen 80;

        server_name test.work;

        location / {
            proxy_redirect                      off;
            proxy_set_header Host               $host;
            proxy_set_header X-Real-IP          $remote_addr;
            proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto  $scheme;
            proxy_read_timeout          1m;
            proxy_connect_timeout       1m;
            proxy_pass http://nodejs:3000;
        }

        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;
            include fastcgi_params;
            fastcgi_param REQUEST_URI $document_uri;
            fastcgi_param SCRIPT_NAME /index.php;
            fastcgi_param SCRIPT_FILENAME /app/web/index.php;
            fastcgi_pass php-fpm:9000;
        }

        location /uploads {
            root /app/web;

            try_files $uri =404;
        }
    }
}

nginx/Dockerfile:

FROM node:lts-alpine

WORKDIR /app

COPY ./front/package*.json ./

RUN npm config set registry http://registry.npmjs.org/ && npm install && \
    npm i webpack -g && \
    npm i webpack-cli -g && \
    npm i webpack-hot-middleware -g && \
    npm i cross-env -g

COPY ./front ./app

EXPOSE 3000

CMD ["npm", "run", "server"]

------------

If you have any tips for optimizing and improving all this - please share, I'm just developing in setting up servers, so I'll be glad for any comments and even more help!
Thank you.

Answer 1

1. Through the creation of location.
2. Similarly, through location.
3. Duplication does not occur, because volumes is not copied, but mounted. Of the possible problems there may be problems with file permissions.