[[442098]] 绪论

前一阵子用nginx分摊了我网站由tomcat处理的的http办事，本文就跟公共共享下我的实战历程，以及如何从0运转用nginx来拜访你的前端名堂，迎接列位感酷爱的开采者阅读本文。

写在前边

我开源名堂[1]的第三方登录模块用到了localStorage来获得用户的授权后果，前几天有个网友响应说他从我著述的衔接中点进去没法登录。

经过一番排查后，我发现我在著述中留的衔接是https://kaisir.cn/chat-system[2]，而第三方鉴权回调树立的衔接是https://www.kaisir.cn/chat-system[3]。由于我域名表露那处建树了@拜访与www拜访指向的都是褪色个网站，因此两者拜访界面疏导。关联词回调地址中有www，央求授权的拜访界面莫得www，出现了跨域问题。

跨域后，localStorage里的东西当然是不一样的，因此就出现了这个网友所说的问题。

贬责成见

既然两者拜访的都是褪色个办事器上的资源，那么咱们就不错在办事端建树重定向，当央求的地址莫得捎带www时，咱们就给他重定向到带www的地址。

于是我搜了一波使用tomcat建树未捎带www的网站自动添加www，看了一眼决策，相比繁重，不念念折腾。

使用nginx贬责这个问题

经过一番搜索后，我发现使用nginx贬责这个问题相比简便，于是我花了少许技巧学了下nginx，齐全贬责了这个问题。

刺眼：本文不先容如何安设nginx，对此不了解的开采者，请移步nginx官网[4]进行学习。

移除tomcat的建树

当先咱们先把tomact已建树好的一些http办事移惶恐，此处要删除的有：http拜访跳转https、域名文凭、静态资源。

刺眼：要是你莫得使用tomcat不错跳过此章节, 径直学习nginx的关连建树。

关闭https拜访，删除域名文凭

咱们翻开tomcat的conf目次下的server.xml，找到Service标签里port为80的Connector标签，删除标签内的redirectPort属性，如下图所示。

刺眼：你还需要修改port的值，将其改为轻易一个非80的值，因为nginx需要使用80端标语。

随后，链接找port为443的Connector标签，将其删除，如下图所示。

临了，删除你目次下后缀为jks的域名文献即可。

删除静态资源

翻开tomcat的webapps目次将你的静态资源(前端名堂)删掉即可。

关闭http强跳https

咱们翻开tomcat的conf目次下的web.xml文献，找到login-config标签和security-constraint的本色，将其删除，如下所示：

<!--开启http强制跳转https拜访--> <login-config>     <!-- Authorization setting for SSL -->     <auth-method>CLIENT-CERT</auth-method>     <realm-name>Client Cert Users-only Area</realm-name> </login-config> <security-constraint>     <!-- Authorization setting for SSL -->     <web-resource-collection>         <web-resource-name>SSL</web-resource-name>         <url-pattern>/*</url-pattern>     </web-resource-collection>     <user-data-constraint>         <transport-guarantee>CONFIDENTIAL</transport-guarantee>      </user-data-constraint> </security-constraint> 

 

 

建树nginx

接下来，咱们来建树nginx，让它来全面收受客户端的http央求，反向代理tomcat提供的办事，生效与tomcat完成协调。

建树诬捏主机

当先，咱们需要先把诬捏主机建树好，它的作用即是模块化管制你的统共办事器资源，幸免一都都一股脑的写入nginx的主建树文献，从而导致的可惊叹性裁减问题。

咱们翻开nginx的conf目次，在其目次下找到virtualhost.conf的文献(要是莫得则需要手动创建)，该文献的作用即是将统共的办事器建树引入进来进行和解管制，翻开文献后，咱们写入如下所示的本色：

# VirtualHost Configuration.  # 默许存在的，要是不存在不错不睬 include vhosts/localhost.vhost; # 咱们新加的 include vhosts/kaisir.cn; 

在上头的建树文献中，咱们新加了一个kaisir.cn的建树，咱们需要在vhosts目次下创建这个文献，这个目次亦然在conf目次中的(要是莫得就我方创建)，咱们径直创建这个文献即可。

刺眼：创建的文献不行包含后缀名，要是你有多个期骗则在此处创建，然后在virtualhost.conf文献中使用include领导进行引入即可。

随后，咱们翻开conf目次下的nginx.conf文献，把刚才创建的virtualhost.conf文献引入进去，咱们找到http标签，在标签里面添加如下所示的本色：

# ...其他本色不详...  http {     # 引入办事建树文献     include virtualhost.conf; } 

作念完上述操作后，咱们就不错舒坦的裁剪咱们在vhosts目次下创建的文献了。

办事器建树文献

在上述建树中，咱们在vhosts目次下创建的文献即是咱们的办事器建树文献了，http拜访的关连建树都是在此文献中进行写入。

建树端口监听

咱们翻开前边创建的kaisir.cn文献，写入如下所示的本色：

server {     listen          80;     listen      443 ssl;     } 

上述建树中：

server 为本文献的根领导，本章节背面统共的建树都是写在这个这个领导里面的 listen 监听80端口(即平时http的拜访) listen 监听443端口以及ssl拜访(即https的拜访) 建树ssl文凭

咱们写入如下所示的代码用来建树https拜访时所需的ssl文凭文献：

# 建树ssl文凭 ssl_certificate   /Users/likai/nginx-website/conf/kaisir.cn/1_kaisir.cn_bundle.crt; ssl_certificate_key  /Users/likai/nginx-website/conf/kaisir.cn/2_kaisir.cn.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;        ssl_prefer_server_ciphers on; 

上述建树中，咱们主要修改2个部分的建树：

ssl_certificate 你域名的ssl文凭文献位置(文献类型一定为crt次第的) ssl_certificate_key 你域名文凭所对应的密钥文献 (文献类型一定为key次第的)

刺眼：ssl文凭需要去你域名的注册商那处下载

建树网站拜访旅途

接下来，咱们来建树下每个拜访旅途所指向的静态资源(前端名堂)，咱们会用location领导来建树一条旅途的拜访，如下所示，咱们建树了域名的根目次指向(即/的含义)，领导里面别离指定了静态资源在硬盘中的旅途以及默许的首页文献。

# 根旅途     location / {         # 名堂旅途         root            /Users/likai/nginx-website/kasir.cn;         # 默许首页文献         index index.html index.htm;     } 

建树完根目次后，咱们再来看下子目次的关连拜访建树，如下所示：

location /chat-system {     # 名堂旅途     alias           /Users/likai/nginx-website/chat-system/;         # 默许首页文献     index index.html index.htm;     # 贬责网页刷新404     try_files $uri $uri/ /chat-system/index.html;  } 

通过不雅察上述建树后，咱们发现的不同点如下：

alias 建树子目次时，咱们使用了alias来指向名堂 try_files 这里是贬责vue名堂启用history方式后，网页刷新404问题

刺眼：要是你的vue名堂是用Vue CLI搭建的，那么就需要修改vue.config.js中的publicPath属性值为:process.env.NODE_ENV === "development" ? "./" : "/chat-system"。"/chat-system"即为坐褥环境的拜访旅途，即是咱们刚才在location领导行所建树的。要是此处建树造作的话，你打包后的vue名堂在浏览器拜访将使一派空缺??

临了，在路由建树文献中，传入参数：createWebHistory(process.env.BASE_URL)。

具体代码请移步提交纪录：build: 启用路由的history方式[5]

自界说造作页

在浏览器拜访一个不存在的页面好像办事器里面发生造作时，咱们可能需要对其进行处理，此时咱们就需要用到error_page领导，如下所示：

# 自界说404与500页面，指向底下的location error_page 404 500 /404.html;  # 自界说404页面 location /404.html {     alias /Users/likai/nginx-website/404-page/;     # 默许首页文献     index index.html index.htm; } 

刺眼：建树了error_page后，一定要建树location来指向你要拜访的静态名堂。

反向代理tomcat提供的办事

咱们需要在location领导里面使用proxy_pass来代理tomcat提供的办事，建树如下所示：

# 反向代理Java接口，多旅途经受正则抒发式匹配 location ~ ^/(api|uploads|download|other)/ {     proxy_pass http://127.0.0.1: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; } 

刺眼：location领导中使用正则进行了接口前缀地址的匹配，此处匹配的是/api/*、/uploads/*、/download/*、/other/*

要是你的tomcat还提供了websocket办事，那么还需要单独配一条location领导，用来代理，建树如下所示：

# 反向代理websocket央求 location /websocket {     proxy_pass http://127.0.0.1:8080/websocket/;     proxy_http_version 1.1;     proxy_set_header Upgrade $http_upgrade;     proxy_set_header Connection "upgrade"; } 

要是你莫得使用Java来作念办事端，而是使用python、php、c#等话语作念的，也不错使用proxy_pass来作念反向代理。

重定向未捎带www的央求

临了，咱们来贬责下本文泉源所说的问题，在nginx中贬责这个问题极度简便，咱们只需要判断下央求地址中是否包含www即可，要是不包含则301重定向到带www的地址即可，建树如下所示：

# 主机称呼，哪个写在前边，默许就跳转哪个 server_name     www.kaisir.cn kaisir.cn;  # 央求网址中不包含www, 则重定向到捎带www的https地址 if ($http_host !~ "^www.kaisir.cn$") {     return 301 https://$server_name$request_uri; } 

建树完成后，咱们翻开浏览器拜访kaisir.cn[6]来考证下是否达到了咱们的预期，如下图所示，齐全贬责??

刺眼：上述建树中，咱们使用正则抒发式对url进行了一波匹配，其中server_name领导的作用是要是拜访地址中包含此方位写的东西，就会触发执行这里的建树。

此建树还会将你的http央求默许重定向到https。

完整的建树文献

本章节完整的建树文献本色如下所示：

server {     listen          80;     listen          443 ssl;     # 主机称呼，哪个写在前边，默许就跳转哪个     server_name     www.kaisir.cn kaisir.cn;          # 央求网址中不包含www, 则重定向到捎带www的https地址     if ($http_host !~ "^www.kaisir.cn$") {         return 301 https://$server_name$request_uri;     }          error_page 497 https://$server_name$request_uri;     # 自界说404与500页面，指向底下的location     error_page 404 500 /404.html;          # 建树ssl文凭     ssl_certificate   /Users/likai/nginx-website/conf/kaisir.cn/1_kaisir.cn_bundle.crt;     ssl_certificate_key  /Users/likai/nginx-website/conf/kaisir.cn/2_kaisir.cn.key;     ssl_session_timeout 5m;     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;     ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;     ssl_prefer_server_ciphers on;          # 援用诬捏建树文献     include         vhosts/_nginx.vhost.fpm;     # 根旅途     location / {         # 名堂旅途         root            /Users/likai/nginx-website/kasir.cn;         # 默许首页文献         index index.html index.htm;     }      location /chat-system {         # 名堂旅途         alias           /Users/likai/nginx-website/chat-system/;         # 默许首页文献         index index.html index.htm;         # 贬责网页刷新404         try_files $uri $uri/ /chat-system/index.html;      }          # 自界说404页面     location /404.html {         alias /Users/likai/nginx-website/404-page/;         # 默许首页文献         index index.html index.htm;     }               # 反向代理Java接口，多旅途经受正则抒发式匹配     location ~ ^/(api|uploads|download|other)/ {         proxy_pass http://127.0.0.1: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;     }          # 反向代理websocket央求     location /websocket {         proxy_pass http://127.0.0.1:8080/websocket/;         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection "upgrade";     }      } 

nginx建树文献

接下来，咱们来看下nginx的建树文献，作念一些小优化。本章节的统共建树都是在nginx.conf文献中完成，本章节提到的统共建树文献均指nginx.conf。

最大团结数

最大团结数也不错成为并发数，即褪色技巧最多援助若干个客户端接入，在建树文献中加入如下所示的建树：

events {   # 允许的团结数   worker_connections  20000; } 

开启gzip

gzip压缩不错直率咱们的带宽资源，栽种网站的加载速率。它的开启神态也很简便，在建树文献的http领导内添加，如下所示：

http {     # 开启gzip     gzip  on;     # 允许压缩的最小字节数     gzip_min_length 10;     # IE浏览器1-6版块禁用gzip     gzip_disable "MSIE [1-6].";     # 启用gzip的文献类型     gzip_types text/plain application/x-javascript text/css text/javascript application/xml; } 

建树日记

日记不错用来纪录每个客户端的拜访技巧、ip、浏览器等信息，对咱们后续的网站惊叹带来匡助，在建树文献的http领导内添加如下所示的建树：

# 树立日记次第,添加客户端真确ip等信息 format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]'                '"$request" $status $body_bytes_sent'                '"$http_referer" "$http_user_agent"';    # 拜访日记文献存放旅途 ss_log      /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k; 

建树文献上传大小

要是你的网站提供了文献上传办事，那么文献的大小箝制除了在你的办事端名堂中建树外，还需要在nginx中建树。

一样的，在建树文献的http领导内添加如下所示的建树：

# 客户端不错上传的文献大小 client_max_body_size 100m; 

完整的建树文献

完整的建树如下所示：

user likai staff; worker_processes  8;  error_log  /Applications/MxSrvs/logs/errors_nginx.log; #error_log  logs/error.log  notice; #error_log  logs/error.log  info;  #pid        logs/nginx.pid;   events {     # 允许的团结数     worker_connections  20000; }   http {     # gzip匹配类型建树文献     include       mime.types;     default_type  application/octet-stream;      # 客户端不错上传的文献大小     client_max_body_size 100m;     # 开启gzip     gzip  on;     # 允许压缩的最小字节数     gzip_min_length 10;     # IE浏览器1-6版块禁用gzip     gzip_disable "MSIE [1-6].";     # 启用gzip的文献类型     gzip_types text/plain application/x-javascript text/css text/javascript application/xml;      # 树立日记次第,添加客户端真确ip等信息     log_format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]'                                    '"$request" $status $body_bytes_sent'                                    '"$http_referer" "$http_user_agent"';     # 拜访日记文献存放旅途     access_log      /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k;      # 引入办事建树文献     include virtualhost.conf;      sendfile        on;      keepalive_timeout  65;  } 

参考辛勤

[1]开源名堂: https://kaisir.cn/chat-system

[2]https://kaisir.cn/chat-system: https://kaisir.cn/chat-system

[3]https://www.kaisir.cn/chat-system: https://www.kaisir.cn/chat-system

[4]nginx官网: https://www.nginx.com/resources/wiki/start/topics/tutorials/install/

[5]build: 启用路由的history方式: https://github.com/likaia/chat-system/commit/e7c55a714f2610a87a5c87d5864bc4c342a298b0

[6]kaisir.cn: http://kaisir.cn

[7]个东说念主网站: https://www.kaisir.cn/