Markdown editing packages running under react generate visual bugs when built in a docker image (api platform app)

Question

I have an API running under PHP Symfony 6.4 with the API Platform overlay. The back office of this application runs under next 12 with React admin. I have a package in my back office allowing me to edit Markdown in order to create personalized popup messages.

In this application, my back office works very well when I deploy it "the old way" on an Ubuntu server or when I launch it locally on Ubuntu, Mac OS or WSL2 when I use a Docker compose. On the other hand, when I launch a Dockerfile which contains the entire App to deploy my API + my back office in a single image. The Markdown editor no longer works properly and I have visual bugs that prevent me from editing posts correctly. When I build locally via "docker build", I have the problem just like when I deploy under Kurbernetes.

Here is my Dokcerfile :

# Description: Dockerfile for the API Platform application
ARG PHP_VERSION=8.3
ARG NODE_VERSION=16.20

########################################################################################
# Step 1: Build PHP from linux/amd64
FROM --platform=linux/amd64 php:${PHP_VERSION}-fpm as php_builder

# Install necessary dependencies for API Platform & nginx
RUN apt-get update && apt-get install --no-install-recommends -y \
    libicu-dev \
    libpq-dev \
    libzip-dev \
    unzip \
    nginx \
    gnupg \
    software-properties-common \
    && docker-php-ext-install \
    intl \
    pdo \
    pdo_pgsql \
    zip \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*
    
# Install Composer 
RUN curl -sS https://getcomposer.org/installer | php -- --disable-tls && \
    mv composer.phar /usr/local/bin/composer

# Set the working directory
WORKDIR /var/www/app

# Copy the project files into the working directory
COPY . .

# Install dependencies with Composer
WORKDIR /var/www/app/api
ENV COMPOSER_ALLOW_SUPERUSER=1
ENV PATH="${PATH}:/root/.composer/vendor/bin"
COPY api/composer.json api/composer.lock api/symfony.lock ./
RUN set -eux \
    composer install --prefer-dist --no-dev --no-scripts --no-progress \
    composer clear-cache

RUN set -eux; \
    mkdir -p var/cache var/log; \
    composer dump-autoload --classmap-authoritative --no-dev; \
    chmod +x bin/console; sync
RUN composer install

# Generate the autoloading files
RUN composer dump-autoload --optimize

########################################################################################
# Step 2: Build the PWA
FROM --platform=linux/amd64 node:${NODE_VERSION}-alpine as pwa_builder
    
WORKDIR /var/www/app/pwa
COPY pwa/ /var/www/app/pwa/
# Installation des dépendances et construction de la PWA
RUN yarn install \
    && yarn build \
    && yarn next export

########################################################################################
# Step 3: Start of the production stage
FROM --platform=linux/amd64 php:${PHP_VERSION}-fpm-alpine as php_prod

# Set environment variables
ENV APP_ENV=prod \
    APP_DEBUG=0 \
    PROJECT_DIRECTORY=my_app \
    PROJECT_DOMAIN=my_app 

# Install necessary dependencies for API Platform & nginx
RUN apk update && apk add --no-cache \
    icu-dev \
    postgresql-dev \
    libzip-dev \
    unzip \
    nginx \
    gnupg \
    && docker-php-ext-install \
    intl \
    pdo \
    pdo_pgsql \
    zip \
    && rm -rf /var/cache/apk/*
    
# Allow memory limit to the maximum available
RUN echo 'memory_limit = -1' >> /usr/local/etc/php/conf.d/docker-php-ram-limit.ini;

# Copy the necessary files from the builder stages
COPY --from=php_builder /var/www/app/api /var/www/$PROJECT_DIRECTORY/api
COPY --from=pwa_builder /var/www/app/pwa/out /var/www/$PROJECT_DIRECTORY/pwa/out

# Copy the Nginx configuration file for API Platform 
# it must match with the nginx alpine image
COPY docker/nginx.conf /etc/nginx/nginx.conf
COPY --chown=www-data:www-data . /var/www/$PROJECT_DIRECTORY
COPY /docker/docker-entrypoint.sh /etc/entrypoint.sh
RUN chmod +x /etc/entrypoint.sh

# Set the working directory
WORKDIR /var/www/$PROJECT_DIRECTORY

# Set permissions
RUN chmod -R 777 /var/www/$PROJECT_DIRECTORY/api
RUN chown -R www-data:www-data /var/www/$PROJECT_DIRECTORY/api

# Expose ports
EXPOSE 80

ENTRYPOINT ["/etc/entrypoint.sh"]

With the bug :

I tried another package and same problem, I had visual bugs.

    "react-markdown": "^9.0.1",
    "react-mde": "^11.5.0",

I also tried to install font packages on my alpine image to feed the package but It does not work. Then finaly, I tried to build on an Ubuntu image but it was unsuccessfull & the image was too big.

Have you ever encounter this kind of problem ?

Answer 1

EDIT : Solved

I solved the problem by adding this lines in my file nginx.conf. Those lines allow serving css before accessing "_next" other files then it works :

    location /_next/static/css/ {
        add_header 'Access-Control-Allow-Origin' '*' always;
        alias /var/www/my_app/pwa/out/_next/static/css/;
        try_files $uri $uri/ =404;
        
        types {
            text/css css;
        }
    }