Une brève discussion sur la façon de compiler et de conditionner Angular ? Comment publier avec Docker ?

Cet article vous présentera la méthode de compilation Angular, de packaging et de publication Docker. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Environnement :

• CLI angulaire : 11.0.6
• Angulaire : 11.0.7
• Nœud : 12.18.3
• npm : 6.14.6
• IDE : Visual Studio Code

Présentation1.

Une fois le développement d'Angular terminé, comment le déployer sur le serveur ? [Tutoriels associés recommandés : "Tutoriel angulaire"]

2. Compilation et packaging

2.1.

Le projet Angular généré basé sur Angular CLI aura 2 fichiers de configuration d'environnement par défaut

└──myProject/src/environments/
               └──environment.ts
               └──environment.prod.ts

• environment.ts : environnement utilisé pour le développement Fichier d'environnement

• environment.prod.ts : lors de la compilation pour l'environnement de production, l'environnement.ts d'origine sera remplacé puis empaqueté. (angular.json dans le répertoire racine définit ce comportement par défaut, qui peut être modifié si nécessaire)

Après qu'AngularCLI vient de générer deux fichiers, si vous ouvrez et comparez les différences entre les deux fichiers, Vous pouvez voir qu'il existe une telle phrase production: false dans le fichier environnement.ts utilisé dans l'environnement de développement. Parce que, pour l'environnement de production, Angular doit prendre en compte des problèmes tels que l'efficacité lors de la compilation, tandis que pour l'environnement de développement, il doit être pratique pour les développeurs de déboguer, et l'objectif est différent.

Alors, comment le compiler pour un environnement de production ? Angular CLI fournit également la commande

ng build --prod

, où le paramètre --prod indique à l'environnement de compilation de compiler dans un package d'environnement de production. De même, les paramètres de compilation par défaut sont définis dans angulaire.json et peuvent être modifiés si nécessaire. Les principaux paramètres de configuration sont les suivants

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": false,
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "5mb",
            "maximumError": "10mb"
        }
        ]
    }
}

Angular est regroupé par défaut dans le répertoire dist sous le répertoire racine. Les fichiers générés sont de purs fichiers statiques (html, css, js) et des fichiers image.

2.2. Packager et déployer dans le répertoire secondaire

Dans de nombreux cas, notre site Web angulaire ne peut pas être déployé directement dans le répertoire racine du website , il doit être déployé dans le répertoire secondaire. Par exemple, il ne peut pas être déployé sur http://abc.com. Il doit être déployé sur le répertoire secondaire http://abc.com/demo. En réponse à cette situation, nous devons modifier nos paramètres de compilation pour :

ng build --prod --deploy-url /demo/ --base-href /demo/

Ajouter --deploy-url et --base-href.

Scénario d'utilisation : par exemple, nous avons plusieurs sites et souhaitons utiliser le même proxy inverse http://site1, http://site2, sont mappés respectivement à http://abc.com/site1, http://abc.com/site2/. Ensuite afin de faciliter la configuration, site1 et site2 doivent être déployés dans des répertoires secondaires, tels que http://site1/site1, http://site2/site2. Ensuite, http://site1/site1 est proxy vers http://abc.com/site1, et http://site2/site2 est proxy vers http://abc.com/site2/ pour empêcher la recherche de CSS et js en raison de problèmes au niveau du répertoire.

3. Publication du site Angular

Une fois le site Angular compilé et empaqueté, il peut être facilement publié sur un serveur Web existant ou transformé en une image Docker, puis relâchez.

3.1. Publication sur le serveur Web

Car après avoir empaqueté, les fichiers générés sont de purs fichiers statiques (html, css, js, images, etc. ), de sorte que le problème packagé peut être directement copié dans le répertoire d'un serveur Web tel que iis, nginx, apache tomcat ou d'un programme pouvant afficher des fichiers statiques tels que node.js, java, etc.

3.2. Utiliser Docker pour publier

S'il est déployé sur Docker, nous pouvons le baser sur un docker nginx de base, puis mettre le compilé projet angulaire, copiez-le dans le répertoire nginx dans Docker.

Étapes de base :

• Préparer le Dockerfile peut copier le fichier de site angulaire compilé dans le répertoire par défaut nginx de Docker nginx:alpine< basé sur /usr/share/nginx/html 🎜>

FROM nginx:alpine
COPY . /usr/share/nginx/html

Instructions : 1) Supposons que le fichier packagé angulaire se trouve dans le même répertoire que le fichier Dockerfile

2) COPY .
représente le chemin actuel, . est le répertoire cible dans docker /usr/share/nginx/html

• pour compiler docker. Dans le répertoire Dockerfile, exécutez les trois commandes

docker build -t your-docker-name .
docker save your-docker-name > your-docker-name.tar
gzip your-docker-name.tar

 :
• Générer une image Docker, le nom (nom) est votre nom-docker
• Exportez l'image Docker en tant que fichier local, le nom du fichier est votre-nom-docker.tar
• Compresser l'image Docker

Comme vous pouvez le constater, étant donné qu'angular est compilé dans un fichier purement statique, la publication à l'aide de Docker est très simple. Lors du déploiement, il vous suffit de copier le fichier docker sur la machine cible, de le décompresser, puis d'exécuter docker load < your-docker-name.tar pour charger l'image docker sur la machine cible.

4. Résumé

• Pour compiler pour l'environnement de production, assurez-vous d'ajouter des paramètres --prod

• Si vous souhaitez déployer sur le répertoire secondaire, ajoutez des paramètres lors de la compilation. S'il est déployé dans le répertoire secondaire /demo, ajoutez des paramètres : --deploy-url /demo/ --base-href /demo/

• Utilisez docker pour publier, vous pouvez choisir le docker nginx de base, puis copier le fichier angulaire compilé dans nginx répertoire Il suffit de le télécharger.

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!