Conservez votre méthode de compilation Angular
Exécutez la compilation de production de l’espace de travail et gardez les substitutions de configuration, les chemins de sortie et les versions verrouillées des dépendances visibles dans le dépôt.
Applications frontend · offres à partir de $10/mois
Déployer Angular.Publiez le site compilé.
Compilez une application Angular avec la configuration de l’espace de travail enregistrée dans le dépôt, servez les fichiers destinés au navigateur, vérifiez le fallback des routes et promouvez cette version sur un domaine HTTPS managé.
Conserver le dépôtExaminer la compilation et les journauxDomaines personnalisés et TLS
Déploiement Adios
Version candidate
Angular
SOURCE
Git
REGION
de
ROUTE
HTTPS
01Source reçue
02Compilation terminée
03Environnement d’exécution démarré
04Vérification de santé réussie
Route promue en production
production.adios.run
Une mise en production adaptée à
AngularTypeScriptSortie statiqueRoutage SPADomaines personnalisés
Le parcours de mise en production
Même opérationnel, un projet Angular doit être mis en production en toute sécurité.
L’application ou le service ne représente qu’une partie de la production. Les résultats de compilation, l’état d’exécution, les contrôles de santé, les secrets, les journaux, les routes et la version promue doivent pouvoir être examinés ensemble.
Promouvoir la version dont les contrôles de santé réussissent
Servez les fichiers destinés au navigateur avec un processus de production, testez la navigation directe vers les routes Angular et ne promouvez la version qu’après la réponse du contrôle de la route racine.
Relier la production au code source
Les résultats de compilation, les journaux d’exécution, l’état de santé, les secrets, les domaines et la version promue restent associés au projet au lieu d’être dispersés entre des outils indépendants.
Du code source à la mise en production
Trois étapes vous permettent de vérifier le parcours de déploiement.
Utilisez le code source et le fonctionnement en production déjà définis pour le projet. Le manifeste décrit ce que la plateforme doit compiler ou provisionner et les critères à remplir pour que le résultat soit prêt.
- 01
Commencer par la source ou un modèle
Importez le dépôt existant, ou examinez et déployez l’une des variantes de modèles précisément référencées ci-dessous.
$adios login - 02
Revoir le contrat de déploiement
Consignez dans adios.yaml les commandes, la version de l’environnement d’exécution ou du service, les critères de santé et les références aux secrets.
$git diff -- adios.yaml - 03
Déployer et inspecter le résultat
Suivez les résultats de compilation et d’exécution, vérifiez la version candidate, puis ouvrez la route ou la connexion de service promue en production.
$adios up
adios.yaml
Votre projetname: angular-app
build_cmd: npm ci && npm run build
start_cmd: npm start
runtime:
name: node@24
port: 3000
health_path: /Configurez npm start pour servir les fichiers Angular destinés au navigateur et prévoyez un fallback pour les routes côté client.
Points de départ déployables
Démarrer Angular à partir d'un modèle lorsque le dépôt n'est pas prêt.
Partez du modèle statique Nginx, puis remplacez ses fichiers d’exemple par le résultat de la compilation de production de votre application Angular.
Applications Web
Nginx statique
Un projet de démarrage Nginx pour les sites statiques HTML, CSS et JavaScript, ainsi que les applications monopages.
HTMLAucune
- Clé du modèle
- nginx:static
- Environnement d’exécution
- nginx
- Dépôt
- template-nginx-static
- Emplacement de la source
- .
git clone https://github.com/adiosdotdev/template-nginx-static.git
cd template-nginx-static
adios upAvant production
Vérifier la charge de travail.Puis promouvez la version en production.
Pour sécuriser la première mise en production, partez d’une compilation ou d’une configuration de service reproductible et d’un aperçu qui sollicite les dépendances réellement utilisées en production.
Prêt quand...
- La configuration de production se compile depuis une copie fraîche du dépôt.
- Le bon répertoire de sortie du navigateur est servi.
- Les liens vers des pages internes renvoient vers index.html.
- Aucune valeur privée n’est intégrée dans le bundle du navigateur.
Prévisualiser quand...
- Le projet active le rendu côté serveur Angular.
- Les substitutions de configuration ciblent les services de production.
- L'application suppose un href de base particulier.
Les réponses à vos questions
Ce qu’il faut savoir avant de déployer Angular.
Vérifiez les limites de l’environnement d’exécution ou du service, le chemin du modèle, le comportement en cas d’échec et les contrôles de production avant de créer la première version.
Adios peut-il déployer un projet Angular existant ?
Oui. Exécutez la CLI Adios depuis la racine du projet, conservez votre dépôt et vos fichiers de dépendances et ajoutez un fichier adios.yaml décrivant la compilation de production, la commande de démarrage, le port et le chemin de contrôle de santé.
Ai-je besoin de Docker pour déployer Angular ?
Pas pour un environnement d’exécution standard pris en charge. Utilisez les commandes de production habituelles du projet dans adios.yaml. Si la compilation nécessite des packages système inhabituels ou des bibliothèques natives, vérifiez ces dépendances dans un aperçu avant la promotion en production.
Puis-je déployer une application Angular monopage ?
Oui. Compilez l’application destinée au navigateur, servez le répertoire de sortie et configurez le fallback du mode history pour que la navigation directe atteigne Angular plutôt qu’une erreur 404 statique.
Et si le projet Angular utilise un rendu côté serveur ?
Déployez le bundle serveur sous forme de processus Node.js persistant et remplacez la commande de démarrage statique par la commande du serveur de production du framework.
Que se passe-t-il si la compilation ou le contrôle de santé échoue ?
La version candidate conserve ses résultats de compilation et d’exécution pour vérification. Ses contrôles de santé doivent réussir avant sa promotion comme version desservant la route de l’application.
Puis-je partir d’un modèle plutôt que d’un dépôt existant ?
Oui. Cette page référence les modèles Adios officiels les plus proches pour Angular. Examinez la variante exacte du code source, déployez-la dans la console ou clonez-la localement et exécutez adios up.
Autres options de déploiement
Connectez le reste de votre stack.
Déployer Sites statiques
Publiez du HTML, du CSS, du JavaScript ou une compilation statique générée par un framework à partir d’un petit modèle Nginx, avec les routes, les domaines, TLS et l’état de la version associés.
Déployer React
Compilez une application React à partir de son dépôt existant, servez les fichiers générés ou lancez le processus Node.js de production, puis associez cette version à une route HTTPS stable.
Déployer Vue
Compilez une application Vue à partir de son dépôt existant, servez les fichiers de production, vérifiez les routes côté client et promouvez cette version sur un domaine HTTPS managé.
Déployer Svelte
Compilez un projet Svelte ou SvelteKit avec l’adaptateur choisi, servez les fichiers générés, vérifiez les routes et conservez la commande de production avec le code source.
La première version
Déployer Angular avec le code source et les éléments de vérification associés.
Partez du dépôt ou d’un modèle, vérifiez le contrat de déploiement et examinez la version qui sera promue en production.