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 相关文章推荐
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
Mar 31 Servers
apache基于端口创建虚拟主机的示例
Apr 22 Servers
uwsgi+nginx代理Django无法访问静态资源的解决
May 10 Servers
图文详解Nginx版本平滑升级方案
Sep 15 Servers
Nginx配置https的实现
Nov 27 Servers
Tomcat项目启动失败的原因和解决办法
Apr 20 Servers
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
Apr 29 Servers
nginx实现多geoserver服务的负载均衡
May 15 Servers
zabbix配置nginx监控的实现
May 25 Servers
安装harbor作为docker镜像仓库的问题
Jun 14 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
Aug 14 Servers
服务器nginx权限被拒绝解决案例
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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python同步遍历多个列表的示例
2019/02/19 Python
基于Python实现用户管理系统
2019/02/26 Python
python利用tkinter实现屏保
2019/07/30 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
《社戏》教学反思
2014/04/15 职场文书
先进集体申报材料
2014/12/25 职场文书
三八妇女节寄语
2015/02/27 职场文书
退休欢送会致辞
2015/07/31 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android