一、使用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服務狀態(tài)：

sudo systemctl status nginx

5.設置Nginx開機自啟：

sudo systemctl enable nginx

6.配置防火墻（如果服務器啟用了防火墻）：

對于firewalld：

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

對于iptables，請根據(jù)實際情況配置規(guī)則以允許TCP 80端口。
訪問Nginx：
使用瀏覽器訪問服務器的IP地址或域名（默認監(jiān)聽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;

            # 轉(zhuǎn)發(fā)請求頭到后端服務器
            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

    # 內(nèi)嵌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/;

            # 轉(zhuǎn)發(fā)請求頭到后端服務器
            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字段，這樣打包的靜態(tài)資源就會包含前綴
• nginx 需要將所有靜態(tài)資源放在h5/目錄下面，例如上述配置root /usr/share/nginx;, 靜態(tài)資源需要放在/usr/share/nginx/h5目錄中
• 接口代理需要去掉/h5/前綴, 所以應該是 proxy_pass http://appapis/api/;