How to deploy .NET app with Angular18 SSR on Nginx

I am currently working on a project that was initially created using the .NET Core and Angular 18 template in Visual Studio. The project was originally set up as SPA. Recently, I decided to switch to SSR because of SEO and installed @angular/ssr.

The application runs perfectly on IIS when tested locally. However, upon deploying the application to an Nginx server, I encounter a 404 error.

Despite these steps, the application fails to load on Nginx, resulting in a 404 error. I suspect there might be a configuration issue with Nginx that is causing this problem.

Could you please provide guidance on resolving this issue? Any insights or recommendations would be greatly appreciated.

This is Nginx configuration:


server {
listen 80;
listen [::]:80;
server_name stage.testsite.com;

return 301 https://stage.testsite.com$request_uri;
}


server {
listen 443 ssl;
listen [::]:443 ssl;
server_name stage.testsite.com;


ssl_certificate /etc/letsencrypt/live/stage.testsite.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/stage.testsite.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf; # Security best practices
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # Pre-generated DH parameters

# Set the root directory for your stage app
root /var/www/stage-site;
index index.html;

# Enable Gzip for better performance
gzip on;
gzip_min_length 1000;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

# Proxy requests to your .NET Core application on port 5187
location / {
proxy_pass http://127.0.0.1:5153; # The port where your .NET Core app is running
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}

# Error handling
error_page 500 502 503 504 /custom_50x.html;
location = /custom_50x.html {
root /var/www/stage-site
}
}

Continue reading...