Want some programming help? [close]

Deploy Angular Apps with Nginx

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.

References

Advertisement