Как правильно настроить Nginx с Docker для статики?

Question

[okkkman]

Здравствуйте.

Есть три контейнера:

• Node.js — фронтовое приложение на Vue.js, собранное с помощью Webpack (+ Express.js сервер для SSR и HMR)
  
• Nginx — веб-сервер, при открытии "/" проксирует запросы на Node.js, а "/api/" на PHP-FPM
  
• PHP-FPM — API на Symfony
  

Вопроса три:

1. Как лучше настроить, чтобы все файлы из папки /assets/uploads контейнера php-fpm отдавались не через PHP, а через Nginx, а все остальные через PHP?
   
2. И как лучше настроить, чтобы все файлы из папки /dist контейнера nodejs, чьи расширения равны: js, css и png, отдавались тоже через Nginx, а не Node.js?
   
3. Сейчас содержимое backend приложения получают в качестве volumes два контейнера: php-fpm и nginx, т.е. по сути происходит дублирование (или я ошибаюсь?) не только php файлов, но и содержимого /assets/uploads, которое содержит сотни тысяч файлов (изображения и видео)
   Как можно это обойти? Как грамотно настроить volumes?
   Или проблема в неправильной логике между приложениями?
   

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"]

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

Если есть какие-то советы по оптимизации и улучшению всего этого - пожалуйста, делитесь, только развиваюсь в настройке серверов, поэтому буду рад любым замечаниям и тем более помощи!
Спасибо.

Answer 1

[Алексей Сундуков]

1. Через создание location.
2. Аналогично через location.
3. Дублирования не происходит, т.к. volumes не копируется, а монтируется. Из возможных проблем там могут быть проблемы с правами на файлы.

Comments

[Алексей Сундуков]

У вас явно ошибка закралась. Файл "nginx/Dockerfile" содержит загрузку node, а не nginx. Возможно просто опечатка? Вторую проблему которую я вижу это "/assets/uploads" которая находится в php-fpm контейнере. Но я подозреваю, что наполнение этой директории это артефакты сборки проекта на Webpack, так? Или это реально просто публичная папка с разной статикой которую нужно просто из nginx отдать? Тогда примерно так:

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

    server {
        listen 80;
        root /app;

        server_name test.work;

        location / {
            try_files $uri $uri/ @fpm;
        }


        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 /assets/uploads {
            root /app/backend;

            try_files $uri $uri/ =404;
        }

        location ~ \.php$ {
            try_files     $uri @fpm;

            fastcgi_pass  php-fpm:9000;
            fastcgi_index index.php;

            include       /etc/nginx/fastcgi_params;

            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param DOCUMENT_ROOT   $document_root;
        }

        location @fpm {
            fastcgi_pass  php-fpm:9000;
            fastcgi_index index.php;

            include       /etc/nginx/fastcgi_params;

            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            fastcgi_param DOCUMENT_ROOT   $document_root;
        }
    }
}

Но в целом я предлагаю расписать прямо на бумажке:
- где в php контейнере находятся файлы проекта и как они отражаются на url (файловый_путь -> url_до_файла);
- аналогично для node;
- аналогично для nginx.

Потому что сейчас мне не очень ясно, что это за такой пусть в nginx контейнере /app/web/index.php (почему не /app/backend/index.php?).

[Алексей Сундуков]

Слишком много намешано причем часть мест пересекается. Кроме того для SPA достаточно только статики и смысла держать ноду на беке для этого я не вижу. При разработке и нужде в watch режиме проще ходить на ноду напрямую, чем через nginx. Поэтому я предлагаю схему максимально для начала упростить и выкинуть все лишнее.

Заводим 2 репозитория с кодом: backend (на php под synfony) и frontend (на TS/JS под vue). При этом в репозитории backend будет docker compose для php-fpm и nginx. В репозитории frontend только статика и артефакты сборки которые складываются в dist. В synfony есть папка public которая должна является корневой директорией для nginx. В ней создаем dict куда просто копируем файлы из frontend репозитория. Внутри nginx контейнера создаем /var/www/backend и через volume монтируем его в корень backend репозитория. Пишем nginx конфиг что бы root был в /var/www/backend/public.

Т.е. я предлагаю для начала настроить простую связку synfony в docker через nginx который так же в docker. А про фронт на вермя забыть. А когда получиться настроить и запусить бек, то переходить к фронту.