Скачать или смотреть How to Successfully Run Multiple Angular Applications in Subdirectories with NGINX

Learn how to configure NGINX to run multiple Angular applications in subdirectories of a single root folder, allowing for efficient asset management and routing.
---
This video is based on the question https://stackoverflow.com/q/62613425/ asked by the user 'Bayu Dwiyan Satria' ( https://stackoverflow.com/u/4115752/ ) and on the answer https://stackoverflow.com/a/62614553/ provided by the user 'Ivan Shatsky' ( https://stackoverflow.com/u/7121513/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Running Multiple Angular Application In Sub Directory With Single Root Folder with NGINX

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Running Multiple Angular Applications in Subdirectories with NGINX

When developing multiple Angular applications, it's common to host them under a single domain, particularly when you want to organize them in subdirectories. For instance, if you're hosting your applications under example.com/test1 and example.com/test2, you might face challenges with asset management. In this guide, we will explore how to configure NGINX to allow multiple Angular apps to work seamlessly in their respective subdirectories.

The Problem

The main issue here is that when assets (like stylesheets and scripts) are referenced within your Angular applications, they are often looked for in the root folder, which leads to errors since they don't exist there. For example, requests for assets that should be served from /test1/assets are incorrectly being directed to /assets, thus breaking your application's functionality. This disarray can hinder development and lead to user frustration.

The Solution

To resolve this issue, we can set up our NGINX configuration to map asset requests to the correct subdirectory based on the HTTP Referer header. Below is a step-by-step guide to modifying your NGINX configuration to achieve this goal.

Step 1: Define the Root for Each Angular App

We need to instruct NGINX to dynamically set the root path for asset requests, dependent on which Angular application is being accessed. Here’s how to do this with the map directive.

Code Snippet

[[See Video to Reveal this Text or Code Snippet]]

This code creates a variable $root_prefix that extracts the subdirectory (e.g., /test1 or /test2) from the referer URL.

Step 2: Configure Your NGINX Server Block

Once the map directive is in place, the next step is to incorporate it within the server block of your NGINX configuration.

Full Server Configuration

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Configuration

listen 80: Tells NGINX to listen for requests on port 80.

server_name: Specifies the domain name you are configuring (in this case, example.com).

root: Sets the main root directory for your Angular apps, which in this case is /usr/share/nginx/html/app.

index: Specifies the default file to serve when a request is made to the directory (usually index.html for Single Page Applications).

location /: Handles requests to the root and attempts to serve either a file, directory, or falls back to serving index.html (enabling client-side routing in Angular).

location /assets: This crucial part dynamically serves assets from the appropriate subdirectory using the previously defined $root_prefix variable.

Conclusion

By following the steps outlined above, you can efficiently serve multiple Angular applications from a single domain with NGINX, resolving issues related to asset management. Take advantage of the Referer header mapping, and you’ll ensure that each application correctly accesses its own assets, leading to a smoother user experience.

Now you're set to host your Angular applications in subdirectories with ease. Happy coding!