nginx静态资源的服务器配置方法


Posted in Servers onJuly 07, 2022

一、nginx 作用

★ 静态HTTP服务器

★ HTTP服务器(动静分离)

★ 反向代理

★ 负载均衡

二、nginx 静态HTTP服务器配置

Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,同时现在也很流行动静分离,就可以通过Nginx来实现。

# nginx 静态资源配置--静态服务器(也是最简单的配置)
server {
	listen 80; # 监听端口号
	server_name localhost; # 主机名
	index index.html index.htm; # 默认页名称
	root html; # 静态资源存放目录
	location / { # 匹配路径
		root html; # 文件根目录
		index index.html index.htm; # 默认页名称
	}
	error_page 500 502 503 504 /50x.html; # 报错编码对应页面
	location = /50x.html {
		root html;
	}
}

● url 和 uri:

网址是url,url=主机:端口+uri

uri 是资源,是location后面的匹配规则,即 location uri

● location uri,当规则匹配上了就到root目录找页面

location / { #匹配路径
		root html; #文件根目录
		index index.html index.htm; #默认页名称
	}

● location 配置方法

location 配置可以有两种配置方法

① 前缀 + uri(字符串/正则表达式)

② @ + name

前缀含义

= :精确匹配(必须全部相等):大小写敏感

~* :忽略大小写

^~ :只需匹配uri部分

@ :内部服务跳转

三、nginx HTTP服务器(动静分离--nginx+tomcat实现动静分离)

静态资源:数据不变,请求不需要后台处理;动态资源:模板,jsp、templates等,数据需要后台处理后渲染到网页,动态网页。

Nginx可以根据一定规则把不变的资源和经常变的资源区分开,对动静资源进行拆分,实现对静态资源的做缓存,从而提高资源响应的速度。这就是网站静态化处理的核心思路。

upstream tomcat{  
	server localhost:8080;  
}   
server {  
	listen       80;  
	server_name  localhost;  
	location / {  
		root   html;  
		index  index.html;  
	}  
	# 所有静态请求都由nginx处理,存放目录为html  
	location  ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {  
		root   html;  
	}  
	# 所有动态请求都转发给tomcat处理  
	location ~ *jsp$ {  
		proxy_pass  http://tomcat; # 代理转发
	}  
	error_page   500 502 503 504  /50x.html;  
	location = /50x.html {  
		root  html;  
	}  
}

四、 反向代理----使用proxy_pass

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;            
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                          root /shan/blog/;
                          index index.html;
                          add_header Access-Control-Allow-Origin *;
              }
              # 反向代理
              location /api {
					proxy_pass http://ip地址或域名:端口号;
               }  
}

☺ nginx 配置springboot+vue 前后端分离项目

1、思路:nginx 结合自身特性,本身一个静态资源的服务器

(1) 通过nginx实现域名的方式访问网站,以及把对数据的请求通过nginx反向代理转发给后端容器(后端服务),避免了接口暴露的不安全

① 访问网站,首先习惯上访问网站的首页,通常访问路径是/ [location /],然后默认页面是首页;

location / {
     root /shan/blog/;
     index index.html;
 }

② 默认页面,首页需要像css、js、图片等静态资源,才能显示出样式、动态效果等,需要通过匹配规则[location ~*.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$],指定root 到那个目录下获取这些静态资源。

location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
    root /shan/blog/;
    index index.html;
    add_header Access-Control-Allow-Origin *;
 }

③ 默认首页,需要有数据

在vue中首页实际上编写了很多个接口在请求数据,这些动态数据是来自 springboot项目(api 服务),需要咱通过定义一个匹配接口路径的规则[location /api],然后进行请求转发到 springboot项目(api 服务)

2、通过dockerCompose+nginx配置实现部署spirngboot+vue前后端分离项目

(1) dockerCompose 主要内容:

version: "3"
services:
  api:
    image: api
    container_name: api
    expose:
      - "8888"
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /mnt/docker/nginx/:/etc/nginx/
      - /mnt/shan/blog:/shan/blog
    links:
      - api
    depends_on:
      - api

(2) nginx 主要配置:

upstream apistream{
        server api:8888;# 通过dockerCompose编排,服务名相当于域名
}

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;          
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                        root /shan/blog/;
                        index index.html;
                        add_header Access-Control-Allow-Origin *;
              }
              location /api {# 请求https://blog.yilele.site/api 会代理转发到 api:8888
					  proxy_pass http://apistream;
              }  
}

到此这篇关于nginx静态资源的服务器配置方法的文章就介绍到这了,更多相关nginx静态资源服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Servers 相关文章推荐
Apache压力测试工具的安装使用
Mar 31 Servers
Nginx+SpringBoot实现负载均衡的示例
Mar 31 Servers
Mac环境Nginx配置和访问本地静态资源的实现
Mar 31 Servers
nginx服务器的下载安装与使用详解
Aug 02 Servers
NGINX 权限控制文件预览和下载的实现原理
Jan 18 Servers
Linux、ubuntu系统下查看显卡型号、显卡信息详解
Apr 07 Servers
Windows和Linux上部署Golang并运行程序
Apr 22 Servers
Windows Server 2016 配置 IIS 的详细步骤
Apr 28 Servers
Win Server2016远程桌面如何允许多用户同时登录
Jun 10 Servers
windows server 2016 域环境搭建的方法步骤(图文)
Jun 25 Servers
git中cherry-pick命令的使用教程
Jun 25 Servers
windows server2012 R2下安装PaddleOCR服务的的详细步骤
Sep 23 Servers
Nginx配置使用详解
nginx代理实现静态资源访问的示例代码
Jul 07 #Servers
使用 DataAnt 监控 Apache APISIX的原理解析
设置IIS Express并发数
Linux中sftp常用命令整理
Jun 28 #Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
Jun 28 #Servers
Linux中各个目录的作用与内容
You might like
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
jquery实现点击弹出对话框
2020/02/08 jQuery
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python简单计算文件夹大小的方法
2015/07/14 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python 动态加载的实现方法
2017/12/22 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
卫生安全检查制度
2014/02/04 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
中学生思想品德评语
2014/12/31 职场文书
董事长岗位职责
2015/02/13 职场文书
社团个人总结范文
2015/03/05 职场文书
大学生实习证明
2015/06/16 职场文书
图解上海144收音机
2021/04/22 无线电
详解nginx location指令
2022/01/18 Servers