当前位置:首页 > 服务器资讯

一篇学会 Nginx与Tomcat 打配合

2022-01-12 14:46:53 作者: 来源: 阅读:170 评论:0

简介 兼职招募 | 51CTO社区编辑加盟指南--> WOT全球技术创新大会2022,门票6折抢购中!购票立减2320元!--> 前言前一阵子用nginx分担了我网站由tomcat处理的的http服务,本文就跟大家分享下我的实战过程,以及如何从0开始用nginx来访问你的......

兼职招募 | 51CTO社区编辑加盟指南

--> WOT全球技术创新大会2022,门票6折抢购中!购票立减2320元!-->

前言

前一阵子用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的内容,将其删除,如下所示:

  1. <!--开启http强制跳转https访问--> 
  2. <login-config> 
  3.     <!-- Authorization setting for SSL --> 
  4.     <auth-method>CLIENT-CERT</auth-method> 
  5.     <realm-name>Client Cert Users-only Area</realm-name
  6. </login-config> 
  7. <security-constraint
  8.     <!-- Authorization setting for SSL --> 
  9.     <web-resource-collection> 
  10.         <web-resource-name>SSL</web-resource-name
  11.         <url-pattern>/*</url-pattern> 
  12.     </web-resource-collection> 
  13.     <user-data-constraint
  14.         <transport-guarantee>CONFIDENTIAL</transport-guarantee> 
  15.      </user-data-constraint
  16. </security-constraint

配置nginx

接下来,我们来配置nginx,让它来全面接管客户端的http请求,反向代理tomcat提供的服务,成功与tomcat完成配合。

配置虚拟主机

首先,我们需要先把虚拟主机配置好,它的作用就是模块化管理你的所有服务器资源,避免全部都一股脑的写入nginx的主配置文件,从而导致的可维护性降低问题。

我们打开nginx的conf目录,在其目录下找到virtualhost.conf的文件(如果没有则需要手动创建),该文件的作用就是将所有的服务器配置引入进来进行统一管理,打开文件后,我们写入如下所示的内容:

  1. # VirtualHost Configuration. 
  2.  
  3. # 默认存在的,如果不存在可以不理 
  4. include vhosts/localhost.vhost; 
  5. # 我们新加的 
  6. include vhosts/kaisir.cn; 

在上面的配置文件中,我们新加了一个kaisir.cn的配置,我们需要在vhosts目录下创建这个文件,这个目录也是在conf目录中的(如果没有就自己创建),我们直接创建这个文件即可。

注意:创建的文件不能包含后缀名,如果你有多个应用则在此处创建,然后在virtualhost.conf文件中使用include指令进行引入即可。

随后,我们打开conf目录下的nginx.conf文件,把刚才创建的virtualhost.conf文件引入进去,我们找到http标签,在标签内部添加如下所示的内容:

  1. # ...其他内容省略... 
  2.  
  3. http { 
  4.     # 引入服务配置文件 
  5.     include virtualhost.conf; 

做完上述操作后,我们就可以愉快的编辑我们在vhosts目录下创建的文件了。

服务器配置文件

在上述配置中,我们在vhosts目录下创建的文件就是我们的服务器配置文件了,http访问的相关配置都是在此文件中进行写入。

配置端口监听

我们打开前面创建的kaisir.cn文件,写入如下所示的内容:

  1. server { 
  2.     listen          80; 
  3.     listen      443 ssl;     

上述配置中:

  • server 为本文件的根指令,本章节后面所有的配置都是写在这个这个指令里面的
    • listen 监听80端口(即普通http的访问)
    • listen 监听443端口以及ssl访问(即https的访问)

配置ssl证书

我们写入如下所示的代码用来配置https访问时所需的ssl证书文件:

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

上述配置中,我们主要修改2个部分的配置:

  • ssl_certificate 你域名的ssl证书文件位置(文件类型一定为crt格式的)
  • ssl_certificate_key 你域名证书所对应的密钥文件 (文件类型一定为key格式的)

注意:ssl证书需要去你域名的注册商那里下载

配置网站访问路径

接下来,我们来配置下每个访问路径所指向的静态资源(前端项目),我们会用location指令来配置一条路径的访问,如下所示,我们配置了域名的根目录指向(即/的含义),指令内部分别指定了静态资源在硬盘中的路径以及默认的首页文件。

  1. # 根路径 
  2.     location / { 
  3.         # 项目路径 
  4.         root            /Users/likai/nginx-website/kasir.cn; 
  5.         # 默认首页文件 
  6.         index index.html index.htm; 
  7.     } 

配置完根目录后,我们再来看下子目录的相关访问配置,如下所示:

  1. location /chat-system { 
  2.     # 项目路径 
  3.     alias           /Users/likai/nginx-website/chat-system/; 
  4.         # 默认首页文件 
  5.     index index.html index.htm; 
  6.     # 解决网页刷新404 
  7.     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指令,如下所示:

  1. # 自定义404与500页面,指向下面的location 
  2. error_page 404 500 /404.html; 
  3.  
  4. # 自定义404页面 
  5. location /404.html { 
  6.     alias /Users/likai/nginx-website/404-page/; 
  7.     # 默认首页文件 
  8.     index index.html index.htm; 

注意:配置了error_page后,一定要配置location来指向你要访问的静态项目。

反向代理tomcat提供的服务

我们需要在location指令内部使用proxy_pass来代理tomcat提供的服务,配置如下所示:

  1. # 反向代理Java接口,多路径采用正则表达式匹配 
  2. location ~ ^/(api|uploads|download|other)/ { 
  3.     proxy_pass http://127.0.0.1:8080; 
  4.     proxy_set_header   Host    $host; 
  5.     proxy_set_header   X-Real-IP   $remote_addr;  
  6.     proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 

注意:location指令中使用正则进行了接口前缀地址的匹配,此处匹配的是/api/*、/uploads/*、/download/*、/other/*

如果你的tomcat还提供了websocket服务,那么还需要单独配一条location指令,用来代理,配置如下所示:

  1. # 反向代理websocket请求 
  2. location /websocket { 
  3.     proxy_pass http://127.0.0.1:8080/websocket/; 
  4.     proxy_http_version 1.1; 
  5.     proxy_set_header Upgrade $http_upgrade; 
  6.     proxy_set_header Connection "upgrade"

如果你没有使用Java来做服务端,而是使用python、php、c#等语言做的,也可以使用proxy_pass来做反向代理。

重定向未携带www的请求

最后,我们来解决下本文开头所说的问题,在nginx中解决这个问题非常简单,我们只需要判断下请求地址中是否包含www即可,如果不包含则301重定向到带www的地址即可,配置如下所示:

  1. # 主机名称,哪个写在前面,默认就跳转哪个 
  2. server_name     www.kaisir.cn kaisir.cn; 
  3.  
  4. # 请求网址中不包含www, 则重定向到携带www的https地址 
  5. if ($http_host !~ "^www.kaisir.cn$") { 
  6.     return 301 https://$server_name$request_uri; 

配置完成后,我们打开浏览器访问kaisir.cn[6]来验证下是否达到了我们的预期,如下图所示,完美解决??

注意:上述配置中,我们使用正则表达式对url进行了一波匹配,其中server_name指令的作用是如果访问地址中包含此处所写的东西,就会触发执行这里的配置。

此配置还会将你的http请求默认重定向到https。

完整的配置文件

本章节完整的配置文件内容如下所示:

  1. server { 
  2.     listen          80; 
  3.     listen          443 ssl; 
  4.     # 主机名称,哪个写在前面,默认就跳转哪个 
  5.     server_name     www.kaisir.cn kaisir.cn; 
  6.      
  7.     # 请求网址中不包含www, 则重定向到携带www的https地址 
  8.     if ($http_host !~ "^www.kaisir.cn$") { 
  9.         return 301 https://$server_name$request_uri; 
  10.     } 
  11.      
  12.     error_page 497 https://$server_name$request_uri; 
  13.     # 自定义404与500页面,指向下面的location 
  14.     error_page 404 500 /404.html; 
  15.      
  16.     # 配置ssl证书 
  17.     ssl_certificate   /Users/likai/nginx-website/conf/kaisir.cn/1_kaisir.cn_bundle.crt; 
  18.     ssl_certificate_key  /Users/likai/nginx-website/conf/kaisir.cn/2_kaisir.cn.key
  19.     ssl_session_timeout 5m; 
  20.     ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; 
  21.     ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; 
  22.     ssl_prefer_server_ciphers on
  23.      
  24.     # 引用虚拟配置文件 
  25.     include         vhosts/_nginx.vhost.fpm; 
  26.     # 根路径 
  27.     location / { 
  28.         # 项目路径 
  29.         root            /Users/likai/nginx-website/kasir.cn; 
  30.         # 默认首页文件 
  31.         index index.html index.htm; 
  32.     } 
  33.  
  34.     location /chat-system { 
  35.         # 项目路径 
  36.         alias           /Users/likai/nginx-website/chat-system/; 
  37.         # 默认首页文件 
  38.         index index.html index.htm; 
  39.         # 解决网页刷新404 
  40.         try_files $uri $uri/ /chat-system/index.html;  
  41.     } 
  42.      
  43.     # 自定义404页面 
  44.     location /404.html { 
  45.         alias /Users/likai/nginx-website/404-page/; 
  46.         # 默认首页文件 
  47.         index index.html index.htm; 
  48.     } 
  49.      
  50.      
  51.     # 反向代理Java接口,多路径采用正则表达式匹配 
  52.     location ~ ^/(api|uploads|download|other)/ { 
  53.         proxy_pass http://127.0.0.1:8080; 
  54.         proxy_set_header   Host    $host; 
  55.         proxy_set_header   X-Real-IP   $remote_addr;  
  56.         proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
  57.     } 
  58.      
  59.     # 反向代理websocket请求 
  60.     location /websocket { 
  61.         proxy_pass http://127.0.0.1:8080/websocket/; 
  62.         proxy_http_version 1.1; 
  63.         proxy_set_header Upgrade $http_upgrade; 
  64.         proxy_set_header Connection "upgrade"
  65.     } 
  66.      

nginx配置文件

接下来,我们来看下nginx的配置文件,做一些小优化。本章节的所有配置都是在nginx.conf文件中完成,本章节提到的所有配置文件均指nginx.conf。

最大连接数

最大连接数也可以成为并发数,即同一时刻最多支持多少个客户端接入,在配置文件中加入如下所示的配置:

  1. events { 
  2.   # 允许的连接数 
  3.   worker_connections  20000; 

开启gzip

gzip压缩可以节省我们的带宽资源,提升网站的加载速度。它的开启方式也很简单,在配置文件的http指令内添加,如下所示:

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

配置日志

日志可以用来记录每个客户端的访问时间、ip、浏览器等信息,对我们后续的网站维护带来帮助,在配置文件的http指令内添加如下所示的配置:

  1. # 设置日志格式,添加客户端真实ip等信息 
  2. format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]' 
  3.                '"$request" $status $body_bytes_sent' 
  4.                '"$http_referer" "$http_user_agent"'
  5.    # 访问日志文件存放路径 
  6. ss_log      /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k; 

配置文件上传大小

如果你的网站提供了文件上传服务,那么文件的大小限制除了在你的服务端项目中配置外,还需要在nginx中配置。

同样的,在配置文件的http指令内添加如下所示的配置:

  1. # 客户端可以上传的文件大小 
  2. client_max_body_size 100m; 

完整的配置文件

完整的配置如下所示:

  1. user likai staff; 
  2. worker_processes  8; 
  3.  
  4. error_log  /Applications/MxSrvs/logs/errors_nginx.log; 
  5. #error_log  logs/error.log  notice; 
  6. #error_log  logs/error.log  info; 
  7.  
  8. #pid        logs/nginx.pid; 
  9.  
  10.  
  11. events { 
  12.     # 允许的连接数 
  13.     worker_connections  20000; 
  14.  
  15.  
  16. http { 
  17.     # gzip匹配类型配置文件 
  18.     include       mime.types; 
  19.     default_type  application/octet-stream; 
  20.  
  21.     # 客户端可以上传的文件大小 
  22.     client_max_body_size 100m; 
  23.     # 开启gzip 
  24.     gzip  on
  25.     # 允许压缩的最小字节数 
  26.     gzip_min_length 10; 
  27.     # IE浏览器1-6版本禁用gzip 
  28.     gzip_disable "MSIE [1-6]."
  29.     # 启用gzip的文件类型 
  30.     gzip_types text/plain application/x-javascript text/css text/javascript application/xml; 
  31.  
  32.     # 设置日志格式,添加客户端真实ip等信息 
  33.     log_format chatSystemLogFormat '$http_x forwarded_for - $remote_user [$time_local]' 
  34.                                    '"$request" $status $body_bytes_sent' 
  35.                                    '"$http_referer" "$http_user_agent"'
  36.     # 访问日志文件存放路径 
  37.     access_log      /Users/likai/nginx-website/logs-chat-system/access.log chatSystemLogFormat buffer=32k; 
  38.  
  39.     # 引入服务配置文件 
  40.     include virtualhost.conf; 
  41.  
  42.     sendfile        on
  43.  
  44.     keepalive_timeout  65; 
  45.  

参考资料

[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/


标签:配置  文件  我们  Nginx  访问  

相关评论

本栏推荐