Aller au contenu

Déploiement d'une API Express dans Azure

Préparer le code pour l'exécution dans Azure

Fichier config.ts

Mettre en commentaires la section qui traite dotenv :

/config.ts
/* eslint-disable n/no-process-env */

import path from "path";
import dotenv from "dotenv";
import moduleAlias from "module-alias";

// Check the env
const NODE_ENV = process.env.NODE_ENV ?? "development";

// Mettre en commentaire
// // Configure "dotenv"
// const result2 = dotenv.config({
//   path: path.join(__dirname, `./config/.env.${NODE_ENV}`),
// });
// if (result2.error) {
//   throw result2.error;
// }

// Configure moduleAlias
if (__filename.endsWith("js")) {
  moduleAlias.addAlias("@src", __dirname + "/dist");
}

Fichier vitest.config.ts

/vitest.config.mts
import { defineConfig } from 'vitest/config';
import path from 'path';

const config = defineConfig({
  test: {
    globals: true,
    environment: 'node',
    setupFiles: ['./tests/setup-env.ts', './tests/support/setup.ts'],
    isolate: true,
  },
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, './src'),
    },
  },
});

export default config;
/tests/setup-env.ts
/* eslint-disable n/no-process-env */
import path from 'path';
import dotenv from 'dotenv';

// Configure "dotenv"
const pathToEnv = path.join(__dirname, `../.env.test`);
console.log(`Using environment file: ${pathToEnv}`);
const result1 = dotenv.config({ path: pathToEnv });
if (result1.error) {
  throw result1.error;
}
/.env.test
## Environment ##
NODE_ENV=test


## Server ##
PORT=4000
HOST=localhost

## MongoDB ##
MONGODB=mongodb://localhost:2701/

## Setup jet-logger ##
JET_LOGGER_MODE=CONSOLE
JET_LOGGER_FILEPATH=jet-logger.log
JET_LOGGER_TIMESTAMP=TRUE
JET_LOGGER_FORMAT=LINE

Fichier build.ts

Le fichier build.ts sert à préparer et compiler l'API Express en production. C'est ce script qui sera exécuté dans Azure. Il faut s'assurer qu'il s'exécute sans erreur. (Peut varier d'un projet à l'autre...)

/scripts/build.ts
import fs from "fs-extra";
import logger from "jet-logger";
import childProcess from "child_process";

/**
 * Start
 */
(async () => {
  try {
    // Remove current build
    await remove("./dist/");
    await exec("npm run lint", "./");
    await exec("tsc --build tsconfig.prod.json", "./");
    // Copy
    await copy("./src/public", "./dist/public");
    await copy("./src/views", "./dist/views");
    // Mettre en commentaire
    // await copy('./src/repos/database.json', './dist/repos/database.json');
    await copy("./temp/config.js", "./config.js");
    await copy("./temp/src", "./dist");
    await remove("./temp/");
  } catch (err) {
    logger.err(err);
    // eslint-disable-next-line n/no-process-exit
    process.exit(1);
  }
})();

/**
 * Remove file
 */
function remove(loc: string): Promise<void> {
  return new Promise((res, rej) => {
    return fs.remove(loc, (err) => {
      return !!err ? rej(err) : res();
    });
  });
}

/**
 * Copy file.
 */
function copy(src: string, dest: string): Promise<void> {
  return new Promise((res, rej) => {
    return fs.copy(src, dest, (err) => {
      return !!err ? rej(err) : res();
    });
  });
}

/**
 * Do command line command.
 */
function exec(cmd: string, loc: string): Promise<void> {
  return new Promise((res, rej) => {
    return childProcess.exec(cmd, { cwd: loc }, (err, stdout, stderr) => {
      if (!!stdout) {
        logger.info(stdout);
      }
      if (!!stderr) {
        logger.warn(stderr);
      }
      return !!err ? rej(err) : res();
    });
  });
}

Pour le tester, faire la commande suivante :

npm run build  

Pousser les modifications sur GitHub

Assurez-vous que le code est complet et fonctionnel avant de le pousser dans GitHub.

Création de la ressource dans Azure

Lancer la création dans le portail Azure

Azure App Service - Créer 1

Azure App Service - Créer 2

Remplir le formulaire

Azure App Service - Formulaire 1

1- Sélectionner le groupe de ressources créé avec MongoDB
2- Donner un nom au service
3- Sélectionner node 22 LTS

Azure App Service - Formulaire 2

4- Créer un plan de tarification

Azure App Service - Formulaire 3

5- Nommer le plan de tarification 6- Clique sur OK

Azure App Service - Formulaire 4

7- Sélectionner Gratuit F1

Azure App Service - Formulaire 5

7- Cliquer sur Vérifier et créer

Réviser et créer

Azure App Service - Vérifier

1- Vérifier que c'est bien gratuit
2- Cliquer sur Créer

Attendre la fin de la création

Azure App Service - Final

Aller au centre de déploiement (à partir de la page de la ressource)

Azure App Service - Final

Configurer la source

Azure App Service - Final

1- Cliquer sur source
2- Sélectionner GitHub

Configurer GitHub

Azure App Service - Github

1- Se connecter sur son compte GitHub
2- Sélectionner l'organisation
3- Sélectionner le dépôt
4- Séletionner la branche
5- Ajouter un workflow à votre dépôt

Enregistrer la source

Azure App Service - Enregistrer

Faire un git pull dans le dossier sur votre machine. (Pour recevoir le workflow créé par Azure)

Azure App Service - Git Pull

Adapter le workflow

Ouvrir le workflow dans VSCode et ajuster les paramètres (par exemple, on peut retirer l'exécution des tests lors du déploiement)

Azure App Service - Workflow

Une fois le workflow modifié, le pousser dans GitHub.

Configer les variables d'environnement

Azure App Service - Variables

Azure App Service - Variables

Azure App Service - Variables

1- Entrer le nom de la variable utilisée dans votre API.
2- Entrer la valeur de la variable.
3- Cliquer sur appliquer.

Azure App Service - Variables

1- Cliquer sur appliquer.

Redémarrer le service

Azure App Service - Redémarrer

1- Aller à la vue d'ensemble.
2- Cliquer sur redémarrer.

Aller voir les journaux d'exécution de l'API

Azure App Service - Redémarrer

1- Menu supervision.
2- Option Flux de journaux.
3- Vérifier que votre serveur soit bien démarré.

Tester votre API

Trouver l'URL de votre API

Azure App Service - Domaine

Tester l'API dans bruno

Azure App Service - Bruno

Configurer CORS pour votre application React sur localhost

Azure App Service - CORS 1

1- Menu API
2- Option CORS

Azure App Service - CORS 2

1- Ajouter http://localhost:5173
2- Cliquer save