Угловая маршрутизация не работает на Apache с Symfony Backend

Question

У меня проблема с маршрутизацией в Angular, и я надеюсь, что кто-нибудь мне поможет.

Моя настройка: Я запускаю мое приложение Angular на сервере Apache, который работает внутри контейнера Docker. В дополнение к этому я также включил бэкэнд Symfony, который обрабатывает вызовы API, чтобы изменить мою базу данных. Все эти службы работают в своем собственном контейнере.

докер-compose.yml:

version: '3'
services:
  apache:
    build:
      context: ./apache
      dockerfile: Dockerfile
    container_name: webmail_apache
    links:
      - php_fpm:webmail_php_fpm
    volumes:
      - ./application/symfony:/var/www/webmail
      - ./application/angular/webmail/dist:/var/www/angular
    ports:
      - 80:80

  mysql:
    image: mariadb:10.4
    container_name: webmail_mysql
    volumes:
    - ./mysql/webmail_dump.sql:/docker-entrypoint-initdb.d/webmail_dump.sql
    environment:
      MYSQL_PORT: 3306
      MYSQL_PASSWORD: 'webmail'
      MYSQL_DATABASE: 'webmail'
      MYSQL_USER: 'webmail'
      MYSQL_ROOT_PASSWORD: 'webmail'

  php_fpm:
    build:
      context: ./application
    container_name: webmail_php_fpm
    environment:
      DATABASE_URL: 'mysql://webmail:webmail@mysql:3306/webmail'
    volumes:
    - ./application/symfony:/var/www/webmail:cached
    links:
    - mysql

Соответствующие Dockerfiles:

1. Apache

FROM php:7.2-apache

WORKDIR /var/www/webmail

RUN apt update

RUN a2enmod proxy_fcgi rewrite headers

ADD ./config/webmail.conf /etc/apache2/sites-enabled/000-default.conf

RUN mkdir -p /var/www/angular

RUN mkdir -p /var/www/webmail/secure-all

EXPOSE 80 443

RUN rm -f /run/apache2/apache2.pid
CMD apachectl  -DFOREGROUND -e info

2. PHP-FPM

FROM trion/ng-cli-karma:7.0.6 as angular_builder

ARG RUNTIME_ENVIRONMENT=production

WORKDIR /home/node/app

COPY ./angular/webmail/package.json /home/node/app

RUN npm cache clean --force

RUN npm install --no-optional

COPY ./angular/webmail /home/node/app

RUN ./node_modules/\@angular/cli/bin/ng build --configuration=development

FROM php:7.2-fpm-alpine
ARG TIMEZONE

RUN apk update && apk add --no-cache $PHPIZE_DEPS \
    unzip \
    freetype libpng libjpeg-turbo freetype-dev libpng-dev libjpeg-turbo-dev

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN composer --version

RUN ln -snf /usr/share/zoneinfo/${TIMEZONE} /etc/localtime && echo ${TIMEZONE} > /etc/timezone
RUN printf '[PHP]\ndate.timezone = "%s"\n', ${TIMEZONE} > /usr/local/etc/php/conf.d/tzone.ini
RUN "date"

COPY symfony/php/php-fpm-pool.conf /etc/php/7.2.3/pool.d/www.conf

RUN docker-php-ext-install pdo pdo_mysql
RUN docker-php-ext-configure gd \
    --with-gd \
    --with-freetype-dir=/usr/include/ \
    --with-png-dir=/usr/include/ \
    --with-jpeg-dir=/usr/include/ && \
    NPROC=$(grep -c ^processor /proc/cpuinfo 2>/dev/null || 1) && \
    docker-php-ext-install -j${NPROC} gd  && \
    apk del --no-cache freetype-dev libpng-dev libjpeg-turbo-dev

RUN pecl install apcu && \
    docker-php-ext-enable apcu

WORKDIR /var/www/webmail

ADD symfony /var/www/webmail

RUN mkdir -p /var/www/webmail/var/cache
RUN mkdir -p /var/www/webmail/var/logs
RUN mkdir -p /var/www/webmail/var/sessions

RUN chmod -R 777 /var/www/webmail/var/cache /var/www/webmail/var/logs /var/www/webmail/var/sessions

RUN composer update symfony/flex --no-plugins --no-scripts

RUN composer install

COPY --from=angular_builder /home/node/app/dist/ /var/www/angular/

RUN php /var/www/webmail/bin/console assets:install --symlink --relative

EXPOSE 9000

CMD php-fpm

И мой конфигурационный файл Apache:

<VirtualHost *:80>
        Define server_name webmail
        Define basedocroot  /var/www/webmail
        Define docrootweb   ${basedocroot}/public
        Define logdir   /var/log/apache2

        <FilesMatch .php$>
         SetHandler "proxy:fcgi://webmail_php_fpm:9000"
        </FilesMatch>

        ServerName ${server_name}
        DocumentRoot ${docrootweb}
        ErrorLog ${logdir}/error.log
        CustomLog ${logdir}/access.log Combined

        RewriteEngine On
        RewriteCond %{HTTP:Authorization} ^(.*)
        RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

        <Directory ${docrootweb}>
            AllowOverride All
            Require all granted
        </Directory>

        <Directory ${basedocroot}/var>
            <IfModule mod_authz_core.c>
                Require all denied
            </IfModule>
            <IfModule !mod_authz_core.c>
                Order deny,allow
                Deny from all
            </IfModule>
        </Directory>

        <Directory ${docrootweb}>
            DirectoryIndex ${docrootweb}/index.php
            <IfModule mod_negotiation.c>
                Options -MultiViews
            </IfModule>

            <IfModule mod_rewrite.c>
                RewriteEngine On
                RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::\2$
                RewriteRule ^(.*) - [E=BASE:%1]

                RewriteCond %{HTTP:Authorization} .
                RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

                RewriteCond %{ENV:REDIRECT_STATUS} ^$
                RewriteRule ^index\.php(?:/(.*)|$) %{ENV:BASE}/$1 [R=301,L]

                RewriteCond %{REQUEST_FILENAME} -f
                RewriteRule ^ - [L]

                RewriteRule ^ %{ENV:BASE}/index.php [L]
            </IfModule>

            <IfModule !mod_rewrite.c>
                <IfModule mod_alias.c>
                    RedirectMatch 302 ^/$ /index.php/
                </IfModule>
            </IfModule>
        </Directory>

        Alias /webmail /var/www/angular/webmail
        <Directory /var/www/angular/webmail>

            DirectoryIndex /var/www/angular/webmail/index.html

            <IfModule mod_negotiation.c>
                Options -MultiViews
            </IfModule>

            <IfModule mod_rewrite.c>
                RewriteEngine on
                # Rule for /
                RewriteRule ^$ /webmail/index.html?path=$1 [NC,L,QSA]

                RewriteCond %{REQUEST_FILENAME} !-f
                RewriteCond %{REQUEST_FILENAME} !-d
                # not rewrite css, js and images
                RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
                # Rule for angular routing
                RewriteRule ^(.*)$ /webmail/index.html?path=$1 [NC,L,QSA]
            </IfModule>

        </Directory>

        SetEnv REMOTE_USER dev

        Undefine server_name
        Undefine basedocroot
        Undefine docrootweb
        Undefine logdir
</VirtualHost>

Когда я теперь пытаюсь получить доступ к «localhost» после выполнения «docker-compose up --build», я могу получить доступ к своему бэкэнду (типичный экран-заставка Symfony) и могу успешно выполнять вызовы API. Так что это работает. Однако, если я сейчас попытаюсь перейти к «localhost / webmail /», появится следующая ошибка:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'webmail'
Error: Cannot match any routes. URL Segment: 'webmail'
    at ApplyRedirects.noMatchError (main.e0d50dbd9d708c282a4e.js:129891)
    at CatchSubscriber.selector (main.e0d50dbd9d708c282a4e.js:129855)
    at CatchSubscriber.error (main.e0d50dbd9d708c282a4e.js:141668)
    at MapSubscriber._error (main.e0d50dbd9d708c282a4e.js:138930)
    at MapSubscriber.error (main.e0d50dbd9d708c282a4e.js:138910)
    at MapSubscriber._error (main.e0d50dbd9d708c282a4e.js:138930)
    at MapSubscriber.error (main.e0d50dbd9d708c282a4e.js:138910)
    at MapSubscriber._error (main.e0d50dbd9d708c282a4e.js:138930)
    at MapSubscriber.error (main.e0d50dbd9d708c282a4e.js:138910)
    at ThrowIfEmptySubscriber._error (main.e0d50dbd9d708c282a4e.js:138930)
    at resolvePromise (polyfills.3175072924eb7fb502bc.js:806)
    at resolvePromise (polyfills.3175072924eb7fb502bc.js:763)
    at polyfills.3175072924eb7fb502bc.js:867
    at ZoneDelegate.invokeTask (polyfills.3175072924eb7fb502bc.js:400)
    at Object.onInvokeTask (main.e0d50dbd9d708c282a4e.js:73762)
    at ZoneDelegate.invokeTask (polyfills.3175072924eb7fb502bc.js:399)
    at Zone.runTask (polyfills.3175072924eb7fb502bc.js:177)
    at drainMicroTaskQueue (polyfills.3175072924eb7fb502bc.js:568)

Я прошу прощения за количество кода, но я думаю, что это необходимо, чтобы иметь возможность помочь мне. Я почти уверен, что конфигурационный файл apache неисправен, потому что, если я запускаю свое приложение Angular вне контейнера Docker с «ng serve», я могу успешно добраться до него по адресу «localhost: 4200», и все маршруты работают правильно. Я надеюсь, что кто-то может мне помочь, потому что это проблема, которая мешает мне продолжать разработку.