Introduction
Nginx is a very fast and stable web server and reverse proxy. It is a great option for serving an Angular application. This tutorial will demonstrate how to setup nginx for a simple Angular app. Also see my more general Nginx Tutorial for more tips on nginx.
Build the Angular app
I assume you already have an Angular app that you want to deploy.
First you need to build the app.
Get the final distributable contents by building the application with ng.
Depending on your setup, you might use npm to trigger the build, or directly call ng.
# Build development site
npm run build
# or using ng build production
ng build --prod
# to use local ng
./node_modules/.bin/ng build --prod
The output contents will be in the dist/ directory.
Place final contents in desired location
Move the files to their final destination to be served by the web server.
For example, /srv/mysite or /var/www/mysite.
# Copy or move the files over as needed
mv ./dist/myapp /srv/mysite
Make sure nginx user has read permission to read the directory.
Use chmod and/or chown if necessary on the final destination.
Install nginx
The next step is to ensure nginx service is installed.
dnf install -y nginx
Configure nginx
You can ensure nginx is installed and running with:
sudo systemctl restart nginx
sudo systemctl status nginx
Simple nginx config
Create a config in /etc/nginx/conf.d/.
For example: /etc/nginx/conf.d/mysite.conf.
The most important part for Angular in particular is to include the
try_files line which will ensure that even if someone visits a URL
directly, the server will rewrite it properly so the Angular app behaves
properly.
# /etc/nginx/conf.d/mysife.conf
server {
listen 0.0.0.0:80;
root /srv/mysite;
location / {
try_files $uri $uri/ /index.html;
}
}
Enhanced configuration
The configuration in the previous section is about as simple as you can get.
It will listen on port 80 HTTP for any hostname that wasn't already intercepted.
Ideally you would specify a server_name, add SSL, redirect HTTP to HTTPS.
You might also consider redirecting non-www to www, adding caching,
or including rate limiting. Nginx can do all of these things. For
some more tips on nginx configuration, check out my Nginx Tutorial.
Conclusion
After reading this you should know how to setup nginx to serve an Angular application. Further reading should include my Nginx Tutorial and the Nginx Documentation.