【nginx前端部署】如何在同一台服务器部署多个不同的web项目-一一网

需求背景

我们希望通过在一台nginx服务器上部署多个web项目，并通过访问路径名称来区分不同的项目，如：

www.myserver.com/admin // 访问admin 后台系统

www.myserver.com/editor // 访问editor 前台系统
复制代码

nginx本质上是一台服务，我们将它的端口设置为默认80端口；

这种需求有个好处是我们只需要启动一台nginx服务即可，当然你也可以使用docker分别启用多个服务。

以下为手动部署的实战经验，自动化部署无非是脚本命令的方式代替手动操作过程，我们暂不讨论；

nginx 安装部署

按照菜鸟教程安装部署即可

菜鸟教程：nginx-install-setup

nginx 配置常用命令

查看nginx配置

view /usr/local/webserver/nginx/conf/nginx.conf
复制代码

停止nginx服务

/usr/local/webserver/nginx/sbin/nginx -s stop
复制代码

启动nginx服务

/usr/local/webserver/nginx/sbin/nginx
复制代码

查看日志

tail -fn 200 access.log
复制代码

打包项目

假设此时我们需要打包的项目分别admin为vue项目和editor为react项目举例;
项目打包时有以下几点需要注意：

修改打包配置文件base字段为我们访问路径名称：

vue项目我们以打包工具vite举例：

react 项目我们以基于umi的配置举例：

修改好配置后我们执行yarn/npm run build 进行打包即可

将应用部署到nginx服务器

通常我们将web项目部署到ngigx如下路径目录：

/usr/local/webserver/nginx/html/
复制代码

如下图所示，我们将打包好的项目包admin editor放在对应路径：

配置访问路径

此时我们只需要在server层配置对应的转发就ok拉

   location /admin {
         alias /usr/local/webserver/nginx/html/admin;  #后台系统
        }
 
 location /editor { 
          alias /usr/local/webserver/nginx/html/editor;   #编辑器系统
	  try_files $uri /index.html;		
        }
        
复制代码

配置api请求

通过自定义变量的方式定义我们想要访问的后端api服务

  upstream my_server{  
      server 106.12.45.248:3000;
      keepalive 2000;
    }

复制代码

通过配置proxy_pass代理的方式，将api开头的请求，代理到自定义后端api服务

  #  这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的2000端口
        location /api/ {
            proxy_pass http://my_server/api;
            proxy_set_header Host $host:$server_port;
            rewrite ^/api/(.*) /$1 break;
        }

复制代码

完整nginx.conf 配置

http {
    include       mime.types;
    default_type  application/octet-stream;

    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  /usr/local/nginx/log/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

     
    gzip on; # 开启gzip
    gzip_min_length 1k; # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
    
    gzip_comp_level 2; # gzip 压缩级别 1-10
    
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 进行压缩的文件类型。
    
    gzip_vary on;  # 是否在http header中添加Vary: Accept-Encoding，建议开启
    
    # 自定义变量 
    upstream my_server{  
      server 106.12.45.248:3000;
      keepalive 2000;
    }
    server {
        listen       80;
        server_name localhost;#域名
        index index.html index.htm index.php;
        root /usr/local/webserver/nginx/html;#站点目录
	
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /admin {

                  alias /usr/local/webserver/nginx/html/admin;  #后台
        }
 
        location /editor { 
             alias /usr/local/webserver/nginx/html/editor;   #编辑器
	     try_files $uri /index.html;		
        }
        
        #  这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的2000端口
        location /api/ {
            proxy_pass http://my_server/api;
            proxy_set_header Host $host:$server_port;
            rewrite ^/api/(.*) /$1 break;
        }


        location / {
              root /usr/local/webserver/nginx/html/editor;  #默认走编辑器
              try_files $uri /index.html;
        }
       

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }



}
复制代码

启用配置的nginx文件；

每次修改完配置以后，需要停止当前nginx服务，然后执行启动命令，否则旧的worker一直在运行，新的配置将无法生效；

停止nginx服务

/usr/local/webserver/nginx/sbin/nginx -s stop
复制代码

启动nginx服务

/usr/local/webserver/nginx/sbin/nginx
复制代码

nginx 配置优化

nginx缓存配置及开启gzip压缩

开启gzip压缩

开启gzip配置是在http层加的。基本配置代码如下：

# 开启gzip
gzip on; 

# 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip_min_length 1k;

# gzip 压缩级别 1-10 
gzip_comp_level 2;

# 进行压缩的文件类型。

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

复制代码