Docker, NGINX et VueJS avec un prefix

Bonjour !

J’essaye depuis ce matin de dockeriser un projet composé de plusieurs API et de projets VueJS.

Voici le Dockerfile de mon projet Vue :

FROM node:lts-alpine as build
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

Ainsi que mon Docker Compose :

version: "3.9"
services:
  my-app:
    build:
      context: ./applications/my-app
      dockerfile: Dockerfile
    volumes:
      - type: volume
        target: /app/node_modules
    ports:
      - 8080:80
  reverse-proxy:
    build:
      context: ./reverse-proxy
      dockerfile: Dockerfile
    ports:
      - 80:80

Ici, le Dockerfile du Reverse Proxy :

FROM nginx:latest
COPY ./conf/dev.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Et enfin, le fichier /conf.dev.conf

server {

    listen 80;

    location /app/a/ {

        proxy_pass http://my-app/;

    }

}

Ici, tout fonctionne bien. J’arrive à accéder à mon application en me rendant sur "http://localhost/app/a".

Je peux même naviguer dans l’application. Cependant, si, en naviguant, j’arrive par exemple sur la page "http://localhost/app/a/ma-super-page", et que je rafraichis la page, je tombe sur une 404 de NGINX.

Et si je me rend directement dans cette URL, idem. Seul l’accueil fonctionne.

J’ai cru voir que si je vais sur la page "ma-super-page", il essaye de trouver un fichier du même nom dans le dossier "html" de nginx. Forcément, on arrive sur une 404 car il n’y à pas un fichier par page, mais un seul fichier index.html.

Ma question : Comment faire pour que même en rafraichissant, cela fonctionne ?

Je ne trouve aucune info sur le sujet, et sur tout ce que je tombe, ils utilisent "location /" et pas "location /subdir/".

L’objectif, c’est que chaque app soit hébergés sur le même serveur avec Docker.

Merci !

Merci infiniment pour ta réponse !

Désolé de ne pas avoir répondu plus vite, mais elle m’a effectivement permis de régler le problème.

En fait, j’ai deux nginx et ils sont utiles. Dans l’exemple que je vous ai donné, en effet, c’est pas très utile. Mais en réalité, j’ai plusieurs API Express et plusieurs apps VueJS, donc le premier nginx me permet de rediriger les requêtes vers les différentes apps (dans mon exemple, il n’y en à qu’une).

Par contre, au départ, ta solution ne fonctionnait pas. C’est après coup que j’ai réalisé que cette configuration, je devais la mettre dans mon second nginx, celui qui sert l’application VueJS.

C’est logique, mais je m’était tellement perdu.

Il faut dire que je ne maîtrisais pas les bases de Docker, et que je me suis attaqué à un très gros morceaux dès le départ.

Maintenant, je suis en train de suivre un super cours sur Docker, j’ai ai passé la journée (et j’y suis encore), tout me paraît beaucoup plus clair.

Comme quoi, les bases, c’est utile (et comprendre ce que l’on fait et pourquoi on le fait, c’est encore mieux).

Bon, je n’en suis pas encore là, mais je pose ma question maintenant, ça pourra m’être utile le moment venu.

L’objectif final, c’est quoi ?

J’ai 2 API Express, et deux APP VueJS. Ces deux applications utilisent ces deux API, et une API communique avec l’autre API.

Au niveau de l’organisation, j’ai un dossier par projet, et chaque projet est sur son propre dépot GitHub.

Mais ils doivent être déployés sur un même serveur, via Docker.

La solution la plus facile, c’est de mettre tous les projets sur le même dépot Git, faire un push sur mon serveur de développement, me connecter en SSH, faire un pull pour récupérer le code, puis faire un docker-compose up --build et voilà, mon application est déployée.

Mais je me dit que l’on peut faire mieux.

Déjà, devoir se connecter manuellement en SSH au serveur pour exécuter les commandes, on pourrais l’automatiser. Ensuite, je souhaiterais garder les différents projets bien séparés dans leurs propre dépôt Git.

Dans ce cas, comment faire ?

J’avais dans l’idée d’utiliser les Webhooks GitHub pour que, lorsque je push un projet, celui-ci se déploie tout seul. Je n’ai pas encore regardé les Webhook en détails, mais il me semble qu’en réalité, ça appel juste une URL. Est-il possible de faire un petit serveur Express sur cette URL pour qu’il lance les commandes Docker ? Est-ce la bonne façon de faire ?

Ensuite, si c’est le cas, une fois que je reçois la requête, celle-ci fait un pull, puis ensuite ? Un docker-compose up --build ou une autre commande ?

Bref, je n’en suis pas encore tout à fait ici, mais j’aimerais déjà avoir les premières réponses pour savoir ce que je dois regarder plus en détails.

En tout cas, merci encore pour ta réponse !