Nginx实现动静分离

2021-06-08 22:29:23 阅读：179 来源： 互联网

标签：动静 nginx 分离 html 192.168 Nginx 文件夹 cloud

动静分离

概念

静态资源(html/css/js/img) 不需要依赖web应用服务器的解析直接放在Nginx上访问时直接响应给客户端
提高响应效率降低服务器压力

准备工作

把index.jsp转换为html
- 1、创建一个html模板页面
- 2、复制从head起始标签开始到结束
- 3、删除<c:set …/>
- 4、把所有style/script中的${path}删除使用的相对路径(相当于当前资源)
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.1 引入min.css-->
    <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <!--1.2 引入bootstrap-theme.min.css-->
    <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"/>
    <!--2.1 引入bootstrap-table.min.css-->
    <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-table.min.css"/>
    <!-- 3.1 bootstarp-editable基本使用：1引入bootstrap-editable.css -->
    <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-editable.css" />

    <!--1.3 引入jquery-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!--1.4 引入bootstrap.min.js-->
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--2.4 引入bootstrap-table.min.js-->
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
    <!--2.2 引入bootstrap-table-editable.min.js-->
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table-editable.min.js"></script>
    <!--2.3 引入bootstrap-table-zh-CN.min.js-->
    <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js"></script>

    <!-- 引入 jquery.serializejson.min.js 实现表格数据的转换为json-->
    <script type="text/javascript"  src="js/jquery.serializejson.min.js"></script>

    <!--3.2 bootstarp-editable基本使用：2引入bootstrap-editable.min.js -->
    <script type="text/javascript"
            src="bootstrap-3.3.7-dist/js/bootstrap-editable.min.js"></script>

    <!--0 引入自己的js文件-->
    <script type="text/javascript" src="js/cloud.js"></script>

</head>
<body>
<!--创建一个div  class值为contianor-->
<!--1.5 bootstrap的所有页面元素必须写在一个class=container的div中-->
<div class="container">
    <div class="page-header">
        <h1>智游办公云盘系统：<small id="small_user">登陆者:</small></h1>
    </div>
    <!--按钮组-->
    <div class="btn-group" role="group" aria-label="..." id="toolbar">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addDirectoryModal">创建文件夹</button>
        <button type="button" class="btn btn-default"  onclick="deleteManySelect();">删除选中</button>
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addFileModal">文件上传</button>
        <button type="button" class="btn btn-default"  onclick="outMyDirectory();">后退一步</button>
        <button type="button" class="btn btn-default" onclick="logout();">退出登录</button>
    </div>
    <!--带表格的模板-->
    <div class="panel panel-default" style="height: 320px;">
        <table class="table" id="tab_cloud" ></table>
    </div>
</div>

<!--创建文件夹的模态框-->
<div class="modal fade" id="addDirectoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">创建文件夹</h4>
            </div>
            <div class="modal-body">
                <form  id="form_add_directory">
                    <div class="form-group">
                        <label  class="control-label">文件夹名字:</label>
                        <input type="text" class="form-control" name="dname">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">文件夹共享：</label>
                        <select name="dscope" class="form-control">
                            <option value="0" selected="selected">私有</option>
                            <option value="1">朋友共享</option>
                            <option value="2">所有共享</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addMyDirectory();">添加</button>
            </div>
        </div>
    </div>
</div>

<!--文件上传的模态框-->
<div class="modal fade" id="addFileModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">文件上传</h4>
            </div>
            <div class="modal-body">
                <form  id="form_add_file" enctype="multipart/form-data">
                    <div class="form-group">
                        <label  class="control-label">文件夹名字:</label>
                        <input type="text" class="form-control" name="dname">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">文件夹共享：</label>
                        <select name="dscope" class="form-control">
                            <option value="0" selected="selected">私有</option>
                            <option value="1">朋友共享</option>
                            <option value="2">所有共享</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label  class="control-label">选择文件:</label>
                        <input type="file" class="form-control" name="file">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addMyFile();">上传</button>
            </div>
        </div>
    </div>
</div>


<!--登录模态框-->
<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">创建文件夹</h4>
            </div>
            <div class="modal-body">
                <form  id="form_login">
                    <div class="form-group">
                        <label  class="control-label">用户名:</label>
                        <input type="text" class="form-control" name="uname">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">密码:</label>
                        <input type="text" class="form-control" name="upwd">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="login();">登录</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

把所有的静态资源剪切出来放在一个名字为cloud(Nginx中当前项目的虚拟目录)

删除静态资源后的目录

在这里插入图片描述

创建好的静态文件夹

在这里插入图片描述

设置动静分离

把静态资源文件夹cloud上传到/usr/share/nginx
项目的其他资源打包
删除三台服务器的webapps下的所有的text05*(这是没有实现动静分离上传的war包)
重新上传新的war包到三台服务器的WebApps下
重启tomcat+监控tomcat的日志信息
修改Nginx的配置文件: /etc/nginx/conf.d/cloud34.conf

server
{
  #指定nginx监听的端口
  listen  80;
  #指定nginx的主机的ip地址
  server_name  192.168.254.128;

  #动静分离
  location ~ .*\.(html|css|js|eot|svg|ttf|woff|woff2)$
  {
          root  /usr/share/nginx;
  }
  
  #指定url的转换规则
  location  /cloud34{
      proxy_pass  http://cloudserver/test05_cloud;
  }
  #浏览器请求：http://192.168.254.128:80/cloud34 时 会被nginx解析为
  #http://192.168.160.128:8080/test05_cloud
  #http://192.168.160.129:8080/test05_cloud
  #http://192.168.160.130:8080/test05_cloud
}

重启Nginx
访问首页: 路径写全称

标签：动静,nginx,分离,html,192.168,Nginx,文件夹,cloud
来源： https://blog.csdn.net/weixin_54163882/article/details/117717377

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Nginx实现动静分离

动静分离

概念

准备工作

设置动静分离