How can I build and deploy a app (NestJS) as azure web app?

2.9k views Asked by At

I am use the nx framework (https://nx.dev) to create an angular + Nest application. The angular app should be the frontend application and the nest app should be the REST-API. I have create a git repo in "Azure DevOps".

I create this applications with

npx create-nx-workspace@latest
? Workspace name (e.g., org name)     nxtest
? What to create in the new workspace angular-nest      [a workspace with a full stack application (Angular + Nest)]
? Application name                    test-app
? Default stylesheet format           CSS

After this, i have an Angular and a Nest application.

I can start the angular frontend application with

nx serve test-app

and the Nest app (REST-API) with

ng serve api

It's worked an i can used the api at the browser.

In the next step, i commit and push it to the git repo.

I create in Microsoft Azure a Web-App.

Settings Microsoft Azure Web-App

Now, i want to create a CI/CD step.

In the azure portal ...

  1. Choose Deployment Center
  2. Choose Azure Repos
  3. Choose Azure Pipelines
  4. Choose my Organization, Project, Repo, Branch and as Web Application Framework NodeJS and Task Runner "None"

Settings for Deployment as Azure Web-App

After this, i have a new build pipeline in my "Azure DevOps" Project.

The create build pipeline run successful, but the build definition is somehow incomplete.

  1. Use Node version
  2. npm run install with the package.json
  3. Archive files
  4. Puplish build artifacts

The result on Azure:

  • All files are copied from git repo
  • create a web.config wit iisnode as handler and the path is "server.js"

But there are none start javascript file.

So, i edit the build pipeline.

Use Node version 12.13.0

Install application dependencies

Run Build The script "buildall" -> nx run-many --target=build --all --prod

Starting: build
==============================================================================
Task         : npm
Description  : Run an npm command. Use NpmAuthenticate@0 task for latest capabilities.
Version      : 0.175.0
Author       : Microsoft Corporation
Help         : https://learn.microsoft.com/azure/devops/pipelines/tasks/package/npm
==============================================================================
C:\windows\system32\cmd.exe /D /S /C "C:\hostedtoolcache\windows\node\12.13.0\x64\npm.cmd config list"
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.12.0 node/v12.13.0 win32 x64"

; environment configs
cache = "C:\\npm\\cache"
prefix = "C:\\npm\\prefix"

; node bin location = C:\hostedtoolcache\windows\node\12.13.0\x64\node.exe
; cwd = D:\a\1\s\nxtest
; HOME = C:\Users\VssAdministrator
; "npm config ls -l" to show all defaults.

C:\windows\system32\cmd.exe /D /S /C "C:\hostedtoolcache\windows\node\12.13.0\x64\npm.cmd run buildall"

> [email protected] buildall D:\a\1\s\nxtest
> nx run-many --target=build --all --prod


>  NX  Running target build for projects:

  - test-app
  - api

———————————————————————————————————————————————

> ng run api:build:production 
Starting type checking service...
Using 2 workers with 2048MB memory limit
Hash: d814495e471a4bbc4f1b
Built at: 10/06/2020 8:40:04 AM
Entrypoint main = main.js main.js.map
chunk    {0} main.js, main.js.map (main) 2.43 KiB [entry] [rendered]

> ng run test-app:build:production 

chunk {} runtime.e227d1a0e31cbccbf8ec.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.47f3572e3dd98212c211.js (main) 122 kB [initial] [rendered]
chunk {2} polyfills.9e86b32c42185429d576.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} styles.280e991c5992f8630bc9.css (styles) 0 bytes [initial] [rendered]
Date: 2020-10-06T08:40:42.853Z - Hash: 958a1c63d1211ca0510b - Time: 30858ms

———————————————————————————————————————————————

>  NX   SUCCESS  Running target "build" succeeded


Finishing: build

Archive files

Publish build artifacts

When the run of the pipeline is finished, then i have this files in the wwwroot folder of the web app.

  • main.js
  • main.js.map
  • web.config

But if i run the app or visit the url, then i get allways the follow error in the console.

Application has thrown an uncaught exception and is terminated:
Error: Cannot find module 'tslib'
Require stack:
- D:\home\site\wwwroot\main.js
- D:\Program Files (x86)\iisnode\interceptor.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:91:18)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)
    at Module.<anonymous> (D:\home\site\wwwroot\main.js:225:63)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:216:18)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)
Tue Oct 06 2020 08:16:28 GMT+0000 (Greenwich Mean Time): Application has thrown an uncaught exception and is terminated:
Error: Cannot find module 'tslib'
Require stack:
- D:\home\site\wwwroot\main.js
- D:\Program Files (x86)\iisnode\interceptor.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:91:18)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)
    at Module.<anonymous> (D:\home\site\wwwroot\main.js:225:63)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:216:18)
    at __webpack_require__ (D:\home\site\wwwroot\main.js:20:30)

All my previous attempts to get the Nestjs application working have been in vain. I am grateful for any help.

0

There are 0 answers