Nginx configures front-end and back-end separation projects under the same IP port or domain name

The architecture of front-end and back-end separation has been widely adopted. In this mode, the front-end and back-end will run on different servers or ports respectively. However, sometimes we need to deploy the front and back ends on the same port or under the same domain name, which requires the use of a reverse proxy server, such as Nginx.

In this article, I will show you how to use Nginx to configure front-end and back-end separated projects under the same port or domain name. I will provide two examples, configurations using HTTP and HTTPS respectively, to help you understand and practice.

Configuration using HTTP

First, let's look at an HTTP configuration example:

server {
    listen 80;  # 该server block会监听80端口，处理所有发送到此端口的请求
    server_name yourdomain.com;  # 你的域名或IP

    location / {
        root /path/to/your/frontend/files;  # 指定前端静态文件的存放路径
        try_files $uri $uri/ /index.html;  # 如果找不到请求的文件，则返回index.html
    }

    location /api/ {  # 以/api/开头的路径将被转发到后端服务器
        proxy_pass http://localhost:8080;  # 后端服务器地址和端口
        proxy_set_header Host $host;  # 以下三行用于将客户端的一些信息转发到后端服务器
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    access_log  /var/log/nginx/yourdomain.access.log;  # 访问日志文件的路径，记录所有的访问请求
    error_log  /var/log/nginx/yourdomain.error.log;  # 错误日志文件的路径，记录服务器处理请求时的错误信息
}

The function of this configuration file is: when a user visits yourdomain.com, if the URL starts with /api/, the request will be forwarded to the backend server (http://localhost:8080) for processing; otherwise, Nginx will be on the frontend Find the corresponding file in the static file directory (/path/to/your/frontend/files) and return it to the user. All access requests and error messages will be recorded to the specified log file.

Configuration using HTTPS

Next, let's look at an HTTPS configuration example, which also includes automatic redirection from HTTP to HTTPS:

server {
    listen 80;
    server_name yourdomain.com;
    # 对于所有HTTP请求，我们将它们重定向到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;  # 监听443端口，启用SSL和HTTP/2
    server_name yourdomain.com;  # 你的域名或IP

    ssl_certificate /path/to/your/fullchain.pem;  # SSL证书的路径


    ssl_certificate_key /path/to/your/privkey.pem;  # SSL证书私钥的路径

    # 启用TLS 1.2和1.3
    ssl_protocols TLSv1.2 TLSv1.3;
    # 启用安全的密码套件
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

    location / {
        root /path/to/your/frontend/files;  # 指定前端静态文件的存放路径
        try_files $uri $uri/ /index.html;  # 如果找不到请求的文件，则返回index.html
    }

    location /api/ {  # 以/api/开头的路径将被转发到后端服务器
        proxy_pass https://localhost:8443;  # 后端服务器地址和端口
        proxy_set_header Host $host;  # 以下三行用于将客户端的一些信息转发到后端服务器
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    access_log  /var/log/nginx/yourdomain.access.log;  # 访问日志文件路径
    error_log  /var/log/nginx/yourdomain.error.log;  # 错误日志文件路径
}

The biggest difference between this configuration file and the HTTP version is that it adds support for HTTPS and automatically redirects HTTP requests to HTTPS. In addition, since the backend server is also running on HTTPS, the parameter of the proxy_pass directive also becomes https://localhost:8443.

Please note that to use HTTPS, you need to have an SSL certificate and corresponding private key, and specify their path in the configuration file.

At this point, you should have learned how to use Nginx to configure front-end and back-end separated projects under the same port or domain name, whether it is HTTP or HTTPS. Hope this article can help you better understand and use Nginx. If you have any questions or need further assistance, feel free to leave a comment below.