DOCKER (SYMFONY + ANGULAR)

Hello :)

Alors tu peux faire un ou deux Dokerfiles, comme tu veux :)

Si tu utilises deux Dockerfiles, il faudra utiliser docker-compose et exposer sur deux ports différents, si angular doit faire des call sur angular ou inversement faudra prendre en compte les ports (coté symfo tu peux ajouter dans ton fichier d'env FRONT_URL enfin appeles la variable comme tu veux et tu mets

localhost:LE_PORT_UTILISE_PAR_ANGULAR

Et pour faciliter les choses utilises docker compose

Merci beaucoup de ton retour, très utile.

Et pour pouvoir voir les changement instantanément sur l'IHM, dois-je mappé quelque chose ?

Faut juste que dans ta commande finale pour lancer l'appli à la fin du Dockerfile tu lances en mode dev :)

pour Symfo symfony server:start, pour Angular jsuis pas sur mais ça doit être npm run dev

En gros dans que Docker met l'appli et pas une version build production-ready il peut voir les changements :p

Si tu passes par composes d'ailleurs un bon truc à faire c'est de faire deux docker-compose.yml, un pour le dev et un pour la prod

Dans ton docker-compose.development.yml tu lances ton symfony server:start et pour docker-compose.production.yml utilises nginx et php-fpm pour lancer l'appli (c'est juste php avec un load balancer, rien à configurer)

pour le npm watch je n'ai aps réussi.

Fais voir ton packages.json ??

Salut,

Perso, je ne fais pas d'angular mais dans mon équipe de dev, on utilise plusieurs frameworks js et dans l'ensemble c'est le même principe quel que soit le framework js quand on veut embarquer son front dans l'app symfony (si on fait juste une api et une SPA qui l'interroge, c'est différent).
Donc voilà comment je procède.
1 - J'ai un docker-compose.yml (ou compose.yaml en version récente de docker) dans lequel je définie les services utiles en prod.
Ce docker-compose contient un service qui fait tourner apache/php et qui référence un Dockerfile (multi-step) dans lequel :

• je builde mes assets js/css à partir d'une image node
• je copie mes assets buildés depuis l'image node (que je mets à la poubelle) vers mon image apache/php qui sert pour la prod

2 - J'ajoute un fichier docker-compose.override.yml ( ou compose.override.yaml) pour surcharger avec les services utiles seulement en dev.
Donc dans celui-ci, je surcharge les chemins pour apache pour qu'il trouve mes fichiers php de symfony et j'ajoute un service nodejs avec une commande 'npm i && npm run dev' ou 'yarn && yarn dev' (au choix) qui me fait le build en temps réel et le live reload.

Je n'utilise pas le binaire symfony car je gère toute ma stack en docker mais si tu ne l'utilise qu'en dev, il suffit de modifier le docker-compose.override fourni par symfony pour ajouter node et faire le build en temps réel de tes assets.

Voici un exemple de config pour node dans le docker-compose.override.yml (port 3000 par défaut et le port 6006 car dans ce projet, j'avais un storybook pour documenter mon front) :

nodejs:
        image: 'node:lts-slim'
        working_dir: /home/node/app
        container_name: front
        command:
            - /bin/sh
            - '-c'
            - 'npm install && npm run dev'
        volumes:
            - './:/home/node/app:rw'
        ports:
            - '3000:3000'
            - '6006:6006'

compose.yaml ? De nouvelles features dessus ou c'est juste le nom du fichier qui est different?

Il détecte tout seul les versions de docker et s'adapte en fonction donc la 1ere ligne (version :'3.X') n'est plus obligatoire.

Bon j'ai pas réussi :/

Voici la commande que je lance à la fin:

CMD ["ng", "serve", "--host", "0.0.0.0", "--poll=1"]

et mon montage:
angular:
build:
context: ./MehdiAppFront
dockerfile: Dockerfile
container_name: angular
volumes:

• ./MehdiAppFront/app:/usr/src/app:rw
• /src/app/node_modules
  ports:
• "4200:4200"

Bonjour,

j'avoue que je ne comprends pas trop comment tu procèdes. le CMD c'est dans le dockerfile donc pas indispensable pour le dev.
pour le dev tu n'as besoin que de l'image de base de node qui pointe vers le bon dossier avec la commande 'npm i && ng serve'.

Donc un truc dans ce genre devrait marcher (en adaptant les chemins) :

front:
        image: 'node:lts-slim'
        working_dir: /home/node/app
        container_name: front
        command:
            - /bin/sh
            - '-c'
            - 'npm install && ng serve'
        volumes:
            - './MehdiAppFront:/home/node/app:rw'
        ports:
            - '4200:4200'

Après je ne connais pas la structure des dossiers avec angular.
Est-ce que tu as un repo github sur lequel on peut voir le projet ?

comment tu fait pour definir ton pwd distant de angular ?