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

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

目录

一、nginx 作用

二、nginx 静态HTTP服务器配置

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

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

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

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

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

一、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静态资源服务器内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    酷睿I7 配置

    酷睿I7 配置,配置,玩家国度啦华硕 Rampage II Extreme(3800元)如果米不够,也可以把Extreme改为Gene,不过是小板内存推荐金士顿6G DDR3 2000骇

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    设置里程碑|设置里程碑的方法有哪些

    设置里程碑|设置里程碑的方法有哪些,,1. 设置里程碑的方法有哪些1、通过挑战风险,突破认知,从而突破自我。只有在某些特殊的时刻,比如想法和

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    3500元超额值学生娱乐结构的优化配置

    3500元超额值学生娱乐结构的优化配置,,作为一个DIY的主流用户领域的学生,每个用户51学生攒机的高峰。因为学生用户没有稳定的收入来源,攒机