Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Deploying and Publishing Frontend-Backend Separation Projects on Linux with Nginx Load Balancing

Tech 1

Nginx Installation

Step 1: Install Runtime Dependencies

Run the following command to install all required dependencies for Nginx compilation and operation:

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

Step 2: Download and Decompress Source Package

Pull the specified Nginx version source package and extract it to the target directory:

wget http://nginx.org/download/nginx-1.13.7.tar.gz
mkdir -p /opt/software
tar -xvf nginx-1.13.7.tar.gz -C /opt/software/

Step 3: Compile and Install with SSL Support

Enter the extracted source directory, configure compilation parameters to support status monitoring and SSL certificate installation, then compile and install:

cd /opt/software/nginx-1.13.7
# Add status monitoring and SSL modules for subsequent HTTPS configuration
./configure --with-http_stub_status_module --with-http_ssl_module
# Compile and install to default path /usr/local/nginx
make && make install

After installation, the /usr/local/nginx directory contains 4 core subdirectories:

  • conf: Stores Nginx configuration files
  • html: Default static resource storage directory
  • logs: Stores runtime access and error logs
  • sbin: Stores Nginx executable binary files

Step 4: Manage Nginx Service

Enter the sbin directory to run Nginx management commands:

cd /usr/local/nginx/sbin
# Start Nginx service
./nginx
# Reload configuration without restarting service
./nginx -s reload
# Gracefully stop Nginx service
./nginx -s stop
# Start with specified custom configuration file
./nginx -c /usr/local/nginx/conf/nginx.conf

To check port occupancy, install the lsof tool first:

yum install -y lsof
# Check if port 80 is occupied
lsof -i:80
# Force kill occupied process, replace <pid> with the process ID queried above
kill -9 <pid>

Step 5: Open Port 80 in Firewall

Allow external access to port 80 via firewalld:

firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --reload

Backend Service Deployment

Multi-Tomcat Load Balancing Configuration

Configure upstream rules in nginx.conf to distribute traffic across multiple Tomcat instances:

upstream backend_service_pool {
    server 127.0.0.1:8080 weight=2;
    server 127.0.0.1:8081 weight=1;
    ip_hash;
}

The weight parameter controls the traffic distribution ratio, and ip_hash ensures requests from the same IP are routed to the same backend instance to maintain session consistency.

Backend Project Deployment

  1. Package your Java backend project into a ROOT.war file
  2. Upload the war package to the webapps directory of each Tomcat instance
  3. Start all Tomcat instances, verify service availability by accesssing http://127.0.0.1:8080/health and http://127.0.0.1:8081/health respectively

Frontend Project Deployment

1. Decompress Frontend Build Assets

Upload the compressed frontend build package (usually dist.zip) to the server, extract it to the Nginx static resuorce directory:

mkdir -p /usr/local/nginx/html/frontend_prod
unzip dist.zip -d /usr/local/nginx/html/frontend_prod

2. Modify Nginx Configuration

Edit /usr/local/nginx/conf/nginx.conf to add the server block for frontend and backend proxy:

server {
    listen 80;
    server_name your_app_domain.com;

    # Frontend static resource routing
    location / {
        root /usr/local/nginx/html/frontend_prod;
        index index.html index.htm;
        # Resolve SPA route refresh 404 issue
        try_files $uri $uri/ /index.html;
    }

    # Backend API proxy routing
    location /api/ {
        proxy_pass http://backend_service_pool/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

3. IP and Domain Mapping

For internal testing, add a mapping record in the server's /etc/hosts file:

<your_server_public_ip> your_app_domain.com

For public access, configure the domain resolution record at your DNS service provider to point to the server's public IP.

4. Apply Nginx Configuration

Reload Nginx to make the new configuration take effect:

/usr/local/nginx/sbin/nginx -s reload

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.