☁️ Déploiement de l'application

Préparation de l'environnement

NestJS

Assurez-vous d'avoir configuré NestJS pour supporter différents environnements de développement. Normalement, cette étape a été réalisée dans les tests serveur, mais consistait essentiellement à ce qui suit.

Pour supporter différentes configurations (développement, test, production), on peut utiliser des fichiers .env différents. Pour ce faire, on peut avoir un fichier .env.test, par exemple, qui représente la configuration en mode test. De plus, sur le serveur de production, un fichier .env.production pour la configuration propre au serveur.

Ainsi, pour supporter des fichiers d'environnement spécifiques à l'environnement dans lequel ils sont exécutés, modifiez ConfigModule dans app.module.ts de cette façon:

src/app.module.ts

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: process.env.NODE_ENV
        ? `.env.${process.env.NODE_ENV}`
        : '.env',
    }),
    //...

info

Si le nom de l'environnement est précisé dans l'exécution de node, on récupère le fichier d'environnement associé. S'il n'est pas précisé, on prend seulement le fichier .env.

attention

Ne créez pas de fichier .env.production, on le créera directement sur le serveur.

Modification CORS

Plutôt que de restreindre l'accès à l'API par seulement localhost, autorisons toutes les origines à utiliser l'API.

src/main.ts

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.useGlobalPipes(new ValidationPipe());
  app.enableCors({
    origin: '*',
  });

Port WebSocket

Si vous avez les WebSocket d'implémentés, il vous faudra modifier le port associé au websocket afin qu'il utilise le même port que l'API. En effet, l'environnement de déploiement ne supporte qu'un seul port.

Dans votre Gateway:

@WebSocketGateway({
  cors: true
})

Angular

On peut utiliser sensiblement le même principe en Angular. En effet, l'URL de l'API à contacter sera différente en mode développement (localhost...) qu'en mode production (onrender.com/...). Angular propose un mécanisme pour gérer ce cas de figure.

1. Exécuter ng generate environements pour générer des fichiers d'environnement

ng generate environments

2. Modifiez le fichier src/environments/environment.ts pour la configuration associée à l'environnement de Production.

src/environments/environment.ts

export const environment = {
  production: true,
  apiUrl: '',
};

info

apiUrl est vide pour le moment! En effet, comme on n'a pas encore déployé l'application, on ne connait pas l'URL de l'API. Vous pourrez remplacer le tout plus tard.

3. Modifiez le fichier src/environments/environment.development.ts pour votre configuration locale.

src/environments/environment.development.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',
};

4. Finalement, modifiez votre configuration d'API pour qu'elle utilise la valeur de l'environnement plutot qu'une valeur statique.

src/app/config/api.ts

import axios from "axios";
import {environment} from '../../environments/environment';

export const api = axios.create({
  baseURL: environment.apiUrl,
});

5. Si vous avez les WebSockets d'implémentés, vous pouvez aussi modifier l'URL pour la connexion au WebSocket. L'URL de base sera la même que l'API.
   src/app/app.module.ts

   const token = localStorage.getItem('access_token');
   const config: SocketIoConfig = {
     url: environment.apiUrl, options: {
       transportOptions: {
         polling: {
           extraHeaders: {
             Authorization: `Bearer ${token}`
           }
         }
       }
     }
   };

Déployer l'application via Render

Cliquez sur le lien de la présentation pour l'ouvrir dans Miro directement, ce sera plus facile à suivre puisque certaines captures d'écran sont plutôt grandes. Un PDF est aussi disponible plus bas.

attention

Le visuel des captures d'écran sont pour la plupart différents du visuel actuel de Render. Il ne s'agit que du visuel, les informations sont les mêmes.

🔗 Format PDF