发布日期：2024-07-31 04:48 点击次数：83
前一阵子用nginx分摊了我网站由tomcat处理的的http劳动，本文就跟公共共享下我的实战经由，以及奈何从0运行用nginx来探员你的前端面目，迎接诸君感好奇瞻仰的开荒者阅读本文。
写在前边我开源面目[1]的第三方登录模块用到了localStorage来得到用户的授权效果，前几天有个网友响应说他从我著作的相连中点进去没法登录。
app经过一番排查后，我发现我在著作中留的相连是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。
红球冷码统计：双色球第2024078期开出红球奖号分别为：05、09、14、21、22、26，在最近300期开奖中，各号码出现之后其下期出现最少的5个红球分别为：
红球冷热分析：上期开出1个冷码红球：26，奖号冷热比为1:5，本期参考冷热比4:2，关注冷码15、16、23、31。
最大荟萃数最大荟萃数也不错成为并发数，即团结时代最多复古些许个客户端接入，在建立文献中加入如下所示的建立：
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/