I've deployed standard Angular apps to Azure. I just add an index.js file using express to the root, zip the dist folder and use web deploy to release the app.
The output for an Angular Universal app is different; there are two folders, one for the browser and one for the server.
What I've tried so far:
This just outputs the content of main.js.
How can I get the app to run using SSR?
To get this working required changes to the Angular app and configuring the DevOps pipeline correctly.
The Angular app required 3 changes:
ng add @nguniversal/express-engine
const routes: Routes = [ {... { path: "**", redirectTo: "" } ];
To ensure an App container is up and running, Azure will send requests to robots933456.txt. If that route isn't handled the app won't start.
Replace this line in server.ts:
const distFolder = join(process.cwd(), 'dist/YOUR_APP_NAME/browser');
With:
let distFolder = join(process.cwd(), "browser");
if (!existsSync(distFolder)) {
distFolder = join(process.cwd(), "dist/YOUR_APP_NAME/browser");
}
Why? Because when you build an Angular Universal app two folders are output:
When your app is deployed to Azure, the contents of the server folder will be at the root directory, so to make sure your local build and production build both work, the dist folder needs to be configured differently for each environment.
That's it for the Angular changes, the rest of the work is done in Azure DevOps.
Build Pipeline steps:
npm step: install the Angular CLI on the build server
install @angular/cli -g
npm step: install node packages
npm install
Command line step: build the Angular app using SSR
npm run build:ssr
4: Copy files step: copy the server folder contents to a new dist folder
Source:
dist/YOUR_APP_NAME/server
Target:
client/YOUR_APP_NAME/deploy-dist
Source:
client/browser/dist/YOUR_APP_NAME/browser
Target:
client/browser/deploy-dist/browser
Steps 4 & 5 are required to have the correct folder structure.
Command line: rename main.js
rename main.js index.js
index.js is required to get express running.
Archive files step: zip the deploy-dist folder
Publish Pipeline Artifacts step: publish the zip
Release Pipeline step: Deploy the artifact using Azure App Service deploy
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.