typescript - NestJs - Angular - Strategie de implementare

Am dezvoltat o aplicație mică pentru o fabrică care avea o nevoie specifică. Este o aplicație mică care va fi folosită local de mai puțin de 10 persoane.

Deocamdată, am backend-ul și frontend-ul în același depozit git.

Structura depozitului arată astfel

--README.md
--.gitignore
--document
--projects
  |--backend        // Nestjs API
  |--frontend       // Angular

Am pregătit NestJS să deservească fișiere statice, ceea ce înseamnă că am configurat builder-ul meu Angular să funcționeze astfel:

angular.json

...
"options": {
    "outputPath": "../backend/client/dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
...

Serverul meu NestJs este configurat să servească fișiere statice :

main.ts

const PORT = process.env.PORT || 8080;
async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
   app.enableCors();
   app.setGlobalPrefix('api');
   await app.listen(PORT);
}
...

app.module.ts

imports: [
    TypeOrmModule.forRoot(),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client/dist'),
    }),

Până astăzi, am folosit npm cu npm run start:dev, ceea ce îmi permite să construiesc automat baza de date și să rulez serverul backend. Acum, trebuie să deployez backend-ul și frontend-ul pe același server și să construiesc totul.

Care este cea mai bună abordare? Ar trebui să construiesc mai întâi Angular în folderul dist, apoi să construiesc NestJS... Pot să iau doar folderul dist pe serverul de producție, nu?

Răspuns #1

Ceea ce aș face este să construiesc aplicația ta Angular și să copiez fișierele acolo unde servești frontend-ul. Dacă aplicația ta este rutată, trebuie de asemenea să configurezi un fallback către index.html, poți vedea cum aici: Deployement Angular

Pentru aplicația ta nestjs, o poți pune practic oriunde pe serverul tău și pm2 o va servi pe portul 8080. Mai întâi, trage toate fișierele tale din nestjs și folosește npm install (ai nevoie de node_modules și în producție cu nestjs). Apoi folosește nest build pentru a-ți construi aplicația. Cu pm2, ar trebui să folosești main.js pentru a porni API-ul tău. Apoi, aș analiza o configurație de proxy invers pentru a redirecționa toate cererile API către 8080. Ce face aceasta este că, dacă accesezi example.com/api, serverul tău va înțelege că trebuie să redirecționeze intern către 8080, așa că nu trebuie să deschizi niciun alt port decât 80, ceea ce este ceea ce îți dorești.

Aș lua în considerare, de asemenea, să pornesc pm2 la pornirea serverului tău și să salvez configurația pm2 astfel încât să pornească automat backend-ul tău dacă vei reporni serverul.

Răspunsul #2

Am trecut prin același proces de mai multe ori și am decis să împărtășesc un demo de bază despre cum să realizezi acest lucru în cel mai ușor și curat mod posibil.

Abordarea mea este să împachetez atât frontend-ul, cât și backend-ul în imagini Docker pe serverul gazdă. De asemenea, am împachetat o instanță Jenkins care construiește automat atât Angular, cât și NestJS și reîncarcă containerele Docker.

Poți să-ți implementezi aplicația cu ușurință și să decizi să declanșezi o construcție la fiecare commit. Aceasta va fi împinsă automat către serverul tău de producție.

Puteți consulta proiectul exemplu aici:
https://github.com/godardth/typescript-fullstack-boilerplate