Angular + Express Platform Deployment

Recently, I needed to deploy a web application on a cloud server. Here are my notes for anyone with similar requirements.

Deployment Background

Production Server: CentOS release 6.8 (Final) Network Environment: Connected to Internet Work Machine: Windows

Let’s dive into the deployment process.

Terminal Connection

Use putty to establish a session connection to the target server

Installing NVM

While you can install Node.js directly, using NVM is more convenient and makes version management much easier.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

NVM official repository: Click here

Note: After NVM installation, the session needs to be closed and reopened to take effect.

Installing Node

nvm install 6

Here, I’m installing the latest 6.x version.

Installing NRM

NRM is a tool for managing npm registry sources. Since npm package downloads can be slow from the default registry, installing NRM and switching to faster mirrors can significantly improve download speeds.

$ npm i nrm -g
$ npm ls
$ nrm use taobao

NRM official website: Click here

Deploying the Project

Creating Project Folder

mkdir /var/www
mkdir /var/www/projectName

According to Linux Filesystem Hierarchy Standard, /var stores variable data files

Copying Web Application [Frontend dist folder + Backend program files + Third-party node_modules packages]

The Angular frontend consists of static files in a dist folder, which can be placed directly in this directory. The backend application files can also be placed here. You can use WinSCP or similar tools for file upload.

Since the backend uses Express.js with node_modules dependencies, you can either upload the production dependency packages directly or run npm install in the project root directory to install the required packages.

Installing PM2

PM2 is a production-grade process manager for Node.js applications. Official website: Click here

For more PM2 documentation, refer to the official website or check out: my translation

$ npm i pm2 -g

Environment Variables

My backend application uses different configurations for development and production environments, so we need to set the NODE_ENV environment variable

$ vi /etc/profile

# Add this line at the end
export NODE_ENV="production"

# Exit vi and reload the configuration to apply changes immediately
source /etc/profile

Starting the Application

$ cd /var/www/projectName

# Start application with PM2 using a custom name
pm2 start app.js --name='projectName'

# Configure PM2 to auto-start on system boot
pm2 save
pm2 startup

Installing Nginx

yum -y install nginx

Proxy Configuration

The nginx configuration file is located at /etc/nginx/conf.d/default.conf. Since my application needs to be accessible on port 80, I’ll modify this configuration:

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
         proxy_pass http://localhost:3001;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

Note: I’m using nginx to proxy the web service running on port 3001, which serves both static and dynamic content. Alternatively, you could configure nginx to serve static files directly and reverse proxy only dynamic requests.

Starting nginx

Since nginx was installed via YUM, you can use the nginx commands directly

# Start nginx service
$ nginx

# Restart nginx service
$ nginx -s reload

# Stop nginx service
$ nginx -s stop

Setting nginx to Auto-start

In production environments, servers may restart unexpectedly, so we should configure nginx to start automatically on boot

$ chkconfig nginx on

Opening External Service Ports

# Open port 80
$ /sbin/iptables -I INPUT -p tcp –dport 80 -j ACCEPT

# Save
$ /etc/rc.d/init.d/iptables save

For temporary testing, you could disable the firewall entirely, but this compromises security.

$ service iptables stop # Stop service

Final Thoughts

Deployment complete! You can now access the application directly via the server IP address. If you need domain access, simply add a DNS resolution record.

Note: I used a Windows machine for this deployment. The process is similar on Mac, with some tool differences. For example, Windows uses PuTTY while Mac users typically use iTerm2 or the built-in Terminal. The core deployment steps remain the same across platforms.

For those unfamiliar with the tools and commands mentioned above, I recommend researching them further online.