Nginx(反向代理)+Tomcat动静部署，解决加载js、css等文件报错404问题

什么是动静分离

• 为了提高网站的响应速度，减轻程序服务器（Tomcat，Jboss等）的负载，对于静态资源比如图片，js，css等文件，我们可以在反向代理服务器中进行缓存，这样浏览器在请求一个静态资源时，代理服务器就可以直接处理，而不用将请求转发给后端服务器。用户请求的动态文件比如servlet,jsp则转发给Tomcat，Jboss服务器处理，这就是动静分离。这也是反向代理服务器的一个重要的作用。

最近tomcat服务器在本机运行javaweb程序时候，没有一点问题，但是放到阿里云服务器上面时候，总是加载不了js和css页面，一开始总是以为我本地代码写错，到处查，改了半天依旧没有反应。

然后最近在nginx反向代理，通过不断查阅，终于nginx对动静分离有了一点了解，从而解决js的404问题

如果没有安装nginx，可以参考这篇文章
https://blog.csdn.net/weixin_43464303/article/details/105060246

下图时tomcat中webapp里面war包，线上运行8080端口域名地址，界面格式显示不出来。我们打开开发者工具，看到这里没有获取到加载js和css文件，这是大多人应该都有的操作吧。

我们这里就通过nginx来转发到tomcat上面，从而实现动静态的分离。

打开nginx.conf，设置参数

1. server_name 这是要转发的地址，设置为你自己域名，或者你的tomcat的ip地址，下面的转发地址都填此地址
2. root 表示请求别匹配到后，会在这个文件夹内寻找相应的文件，root对后面静态资源的处理很重要。此处我把静态资源重新放了一个文件夹，放在外部 /product/Root中
3. location 表示匹配客户端发送请求的路径，这里“/”代表所有请求的路径都能匹配。

这里的 root 位置 很重要，我把地址改成tomcat下的webapp，运行不成功的，然后我就把它拿出来，放在外部了，在/product/Root中

cd /usr/local/nginx/conf/
vim nginx.conf

    server {
        listen       80;
        #server_name  localhost;
        #此处我设置的是域名地址
        server_name www.xxx.xxx:8080;
        #charset koi8-r;

        #access_log  logs/host.access.log  main

      location ~ \.(js|css|html|jpg|gif|png|swf|mp3)$ {
         root /product/Root/;
       }

      location /{
        proxy_pass http://www.xxx.xxx:8080;
       }
       # location / {
       #     root   html;
       #     index  index.html index.htm;
       # }
       
       error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

此外root的文件路径在这里，跟上面的对应着来看

注意哈，我这里war包还是放在tomcat的webapp下面的。虽然原理我还是不太明白，还在慢慢找资料加深了解中。

页面可以运行了

说实话找bug真是让人蛋疼，但是运行出来的效果时候，我是激动的，我当时真的跳起来了！