Nginx与Tomcat打配合

前言

前一阵子用nginx分担了我网站由tomcat处理的的http服务，本文就跟大家分享下我的实战过程，以及如何从0开始用nginx来访问你的前端项目，欢迎各位感兴趣的开发者阅读本文。

写在前面

我开源项目[1]的第三方登录模块用到了localStorage来获取用户的授权结果，前几天有个网友反馈说他从我文章的链接中点进去没法登录。

image-20211221220517500

经过一番排查后，我发现我在文章中留的链接是https://kaisir.cn/chat-system[2]，而第三方鉴权回调设置的链接是https://www.kaisir.cn/chat-system[3]。由于我域名解析那里配置了@访问与www访问指向的都是同一个网站，因此两者访问界面相同。但是回调地址中有www，请求授权的访问界面没有www，出现了跨域问题。

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

解决办法

既然两者访问的都是同一个服务器上的资源，那么我们就可以在服务端配置重定向，当请求的地址没有携带www时，我们就给他重定向到带www的地址。

于是我搜了一波使用tomcat配置未携带www的网站自动添加www，看了一眼方案，比较麻烦，不想折腾。

image-20211222221549955

使用nginx解决这个问题

经过一番搜索后，我发现使用nginx解决这个问题比较简单，于是我花了一点时间学了下nginx，完美解决了这个问题。

注意：本文不介绍如何安装nginx，对此不了解的开发者，请移步nginx官网[4]进行学习。

移除tomcat的配置

首先我们先把tomact已配置好的一些http服务移除掉，此处要删除的有：http访问跳转https、域名证书、静态资源。

注意：如果你没有使用tomcat可以跳过此章节, 直接学习nginx的相关配置。

关闭https访问，删除域名证书

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

image-20211222231319505

注意：你还需要修改port的值，将其改为任意一个非80的值，因为nginx需要使用80端口号。

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

image-20211222232006046

最后，删除你目录下后缀为jks的域名文件即可。

image-20211222232406645

删除静态资源

打开tomcat的webapps目录将你的静态资源（前端项目）删掉即可。

image-20211223221326973

关闭http强跳https

我们打开tomcat的conf目录下的web.xml文件，找到login-config标签和security-constraint的内容，将其删除，如下所示：

代码语言：javascript复制

<!--开启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的文件（如果没有则需要手动创建），该文件的作用就是将所有的服务器配置引入进来进行统一管理，打开文件后，我们写入如下所示的内容：

代码语言：javascript复制

# VirtualHost Configuration.

# 默认存在的，如果不存在可以不理
include vhosts/localhost.vhost;
# 我们新加的
include vhosts/kaisir.cn;

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

image-20211223224250842

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

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

代码语言：javascript复制

# ...其他内容省略...

http {
    # 引入服务配置文件
    include virtualhost.conf;
}

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

服务器配置文件

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

配置端口监听

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

代码语言：javascript复制

server {
	listen			80;
	listen      443 ssl;	
}

上述配置中：

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

配置ssl证书

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

代码语言：javascript复制

	# 配置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指令来配置一条路径的访问，如下所示，我们配置了域名的根目录指向（即/的含义），指令内部分别指定了静态资源在硬盘中的路径以及默认的首页文件。

代码语言：javascript复制

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

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

代码语言：javascript复制

	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项目在浏览器访问将使一片空白

nginx http tomcat https 网络安全

0 人点赞