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 相关文章推荐
Nginx解决403 forbidden的完整步骤
Apr 01 Servers
windows下快速安装nginx并配置开机自启动的方法
May 11 Servers
Nginx+Tomcat负载均衡集群的实现示例
Oct 24 Servers
CentOS7和8下安装Maven3.8.4
Apr 07 Servers
Nginx速查手册及常见问题
Apr 07 Servers
Mac电脑OS系统下安装Nginx的详细教程
Apr 14 Servers
Win10 Anaconda安装python-pcl
Apr 29 Servers
zabbix配置nginx监控的实现
May 25 Servers
shell进度条追踪指令执行时间的场景分析
Jun 16 Servers
Linux在两个服务器直接传文件的操作方法
Aug 05 Servers
解决ubuntu安装软件时,status-code=409报错的问题
Dec 24 Servers
nginx sticky实现基于cookie负载均衡示例详解
Dec 24 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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
常用的javascript function代码
2008/05/23 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
python 动态加载的实现方法
2017/12/22 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python实现逻辑回归的示例
2020/10/09 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
银行员工职业规划范文
2014/01/21 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
推荐信格式范文
2014/05/09 职场文书
体育节口号
2014/06/19 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
博物馆观后感
2015/06/05 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技