Déployer angular 6 sous ovh mutualisé

Version imprimable

17/09/2018, 15h24
Wilhem31

Déployer angular 6 sous ovh mutualisé

Bonjour tout le monde,

Je ne suis pas du tout un pro de angular mais j'ai fait un petit projet afin de monter en compétence dessus, j'aimerai maintenant le mettre en prod sur un serveur ovh mais n'est aucune idée de la marche à suivre.
Bien sur je ne suis pas arrivé directement ici sans faire quelques recherches, j'ai bien commencé par la doc évidemment :
https://angular.io/guide/deployment

Mais je préfère faire un petit post afin d'avoir des retours et quelques conseils au cas ou.

Si j'ai bien compris, deux solutions :

- ng build, qui n'est pas vraiment une mise en prod mais qui serait plus pour une version test.
- ng build --prod, avec activation du mode prod et les optimisations.

Dans tout les cas, cela me crée un dossier /dist, et ensuite je n'aurai qu'à "copier/coller" ce dossier dans le sous dossier correspondant dans mon ovh ?

Au niveau du développement en local pour la suite, cela n’interfère en rien ? Et au niveau du versionning comment ça ce passe pour la prod ? Je suppose qu'a chaque nouvelle fonctionnalité je ne vais pas supprimer mes anciens dossier dist pour les régénérer et refaire tout le processus ?

Merci du temps que vous accorderez pour me répondre.

Cordialement,
17/09/2018, 23h07
Marco46

Citation:

Envoyé par Wilhem31

Si j'ai bien compris, deux solutions :

- ng build, qui n'est pas vraiment une mise en prod mais qui serait plus pour une version test.
- ng build --prod, avec activation du mode prod et les optimisations.

Ça c'est pour générer ton livrable. Derrière le CLI Angular c'est Webpack qui s'active. La différence entre le ng build sans argument et ng build --prod c'est que celui avec --prod est minifié (html, js et css). Le premier sert donc à tester le deuxième avec la possibilité de le debug (pas minifié donc lisible).

Citation:

Envoyé par Wilhem31

Dans tout les cas, cela me crée un dossier /dist, et ensuite je n'aurai qu'à "copier/coller" ce dossier dans le sous dossier correspondant dans mon ovh ?

Le dossier /dist contient le livrable à déposer sur ton serveur web. Il ne faudra donc pas déposer le dossier dist mais son contenu. Ton index.html doit être à la racine du répertoire de ton serveur web.

Citation:

Envoyé par Wilhem31

Au niveau du développement en local pour la suite, cela n’interfère en rien ?

C'est à dire ?

Citation:

Envoyé par Wilhem31

Et au niveau du versionning comment ça ce passe pour la prod ?

Avant de déployer tu crées un tag pour identifier le commit qui servira à générer le livrable. Tu ne déploies en prod que sur la base d'un tag.

Citation:

Envoyé par Wilhem31

Je suppose qu'a chaque nouvelle fonctionnalité je ne vais pas supprimer mes anciens dossier dist pour les régénérer et refaire tout le processus ?

Si, à chaque livraison tu dois effacer entièrement les fichiers du serveur et copier le nouveau livrable.

La manière de copier le livrable de ta machine (ou de ton intégration continue) vers ton serveur web dépend complètement de l'hébergeur. Ils proposent quoi chez OVH ? Chez Heroku par exemple c'est un repo git. Donc chez Heroku tu copies ton livrable dans un clone local du serveur web, tu commit et ensuite tu push. A voir pour OVH, un simple FTP ou SCP via SSH fait le boulot tout pareil (simplement le livrable est pas versionné).

Il va de soit qu'on parle d'un projet de test perso. Sur un vrai projet c'est beaucoup plus poussé que ça comme gestion et il n'y a pas direct la prod, il y a plusieurs environnements. Mettre en place toute cette infra et les outils avec c'est le taf des DevOps mais c'est une très bonne chose qu'en tant que dev tu mettes les mains dans le cambouis pour voir comment ça se passe !
18/09/2018, 19h33
Wilhem31

Bonjour,

Merci pour la réponse ! Je vais pouvoir testé ça et revenir si problème :)

Concernant Ovh, il y a aussi la possibilité de faire avec un repo git, par contre question bête mais comment ne copier que le dossier dist du repo sur le serveur ?

Je pense faire un test via un simple FTP en effet pour voir ce que ça donne mais j'aimerai bien en savoir plus sur les différentes manières de faire et ce qui est mis en place par les "DevOps" comme tu me dis.

Du coup, si tu as des ressources à me conseiller je suis preneur !

Cordialement,
18/09/2018, 21h25
yildiz-online

Citation:

Envoyé par Marco46

Si, à chaque livraison tu dois effacer entièrement les fichiers du serveur et copier le nouveau livrable.

Pas obligé, tu peux utiliser un simlink sur le dossier.

Pour ma part pour le déploiement, j'ai un CI qui envoie un webhook sur un service de déploiement sur la machine serveur une fois le package terminé (un tar), le service le télécharge, untar, et change le simlink, la version est spécifiée dans le webhook.
19/09/2018, 10h47
Wilhem31

Citation:

Pas obligé, tu peux utiliser un simlink sur le dossier.

Pour ma part pour le déploiement, j'ai un CI qui envoie un webhook sur un service de déploiement sur la machine serveur une fois le package terminé (un tar), le service le télécharge, untar, et change le simlink, la version est spécifiée dans le webhook.

Honnêtement au niveau ou j'en suis, c'est du chinois.

Par contre pour en revenir au problème de base, j'ai donc fais la commande ng build qui m'a généré le livrable, donc création d'un dossier dist qui contient un dossier "NomDeMonProjet" avec les fichiers à l'intérieur, alors je ne sais pas si j'ai bien suivi la marche à suivre mais du coup j'ai mis ce dossier dans le dossier du serveur correspondant.

Pour l'instant je n'ai que l'image de fond qui s'affiche et les erreurs en console :

Citation:

Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/runtime.js ».
Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/polyfills.js ».
Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/styles.js ».
Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/scripts.js ».
Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/vendor.js ».
Échec du chargement pour l’élément <script> dont la source est « http://www.monprojet.fr/main.js ».

J'ai sortit apres coup le index.html du dossier pour le mettre à la racine. Toujours rien, avez vous une idée ? Il y a t'il une manip spécifique à faire?

Cordialement,
19/09/2018, 12h50
yildiz-online

En gros c'est utiliser un symlink (+/- un raccourci sous windows) pour pointer vers ton dossier, comme ça tu peux garder plusieurs versions de ton site.

Pour les js, tu as bien ajouté leurs paths dans la partie "scripts" de ton angular-cli.json?
20/09/2018, 13h50
Watilin

Attention les gens, on parle d’hébergement mutualisé, les possibilités de jouer avec l’environnement (système de fichiers, etc.) sont limitées.
@Wilhem31, ton offre inclut-elle une connexion SSH ? (Voir le guide OVH : Le SSH sur les hébergements web)

Note : avec FTP, assure-toi que tu es en sécurisé (SFTP), c’est inclus dans quasiment toutes les offres OVH, voir Utilisation logiciel FileZilla avec votre hebergement, section « Verifiez l'activation de SFTP ».
25/09/2018, 21h58
ovh

L'idéal serait en effet d'automatiser le build et la copie du livrable sur le serveur avec un script de déploiement (genre Ansible), mais tu peux le faire à la main pour... te faire la main :aie:

Par contre, une question que personne me semble-t-il n'a abordé : qu'en est-il de la partie backend ? Ton application s'exécute-t-elle uniquement dans le navigateur ou y a-t-il une partie serveur, si oui quelle est la stack technique ?
27/09/2018, 14h42
Marco46

Citation:

Par contre, une question que personne me semble-t-il n'a abordé : qu'en est-il de la partie backend ? Ton application s'exécute-t-elle uniquement dans le navigateur ou y a-t-il une partie serveur, si oui quelle est la stack technique ?

Son application Angular ne peut s'exécuter que sur le client ou alors tu fais référence à l'isomorphisme mais il n'en a pas parlé.

Si tu fais références à une appli exposant les services REST consommés par son front c'est une autre appli, donc un autre repo avec un autre versionning, une autre pipeline etc ...
08/10/2018, 16h21
Wilhem31

Bonjour tout le monde,

Désolé pour le retard, pas eu le temps de revenir sur mon projet ces derniers temps !!

Citation:

Pour les js, tu as bien ajouté leurs paths dans la partie "scripts" de ton angular-cli.json?

Je n'ai pas fait ça non, pour l'instant j'ai du mettre tout les fichiers à la racine de projet pour que ça marche, pas seulement le index.html.
Je ne sais pas si c'est la bonne maniere, de plus bien que le site fonctionne je ne comprends pas pourquoi ma gestion des erreurs ne marche pas. ex : ma page 404 not found ne s'affiche pas.

Concernant la partie back en effet c'est une API Rest faite sous symfony donc autre repo !

Citation:

@Wilhem31, ton offre inclut-elle une connexion SSH ?

Oui j'ai une connexion ssh en effet !

Merci de vos retours et bonne journée !