Package and Deploy the Angular App

We are going to deploy the app and serve it using nginx from an existing Digital Ocean server I control.

First step is to build the production version of the app bundle with ng build --prod. This will create all the necessary files in the dist\app-name\ folder. To transfer the files more easily to the server, I am going to use tar to archive and compress the app. My app is called “the-zombie-movie-club` so the command I can use is:

cd dist/the-zombie-movie-club/
tar -czvf ../the-zombie-movie-club.tar.gz .

The file needs to be copied to the remote server. The contents will ultimately sit in a subfolder of /var/www/zombiemovie.club/ folder but we can copy to /tmp/ for now. We can use scp to securely copy the file to the server.

scp the-zombie-movie-club.tar.gz <user>@<ip address>:/tmp/

Remote connect to the server and extract the archive so that it can be served by nginx. Note that we need to use elevated privileges to create the folder here.

cd /var/www/
sudo mkdir zombiemovie.club/content
cd zombiemovie.club/content
sudo tar -xzvf /tmp/the-zombie-movie-club.tar.gz

To configure nginx to serve the file, create a file as follows. Note that it is being created in the settings/ subfolder within the above folder structure.

cd /var/www/zombiemovie.club/
sudo mkdir settings
sudo touch settings/zombiemovie.club

The content of the file should contain something like the following configuration. It is based on the default configuration that comes packaged with nginx and should be available to copy from /etc/nginx/sites-available/default.conf. Note that I am mapping the sub-domains www and the as well as the base domain name. Line 7 gives the path the packaged content.

server {
	listen 80;
	listen [::]:80;

	server_name www.zombiemovie.club the.zombiemovie.club zombiemovie.club;

	root /var/www/zombiemovie.club/content;
	index index.html;

	location / {
		try_files $uri $uri/ =404;
	}
}

We need to let nginx know about the new site. This is done by adding the configuration to the /etc/nginx/sites-enabled/ folder with a symlink. Note that it is probably a good idea to add to sites-available, as this makes the server easier to manage. We want to create a soft symbolic link; any change to the original file will be reflected in any of the symbolic locations.

cd /etc/nginx/sites-available
sudo ln -s /var/www/zombiemovie.club/settings/zombiemovie.club.conf zombiemovie.club.conf
cd /etc/nginx/sites-enabled
sudo ln -s /etc/nginx/sites-available/zombiemovie.club.conf zombiemovie.club.conf

We can test the configuration with sudo /etc/init.d/nginx configtest and if everything is OK, restart nginx with sudo /etc/init.d/nginx restart. Now the server should respond to any requests for the domain name. Is your domain registrar pointing to the IP address of the server? If not, make that change now. It is beyond the scope of this article to cover that, but it should be as straightforward as adding an A record to the DNS settings with the IP address to target.

I’ve added a DNS record so that the domain zombiemovie.club points to the server, so it is easy to test by simply opening a browser to that page. The sub-domains www and the also work.

Improved configuration

When uploading new versions, we want the upgrade process to be as smooth as possible. One method of doing this is to separate the deployment of the application artefacts from configuration changes.

At the moment we would have to delete the files in content and replace them with new files from the uploaded tar file. A better approach would be to allow both the old and new version to lie side by side, and use a symbolic directory link to point content at whatever version is needed.

An advantage of this approach is that if we notice something wrong with the new deployment, we can roll back to the last one quickly as the files are all in place.

Let’s assume that the next version of the app contains minor changes and is in a version 0.0.1. The archive has been uploaded to /tmp/the-zombie-movie-club-0.0.1.tar.gz. First create a new directory to hold the next version and unzip the files there:

cd /var/www/zombiemovie.club
sudo mkdir versions/0.0.1
cd versions/0.0.1/
sudo tar -xzvf /tmp/the-zombie-movie-club-0.0.1.tar.gz

Move the old version of the files to version 0.0.0 and add a symbolic link so that the content still contains the files:

cd /var/www/zombiemovie.club/
sudo mv content/ versions/0.0.0
sudo ln -s versions/0.0.0 content

Upgrading is now simply a matter of dropping the old link and creating a new one to the folder:

cd /var/www/zombiemovie.club/
sudo rm content
sudo ln -s versions/0.0.1 content