web-dev-qa-db-fra.com

Déployer Angular 2 avec Azure Webapp

Comment puis-je déployer une webapp 2 angulaire sur azur? Je suppose que j'ai besoin d'un certain type de script de compilation final.

Merci d'avance.

angularazuredeploymentweb-deploymentazure-deployment
14
Daniel Golub

Pour exécuter l'application angular2 dans Azure, procédez comme suit:

  1. créer une nouvelle application (avec ng cli): ng new testApp et Push to some repo github .
  2. créer des fichiers de déploiement Azure pour Kudu : 
npm install Azure-cli -g
Azure site deploymentscript --node

cela créera 2 fichiers .deployment et deploy.cmd

  1. éditer le deploy.cmd supprimer le --production de la ligne

:: 3. Installer les paquets npm

de sorte que toutes les dépendances seront installées (y compris ng cli)

  1. ajouter sous la section de :: 3. Install npm packages

cet extrait: 

echo Handling Angular build   
    :: 4. Build ng app
    IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
      pushd "%DEPLOYMENT_TARGET%"
      call :ExecuteCmd "!NODE_EXE!" ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot
      IF !ERRORLEVEL! NEQ 0 goto error
      :: the next line is optional to fix 404 error see section #8
      call :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/
      IF !ERRORLEVEL! NEQ 0 goto error
      popd
    )
  1. créer une nouvelle application Web dans Azure et lier elle dans votre référentiel github
  2. modifiez maintenant la racine de l'application dans les "Paramètres de l'application" Azure.
    sous "Applications et répertoires virtuels"
    de

site\wwwroot


à

site\wwwroot\dist


7. déclencher un déploiement. (en poussant sur github ou manuellement depuis le portail Azure)
8. (facultatif) pour réparer le 404 lors de l'actualisation, vous devez ajouter un fichier web.config à la racine avec ce contenu:

   <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="AngularJS" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
  1. ouvrez votre application .. BOOM!
21
Amir Sasson

Je sais que c'est un peu tard, mais aucune des autres réponses ne donne d'instructions explicites. J'espère que cela peut aider quelqu'un. 

Je suppose que vous utilisez Angular-CLI. 

Courir:

npm installer

ng build (en fonction de votre configuration, vous pourrez peut-être exécuter npm build)

Cela crée un dossier appelé ./dist qui contient les fichiers nécessaires à votre site Web. Ensuite, utilisez un client FTP scriptable pour transférer tout le contenu de ./dist dans le dossier ./site/wwwroot de la webapp Azure.

Vous devrez utiliser les informations d'identification FTP de la wabapp, telles qu'elles se trouvent dans le profil de publication, à partir de votre portail Azure . Où se trouve le "profil de publication de téléchargement" dans le nouveau portail Azure?

7
Taul

Si vous en avez besoin à des fins de déploiement continu et que vous utilisez git repo, suivez simplement les instructions ci-dessous Déploiement continu à l'aide de GIT dans Azure App Service .

Mais, en général, ce n'est pas directement lié à angular2. Essayez également ceci Utilisation de scripts Windows PowerShell pour publier dans des environnements de développement et de test capacités.

angular-cli, qui est (ou est devenu) le principal outil de construction, de test, de déploiement angulaire, n’a actuellement pas cette fonction, ni cette exigence (comme je sais jusqu’à présent). Vous pouvez demander une fonctionnalité sur leur github .

2
David Gabrichidze

Je peux vous déplacer une partie du chemin vers une solution, mais je ne peux pas répondre complètement à votre question. Donc, si les moniteurs SO veulent supprimer cette réponse, n'hésitez pas.

J'essaie de faire déployer une application CLI Angular sur Azure à partir de Bitbucket. Vous avez deux options:

1) Pré-construisez votre application en vue de son déploiement à l'aide d'un service tel que Jenkins ou Codeship. Shane Boyer a une solution de travail utilisant Github et Codeship ici: http://tattoocoder.com/angular2-Azure-codeship-angularcli/

Cette option semble la plus souhaitable car vous n’avez que du code compilé sur votre serveur. J'essaie de comprendre comment travailler avec Jenkins pour accomplir cela avec angular-cli.

2) Copiez votre code sur le serveur et lancez la construction à cet endroit. Cela semble indésirable, car il laissera du code source sur votre serveur. J'ai cette option 90% fait.

Ma construction échouait/manque à cause des paquets npm manquants.

Tout d'abord, j'ai modifié mon environnement afin qu'il utilise une version plus récente de Node, ce qui m'a aidé. Pour ce faire, ouvrez les paramètres de votre application Web et accédez à Paramètres de l'application. Dans la section Paramètres de l'application de l'onglet Paramètres de l'application, vous devez disposer d'un ensemble de paires clé/valeur. Une de celles-ci devrait être pour WEBSITE_NODE_DEFAULT_VERSION. Sur mon application, j'ai accès à la version 6.1.0 que j'utilise. Réglez le vôtre sur la version appropriée. Vous pouvez également définir cela dans votre fichier packages.json en suivant les instructions suivantes: https://Azure.Microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-Azure-apps/ . En le modifiant dans les paramètres de l'application, vous pourrez utiliser cette version dans votre fenêtre de ligne de commande, ce dont j'avais besoin pour installer les packages npm.

Ensuite, allez sur votre ligne de commande et essayez d’installer vos paquets manquants. J'ai eu un succès mitigé ici. Initialement, ma construction échouait car les typages n’étaient pas installés. J'ai pu l'installer globalement une fois que j'ai mis à jour Node.

J'ai eu des problèmes pour installer angular-cli. Je n'ai pas eu un bon journal de cet échec, même en utilisant -dd. Essentiellement, il copie tous les fichiers, puis échoue en renvoyant une erreur de "requête incorrecte" et aucun journal, quels que soient les commutateurs que j'utilise. Je crois qu’il échoue lorsqu’on essaie de modifier l’environnement npm pour ajouter ng.cmd. Je suis en train d'enquêter sur cela.

Espérons que cela vous fera avancer un peu plus loin.

Bonne chance.

1
rkralston

J'ai réussi à le faire sans trop en faire. Voici les étapes:

  1. J'ai utilisé GitHub comme contrôle de source. Ainsi, après avoir construit mon Angular 4 projet avec la commande ng build sur le terminal Code VS, j'ai poussé l'ensemble du dossier dist (qui est généré dans le répertoire/dossier du projet après l'exécution de ng build) vers GitHub. Si d'une manière ou d'une autre le IDE ne peut pas détecter le dossier dist comme étant changes, vous pouvez également le télécharger manuellement dans votre référentiel GitHub. Utilisez la fonction glisser-déposer pour télécharger le dossier entier.
  2. Créez maintenant un nouveau App Service créé dans votre abonnement Azure.

  3. Accédez à Deployment Options et choisissez GitHub, fournissez les informations d'identification et donnez le nom de la repository que vous utiliseriez. enter image description here

  4. Accédez à Application Settings, puis à Virtual Applications and Directories et modifiez le répertoire racine en site\wwwroot\distenter image description here

  5. Maintenant tout est réglé. Retournez à Deployment Options à nouveau, et vous verrez qu'une Build est en cours. Après la mise à jour du code dans le référentiel GitHub lors de l’enregistrement, vous pouvez simplement synchroniser afin de prendre une nouvelle construction. (P.S: Dans mon cas, la nouvelle construction a été déclenchée automatiquement après un nouvel enregistrement dans GitHub)

  6. Bingo! Vous pouvez maintenant accéder à votre site Web sur Azure. :RÉ

0
Ron16

Pour déployer une application angulaire sur des applications Web Azure à l'aide de bitbucket, créez bitbucket-pipelines.yml dans le répertoire racine. Créez des variables d’environnement pour l’accès FTP de votre emplacement Webapps (les variables d’environnement sont référencées à l’aide de $ dans le script ci-dessous). 

Activer les pipelines à partir des paramètres Bitbucket. C'est tout. Chaque fois que vous enregistrez le code dans une branche spécifique (branche principale dans le script ci-dessous), l'application sera déployée dans un emplacement Azure Webapps via FTP. 

# registry for your build environment.
image: node:8.9.0

pipelines:
  branches:
    master:
     - step:
        script: # Modify the commands below to build your repository.
          - npm install -g @angular/cli 
          - npm install
          - ng build --prod
          - apt-get update # Now run the FTP bash script to deploy dist folder to UAT
          - apt-get install ncftp
          - ncftpput -v -u "$FTP_USERNAME" -p $FTP_PASSWORD -R $FTP_Host $FTP_SITE_ROOT dist/ROOT
          - echo Finished uploading files to $FTP_Host$FTP_SITE_ROOT
0
Venky