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处理http请求实现过程解析
Mar 31 Servers
nginx proxy_cache 缓存配置详解
Mar 31 Servers
win10安装配置nginx的过程
Mar 31 Servers
Nginx进程管理和重载原理详解
Apr 22 Servers
教你快速开启Apache SkyWalking的自监控
Apr 25 Servers
Nginx反向代理至go-fastdfs案例讲解
Aug 02 Servers
Nginx源码编译安装过程记录
Nov 17 Servers
苹果M1芯片安装nginx 并且部署vue项目步骤详解
Nov 20 Servers
Kubernetes控制节点的部署
Apr 01 Servers
使用Docker容器部署rocketmq单机的全过程
Apr 03 Servers
Nginx如何配置根据路径转发详解
Jul 23 Servers
apache虚拟主机配置的三种方式(小结)
Jul 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
疾病防治方案
2014/05/31 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
安全生产协议书
2016/03/22 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技