Vite server with laravel app on Docker containers - php

Question

I'm not really sure of how this should work so correct me if I'm wrong because I don't quite know what I'm taling about. I'm having issues hosting a vite server on my Docker dev environment. For now, I have a simple setup for hosting my Laravel/Breeze app with Nginx and a simple MySQL database.
How would you implement a vite server in such architecture?
I have tried installing nodeJS on my Laravel app container (PHP) and running the node dev server but it doesn't seem to host the correct files, I think it is still serving static PHP files.
### ./qa-app/Dockerfile
FROM node:latest
FROM php:8.0-fpm
# Installation de node pour le serveur bundeling de Vite, uniquement pour dev env
COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
RUN ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm
# Variables définies dans le fichier docker-compose.yml
ARG user
ARG uid
# Instllation des dépendances
RUN apt-get update && apt-get install -y \
git \
curl \
libpng-dev \
libonig-dev \
libxml2-dev \
zip \
unzip
# Vidage du cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*
# Installation des extensions PHP
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
# Utilisation de la dernière version Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
# Création d'un utilisateur pour executer les commandes Composer et Artisan
RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/$user/.composer && \
chown -R $user:$user /home/$user
# Définition du répertoire de travail
WORKDIR /var/www
USER $user
Those are the services of my Docker dev environment:
/// ./docker-compose.yml
version: "3.7"
services:
app:
build:
args:
user: command-minion
uid: 1000
context: ./qa-app/
dockerfile: Dockerfile
image: qaapp
container_name: qaapp-app
restart: unless-stopped
working_dir: /var/www/
volumes:
- ./qa-app/:/var/www
networks:
- qaapp
db:
image: mysql:8.0
container_name: qaapp-db
restart: unless-stopped
environment:
MYSQL_DATABASE: qaapp
MYSQL_ROOT_PASSWORD: root
MYSQL_PASSWORD: usepwd
MYSQL_USER: use
SERVICE_TAGS: dev
SERVICE_NAME: mysql
ports:
- 3306:3306
volumes:
- ./docker-compose/mysql:/docker-entrypoint-initdb.d
networks:
- qaapp
nginx:
image: nginx:alpine
container_name: qaapp-nginx
restart: unless-stopped
ports:
- 8000:80
volumes:
- ./qa-app/:/var/www
- ./docker-compose/nginx:/etc/nginx/conf.d/
networks:
- qaapp
networks:
qaapp:
driver: bridge
nginx configuration file:
### ./docker-compose/nginx/qaapp.conf
server {
listen 80;
# Définit les fichiers index à servir en priorité
# Si index.php est trouvé dans le répertoire racine, il sera servi, sinon index.html sera servi
index index.php index.html;
# Fichier des logs d'erreur nginx
error_log /var/log/nginx/error.log;
# Fichier des logs d'accès au serveur nginx
access_log /var/log/nginx/access.log;
# Définition du répertoire racine des fichiers à servir
root /var/www/public;
# Configuration pour les requêtes se terminant par ".php"
location ~ \.php$ {
# Essaie de servir le fichier demandé. Si ce n'est pas possible, renvoie une erreur 404
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# Transmet la requête à l'application sur le port 9000
fastcgi_pass app:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
# Configuration pour toutes les autres requêtes
location / {
# Essaie de servir le fichier demandé. Si ce n'est pas possible, transmet la requête à /index.php avec les paramètres de requête
try_files $uri $uri/ /index.php?$query_string;
# Active la compression gzip pour les fichiers statiques
gzip_static on;
}
}