一、使用YUM包管理器安装Nginx

1.安装EPEL仓库（如果Nginx不在默认的CentOS仓库中）：

sudo yum install epel-release

2.安装Nginx：

sudo yum install nginx

3.启动Nginx服务：

sudo systemctl start nginx

4.检查Nginx服务状态：

sudo systemctl status nginx

5.设置Nginx开机自启：

sudo systemctl enable nginx

6.配置防火墙（如果服务器启用了防火墙）：

对于firewalld：

sudo firewall-cmd --add-service=http --permanent
sudo firewall-cmd --reload

对于iptables，请根据实际情况配置规则以允许TCP 80端口。
访问Nginx：
使用浏览器访问服务器的IP地址或域名（默认监听80端口），应该能看到Nginx的欢迎页面。

二、部署不含前缀的前端项目nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 4096;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {

        listen 80;
        server_name _;

        gzip on;
        gzip_min_length 10k;
        gzip_buffers 32 4k;
        gzip_http_version 1.0;
        gzip_comp_level 6;
        gzip_proxied any;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";


        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /api/ {
            proxy_pass http://serverapis;

            # 转发请求头到后端服务器
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_connect_timeout 30;

            proxy_read_timeout 30;

            proxy_send_timeout 30;
        }

    }

    upstream serverapis {
        server 127.0.0.1:5400;
    }

    # Settings for a TLS enabled server.
    #
    #    server {
    #        listen       443 ssl http2;
    #        listen       [::]:443 ssl http2;
    #        server_name  _;
    #        root         /usr/share/nginx/html;
    #
    #        ssl_certificate "/etc/pki/nginx/server.crt";
    #        ssl_certificate_key "/etc/pki/nginx/private/server.key";
    #        ssl_session_cache shared:SSL:1m;
    #        ssl_session_timeout  10m;
    #        ssl_ciphers HIGH:!aNULL:!MD5;
    #        ssl_prefer_server_ciphers on;
    #
    #        # Load configuration files for the default server block.
    #        include /etc/nginx/default.d/*.conf;
    #
    #        error_page 404 /404.html;
    #            location = /40x.html {
    #        }
    #
    #        error_page 500 502 503 504 /50x.html;
    #            location = /50x.html {
    #        }
    #    }

}

二、部署包含前缀的前端项目nginx.conf

    # 内嵌H5
    server {

        listen 8800;
        server_name _;

        gzip on;
        gzip_min_length 10k;
        gzip_buffers 32 4k;
        gzip_http_version 1.0;
        gzip_comp_level 6;
        gzip_proxied any;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";


        location / {
            root /usr/share/nginx;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /h5/api/ {
            proxy_pass http://appapis/api/;

            # 转发请求头到后端服务器
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_connect_timeout 30;

            proxy_read_timeout 30;

            proxy_send_timeout 30;
        }

    }

1. 前端项目

image.png

• 需要修改base字段，这样打包的静态资源就会包含前缀
• nginx 需要将所有静态资源放在h5/目录下面，例如上述配置root /usr/share/nginx;, 静态资源需要放在/usr/share/nginx/h5目录中
• 接口代理需要去掉/h5/前缀, 所以应该是 proxy_pass http://appapis/api/;