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 相关文章推荐
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
Mar 09 Servers
Nginx本地目录映射实现代码实例
Mar 31 Servers
nginx location优先级的深入讲解
Mar 31 Servers
Nginx如何配置Http、Https、WS、WSS的方法步骤
May 11 Servers
解决xampp安装后Apache无法启动
Mar 21 Servers
详解使用内网穿透工具Ngrok代理本地服务
Mar 31 Servers
Docker官方工具docker-registry案例演示
Apr 13 Servers
解决IIS7下无法绑定https主机的问题
Apr 29 Servers
阿里云服务器部署RabbitMQ集群的详细教程
Jun 01 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
Jun 10 Servers
Linux中一对多配置日志服务器的详细步骤
Jul 23 Servers
码云(gitee)通过git自动同步到阿里云服务器
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
第一节--面向对象编程
2006/11/16 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
常用jQuery代码分享
2015/07/14 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
python通过文件头判断文件类型
2015/10/30 Python
Python机器学习之决策树算法
2017/12/22 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python爬虫容易学吗
2020/06/02 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
营业用房租赁协议书
2014/11/26 职场文书
同学会感言
2015/07/30 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers