访客 我们希望通过在一台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-sstop启动nginx服务/usr/local/webserver/nginx/sbin/nginx查看日志tail-fn200access.log打包项目假设此时我们需要打包的项目分别admin为vue项目和editor为react项目举例;项目打包时有以下几点需要注意：
修改打包配置文件base字段为我们访问路径名称：
vue项目我们以打包工具vite举例：
react项目我们以基于umi的配置举例：
修改好配置后我们执行yarn/npmrunbuild进行打包即可
通常我们将web项目部署到ngigx如下路径目录：
/usr/local/webserver/nginx/html/如下图所示，我们将打包好的项目包admineditor放在对应路径：
此时我们只需要在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服务
upstreammy_server{server106.12.45.248:3000;keepalive2000;}通过配置proxy_pass代理的方式，将api开头的请求，代理到自定义后端api服务
#这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的2000端口location/api/{proxy_passhttp://my_server/api;proxy_set_headerHost$host:$server_port;rewrite^/api/(.*)/$1break;}完整nginx.conf配置http{includemime.types;default_typeapplication/octet-stream;log_formatmain'$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.logmain;sendfileon;#tcp_nopushon;#keepalive_timeout0;keepalive_timeout65;gzipon;#开启gzipgzip_min_length1k;#启用gzip压缩的最小文件；小于设置值的文件将不会被压缩gzip_comp_level2;#gzip压缩级别1-10gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/cssapplication/xmltext/javascriptapplication/x-httpd-phpimage/jpegimage/gifimage/png;#进行压缩的文件类型。gzip_varyon;#是否在httpheader中添加Vary:Accept-Encoding，建议开启#自定义变量upstreammy_server{server106.12.45.248:3000;keepalive2000;}server{listen80;server_namelocalhost;#域名indexindex.htmlindex.htmindex.php;root/usr/local/webserver/nginx/html;#站点目录#charsetkoi8-r;#access_loglogs/host.access.logmain;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_passhttp://my_server/api;proxy_set_headerHost$host:$server_port;rewrite^/api/(.*)/$1break;}location/{root/usr/local/webserver/nginx/html/editor;#默认走编辑器try_files$uri/index.html;}#error_page404/404.html;#redirectservererrorpagestothestaticpage/50x.html#error_page500502503504/50x.html;location=/50x.html{roothtml;}}}启用配置的nginx文件；每次修改完配置以后，需要停止当前nginx服务，然后执行启动命令，否则旧的worker一直在运行，新的配置将无法生效；
停止nginx服务/usr/local/webserver/nginx/sbin/nginx-sstop启动nginx服务/usr/local/webserver/nginx/sbin/nginxnginx配置优化nginx缓存配置及开启gzip压缩
开启gzip压缩开启gzip配置是在http层加的。基本配置代码如下：
#开启gzipgzipon;#启用gzip压缩的最小文件；小于设置值的文件将不会被压缩gzip_min_length1k;#gzip压缩级别1-10gzip_comp_level2;#进行压缩的文件类型。gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/cssapplication/xmltext/javascriptapplication/x-httpd-phpimage/jpegimage/gifimage/png;#是否在httpheader中添加Vary:Accept-Encoding，建议开启gzip_varyon;提升响应速度如下图所示，压缩后体积减小，提升响应速度；
没有开启zip压缩之前，我们的对应的文件大小开启zip压缩之前，我们的对应的文件大小参考