Notes du développeur : configurez un pipeline CI/CD pour votre projet node js à l'aide d'Azure et de Github Actions

Quelqu'un a posté sur Twitter que lorsque les ingénieurs font des choses, ils devraient écrire sur la manière dont ils y parviennent. Cela peut faire gagner aux autres ingénieurs le temps de chercher pour trouver la solution. Et c'est pourquoi nous sommes ici.

Dans cet article, nous configurerions un pipeline CI/CD pour un projet node js utilisant Azure comme fournisseur cloud et les actions GitHub.

Tout d'abord

1. Créez le service App sur Microsoft Azure.

• Connectez-vous au portail Microsoft Azure ou créez un compte si vous n'en avez pas. (Au moment d'écrire ces lignes, ils accordent aux nouveaux comptes jusqu'à 200 $ de crédits.

• Ensuite, recherchez l'application Azure.
  

• Sélectionnez Créer > Application Web. Remplissez ensuite les détails dans le formulaire. Sélectionnez la pile d'exécution en tant que Node xx LTS. Continuez à créer jusqu'à.

À la fin du processus, vous devriez avoir une application Web dotée de la page par défaut de Microsoft.

Ensuite,

2. Générez les informations d'identification Azure pour les actions Github.

Il existe plusieurs méthodes documentées ici, mais nous utilisons l'option Service Principal car elle est assez simple.

Ouvrez le Azure cli, (indiqué dans l'image ci-dessous)

Et exécutez la commande suivante :

az ad sp create-for-rbac --name "myApp" --role contributeur --scopes /subscriptions//resourceGroups//providers/Microsoft.Web/sites / --json-auth

Remplacez le , et par les bons détails du tableau de bord de votre service d'application Azure. Le « myApp » est le nom du principal du service.

La commande générera une sortie comme celle-ci.

{
"clientId": "",
"clientSecret": "",
"subscriptionId": "",
"tenantId": "",
(...)
>

Ceci sera utilisé plus tard.

Enfin sur Github

3. Ajoutez un secret, créez l'action Github et déclenchez.

• Dans le référentiel, accédez à Paramètres > secrets et variables > actes.

• Cliquez sur Ajouter un nouveau secret de référentiel. Collez la sortie json telle quelle dans le champ secret et AZURE_CREDENTIALS dans le champ nom.

• Accédez à l'onglet Actions pour ajouter un flux d'action github au projet. Recherchez « Déployer Node.js sur Azure Web App » et cliquez sur configurer pour continuer.

  • Un fichier de workflow, azure-webapps-node.yml, est créé et peut être modifié avant de valider les modifications.

Modifiez le fichier pour qu'il ressemble à ci-dessous :

`on :
pousser :
succursales : [ "développer" ]
workflow_dispatch :

env :
AZURE_WEBAPP_NAME : # définissez ceci sur le nom de votre application
AZURE_WEBAPP_PACKAGE_PATH : '.' # définissez ceci sur le chemin d'accès à votre projet d'application Web, par défaut à la racine du référentiel
NODE_VERSION : '' # définissez ceci sur la version du nœud à utiliser

autorisations :
contenu : lire

emplois :
construire et déployer :
exécution : ubuntu-latest
étapes :
- nom : 'Checkout Github Action'
utilise : actions/checkout@v4

- uses: azure/login@v1
  with:
    creds: ${{ secrets.AZURE_CREDENTIALS }}

- name: Setup Node ${{ env.NODE_VERSION }}
  uses: actions/setup-node@v4
  with:
    node-version: ${{ env.NODE_VERSION }}
    cache: 'npm'

- name: npm install, build, and test
  run: |
    npm install

- uses: azure/webapps-deploy@v3
  with:
    app-name: ${{ env.AZURE_WEBAPP_NAME }}
    package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# Azure logout 
- name: logout
  run: |
    az logout`

Les fichiers de flux de travail sont déclenchés lors de la transmission vers la branche de développement et se connectent au portail Azure à l'aide des informations d'identification que vous avez enregistrées précédemment dans les secrets, puis continuent à être construits et déployés.

N'oubliez pas de remplacer, modifiez le nom de l'application Web et la version du nœud en conséquence.

Déclenchez enfin le workflow pour la première exécution. La page Web par défaut de votre portail Azure devrait disparaître et votre application Web est configurée pour un pipeline CI/CD qui est déclenché lors de la transmission vers la branche de développement.

J'espère que cela aidera un autre ingénieur.

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!