简介

动静分离是指在web服务器架构中，将静态页面与动态页面或者静态内容接口和动态内容接口分开不同系统访问的架构设计方法，进而提升整个服务访问性能和可维护性

我们可以把静态html页面，css样式，js文件，以及图片文件这些静态放Nginx服务器中，然后把动态请求显示的文件放类似Tomcat这样的容器服务器

这样方便维护，也可以提高系统性能

前提

云服务器安装好Nginx，拥有自己的域名（解析一个二级域名来用于访问静态资源）

实现过程

新建静态资源

在/home/nginx目录下放静态资源

index.html，放在/home/nginx目录下

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://static.zoutl.cn/static/css/my.css">
    <script src="http://static.zoutl.cn/static/js/my.js"></script>
</head>
<body>
<h1>Nginx静态资源服务器测试</h1>
<img src="http://static.zoutl.cn/static/img/2.jpg" style="width: 666px" alt="">
</body>
</html>

my.css，放在/home/nginx/static/css目录下

1
2
3
h1{
  color:red;
}

my.js，放在/home/nginx/static/js目录下

1
alert("123456");

修改配置文件

修改Nginx的default.conf配置文件，修改成自己的域名和资源根目录

image-20220325130820874

结果

浏览器地址栏输入：http://static.zoutl.cn/，结果如下：