如何实现Nginx+Tomcat动静分离？实操演示

╰半橙微兮° 2023-07-03 08:07 6阅读 0赞

### 文章目录 ###

*  前言
 *  一：环境准备
 *   *   *  1.1：环境准备
         *  1.2：实验目的
 *  二：nginx和Tomcat服务搭建
 *   *   *  2.1：搭建nginx服务
         *  2.2：Tomcat搭建
 *  三：动静分离配置
 *   *   *  3.1：nginx配置
         *  3.2：Tomcat设置
         *  3.3：动静分离测试
 *  四：nginx处理静态图片，Tomcat处理动态页面配置
 *   *   *  4.1：Tomcat配置
         *  4.2：nginx配置
         *  4.3：访问测试

# 前言 #

# 一：环境准备 #

### 1.1：环境准备 ###

*  VMware软件
 *  一台centos7系统作为nginx服务器，IP地址：192.168.79.133
 *  一台centos7系统作为Tomcat服务器，IP地址：192.168.79.134

### 1.2：实验目的 ###

*  通过访问nginx地址，实现动静分离
 *  动态请求自动转到Tomcat处理，还要实现静态资源存放在nginx服务器中，但Tomcat仍旧能够加载出资源（以图片为例）
 *  静态请求转到nginx处理

# 二：nginx和Tomcat服务搭建 #

### 2.1：搭建nginx服务 ###

*      [root@nginx1 ~]# mount.cifs //192.168.23.1/ccc /mnt	'//挂载宿主机文件夹'
        [root@nginx1 mnt]# cd /mnt/LNMP
        [root@nginx1 LNMP-C7]# tar zxvf nginx-1.12.2.tar.gz -C /opt	'//解压NGINX源码包'
        [root@nginx1 LNMP-C7]# cd /opt/nginx-1.12.2/
        [root@nginx1 nginx-1.12.2]# ./configure \
        --prefix=/usr/local/nginx \
        --user=nginx \
        --group=nginx \
        --with-http_stub_status_module		'//configure 配置'
        [root@nginx1 nginx-1.12.2]# make && make install		'//编译安装'
        [root@nginx1 nginx-1.12.2]# ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/		'//创建nginx命令软连接'
        [root@nginx1 nginx-1.12.2]# nginx -t		'//检查语法'
        nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
        nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
        [root@nginx nginx-1.12.2]# vim /etc/init.d/nginx	'//创建nginx启动脚本'
        #!/bin/bash	'//以下为启动脚本内容'
        # chkconfig: - 99 20
        # description: Nginx Service Control Script
        PROG="/usr/local/nginx/sbin/nginx"
        PIDF="/usr/local/nginx/logs/nginx.pid"
        case "$1" in
          start)
           $PROG
           ;;
          stop)
           kill -s QUIT $(cat $PIDF)
           ;;
          restart)
           $0 stop
           $0 start
           ;;
          reload)
           kill -s HUP $(cat $PIDF)
           ;; *) echo "Usage: $0 { start|stop|restart|reload}"
          		exit 1
        esac
        exit 0
        [root@nginx nginx-1.12.2]# chmod +x /etc/init.d/nginx 	'//增加权限'
        [root@nginx nginx-1.12.2]# chkconfig --add nginx	'//添加到service管理'
        [root@nginx nginx-1.12.2]# service nginx start	'//开启nginx'
        [root@nginx nginx-1.12.2]# netstat -ntap |grep 80
        tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      66115/nginx: master 
        [root@nginx1 nginx-1.12.2]# systemctl stop firewalld.service 	'//关闭防火墙'
        [root@nginx1 nginx-1.12.2]# setenforce 0
 *  网页测试
 *  ![mark][]

### 2.2：Tomcat搭建 ###

*      [root@nginx1 ~]# mount.cifs //192.168.23.1/ccc /mnt '//挂载宿主机文件夹' [root@nginx1 mnt]# cd /mnt/Tomcat [root@tomcat Tomcat]# tar zxvf jdk-8u91-linux-x64.tar.gz -C /usr/local [root@tomcat Tomcat]# vim /etc/profile export JAVA_HOME=/usr/local/jdk1.8.0_91 export JRE_HOME=${ JAVA_HOME}/jre export CLASSPATH=.:${ JAVA_HOME}/lib:${ JRE_HOME}/lib export PATH=${ JAVA_HOME}/bin:$PATH
        [root@tomcat Tomcat]# source /etc/profile
        [root@tomcat Tomcat]# tar zxvf apache-tomcat-8.5.16.tar.gz -C /usr/local
        [root@tomcat Tomcat]# cd /usr/local
        [root@tomcat local]# mv apache-tomcat-8.5.16/ tomcat
        [root@tomcat local]# cd tomcat/bin
        [root@tomcat bin]# ln -s /usr/local/tomcat/bin/shutdown.sh /usr/local/bin
        [root@tomcat bin]# ln -s /usr/local/tomcat/bin/startup.sh /usr/local/bin
        [root@tomcat bin]# systemctl stop firewall
        [root@tomcat bin]# setenforce 0
        [root@tomcat bin]# startup.sh 
        [root@tomcat bin]# netstat -ntap | grep 8080
        tcp6       0      0 :::8080                 :::*                    LISTEN      22943/java
 *  网页测试
 *  ![mark][mark 1]

# 三：动静分离配置 #

### 3.1：nginx配置 ###

*  设置动态请求交由Tomcat处理
 *      [root@nginx nginx-1.12.2]# cd /usr/local/nginx/conf/ [root@nginx conf]# vim nginx.conf ...省略内容 server { 
                listen       80;
                server_name  localhost; location ~.*.jsp$ { 	'//添加以下内容'
                  proxy_pass http://192.168.79.134:8080;	'//交由Tomcat处理'
                  proxy_set_header Host $host;
                }
                #charset koi8-r;
        ...省略内容
 *  设置静态网页内容，方便识别
 *      [root@nginx conf]# cd ../html/
        [root@nginx html]# vim index.html 
        <!DOCTYPE html>
        <html>
        <head>
        <title>静态页面</title>	'//修改标题'
        <meta http-equiv="content-type" content="text/html;charset=utf-8"> '//设置支持中文字符集' <style> body { 
                width: 35em;
                margin: 0 auto;
                font-family: Tahoma, Verdana, Arial, sans-serif;
            }
        </style>
        </head>
        <body>
        <h1>静态网站</h1>	'//修改内容主题'
        <p>If you see this page, the nginx web server is successfully installed and
        working. Further configuration is required.</p>
        
        <p>For online documentation and support please refer to
        <a href="http://nginx.org/">nginx.org</a>.<br/>
        Commercial support is available at
        <a href="http://nginx.com/">nginx.com</a>.</p>
        
        <p><em>这是一个静态网页.</em></p>	'//设置页尾内容'
        </body>
        </html>
        
        [root@nginx html]# service nginx stop
        [root@nginx html]# service nginx start	'//重启服务'
 *  网页测试
 *  ![mark][mark 2]

### 3.2：Tomcat设置 ###

*  设置被访问的动态网页内容
 *      [root@tomcat local]# mkdir /usr/local/tomcat/webapps/test
        [root@tomcat local]# vim /usr/local/tomcat/webapps/test/index.jsp
        <!DOCTYPE html>
        <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%@ page import="java.util.Date" %>
        <%@ page import="java.text.SimpleDateFormat" %>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>动态页面</title>
        </head>
        <body>
        <div>动态页面</div>
        </body>
        </html>
 *  网页测试
 *  ![mark][mark 3]

### 3.3：动静分离测试 ###

*  ![mark][mark 4]
 *  ![mark][mark 5]

# 四：nginx处理静态图片，Tomcat处理动态页面配置 #

*  Tomcat指路径，nginx放图片
 *  目录名称需要和Java项目名称相同

### 4.1：Tomcat配置 ###

*      [root@tomcat local]# vim /usr/local/tomcat/webapps/test/index.jsp
        <!DOCTYPE html>
        <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%@ page import="java.util.Date" %>
        <%@ page import="java.text.SimpleDateFormat" %>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR html4/loose.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>动态页面</title>
        </head>
        <body>
        <div>动态页面</div><br>	'//添加图片'
        <img src="aaa.jpg">
        </body>
        </html>

### 4.2：nginx配置 ###

*      [root@nginx html]# cd ../conf [root@nginx conf]# vim nginx.conf ...省略内容 server { 
                listen       80;
                server_name  localhost; location ~.*\.(gif|jpg|jpeg|png|bmp|swf|css)$ { 	'//添加此段内容，匹配这些类型的文件'
                  root html;	'//html站点目录'
                  expires 30d;	'//缓存时间30天'
                }
                location ~.*.jsp$ { 
                  proxy_pass http://192.168.79.134:8080;
                  proxy_set_header Host $host;
                }
        ...省略内容
 *      [root@nginx conf]# cd ../html/
        [root@nginx html]# mkdir test
        [root@nginx html]# cd /mnt/LNMP
        [root@nginx LNMP]# cp aaa.jpg /usr/local/nginx/html/test/
        [root@nginx LNMP]# cd /usr/local/nginx/html/test/
        [root@nginx test]# ls
        aaa.jpg
        [root@nginx test]# service nginx stop
        [root@nginx test]# service nginx start

### 4.3：访问测试 ###

![mark][mark 6]

*  实验成功

[mark]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMjUxMjM1NzUucG5n?x-oss-process=image/format,png
[mark 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMjUxMDY5OTIucG5n?x-oss-process=image/format,png
[mark 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMzA5MDA2MzAucG5n?x-oss-process=image/format,png
[mark 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMzM2MTg4ODIucG5n?x-oss-process=image/format,png
[mark 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMzM4NDEwMTIucG5n?x-oss-process=image/format,png
[mark 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xMzM5MTMzODUucG5n?x-oss-process=image/format,png
[mark 6]: https://imgconvert.csdnimg.cn/aHR0cDovL3Rhbmd6aGVuZy1waWNnby5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL2ltZy8yMDIwMDIwNC8xNzE1MTA3MTQucG5n?x-oss-process=image/format,png