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

目录
  • 一、nginx 作用
  • 二、nginx 静态HTTP服务器配置
  • 三、nginx HTTP服务器(动静分离--nginx+tomcat实现动静分离)
  • 四、 反向代理----使用proxy_pass
    • nginx 配置springboot+vue 前后端分离项目
      • 1、思路:nginx 结合自身特性,本身一个静态资源的服务器,
      • (1) 通过nginx实现域名的方式访问网站,以及把对数据的请求通过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静态资源服务器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解nginx静态资源服务器简单配置

    传统的web项目,一般都将静态资源存放在 webroot的目录下,这样做很方便获取静态资源,但是如果说web项目很大,用户很多,静态资源也很多时,服务器的性能 或许就会很低下了.这种情况下一般都会需要一个静态资源的服务器. 搭建nginx服务器首先得安装nginx服务,关于nginx服务的安装可以参考我的另一篇博客<nginx服务安装>这里直接介绍静态服务器的配置 进入nginx安装目录的conf目录下,修改nginx.conf文件,在一个server{}中添加 一个location 部分配置

  • linux服务器上使用nginx访问本地静态资源的方法

    1.查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3.将端口号修改为8080 4.修改nginx服务配置 vim /etc/nginx/conf.d/nginx.conf 5.重启nginx服务 service nginx restart 6.页面尝试访问本地资源 7.访问成功! 总结 以上所述是小编给大家介绍的linux服务器上使用nginx访问

  • 利用nginx搭建静态资源服务器的方法步骤

    以windows为例,linux其实一样: 搭建静态资源服务器 我电脑上的work文件夹下面有很多图片,我想通过nginx搭建静态资源服务器,通过在地址栏输入ip+port的方式完成目录的映射 找到nginx安装目录,打开/conf/nginx.conf配置文件,添加一个虚拟主机 添加监听端口.访问域名 重点是添加location, 映射-URL:/work/; 注意:如果当前server模块中已有一个location且URL为"/",那么新建的location的url应为匹配路径,不

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

    目录 一.nginx 作用 二.nginx 静态HTTP服务器配置 三.nginx HTTP服务器(动静分离--nginx+tomcat实现动静分离) 四. 反向代理----使用proxy_pass nginx 配置springboot+vue 前后端分离项目 1.思路:nginx 结合自身特性,本身一个静态资源的服务器, (1) 通过nginx实现域名的方式访问网站,以及把对数据的请求通过nginx反向代理转发给后端容器(后端服务),避免了接口暴露的不安全 2.通过dockerCompose+

  • javascript实现动态导入js与css等静态资源文件的方法

    本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法.分享给大家供大家参考.具体实现方法如下: /** * 动态导入静态资源文件js/css */ var $import = function(){ return function(rId, res, callback){ if(res && 'string' == typeof res){ if(rId){ if($($('#' + rId), $('head')).length>0){ return; }

  • SpringBoot中配置Web静态资源路径的方法

    介绍: 本文章主要针对web项目中的两个问题进行详细解析介绍:1- 页面跳转404,即controller转发无法跳转页面问题:2- 静态资源文件路径问题. 项目工具: Intelij Idea, JDK1.8, SpringBoot 2.1.3 正文: 准备工作:通过Idea创建一个SpringBoot-web项目,此过程不做赘述,创建完成后项目结构如下图: 1- 创建一个controller代码如下: package com.example.webpractice.controller; i

  • webpack实现静态资源缓存的方法

    目录 引言 区分一下几种不同的hash hash chunkhash contenthash 实现js缓存 CommonsChunkPlugin不正确用法 引起问题的原因 实现css的缓存 实现图片/字体的缓存 参考 引言 静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存).回到本文主题,在使用webpack构建的项目中,稍有不慎的话,即使服务器设置了缓存策略,可能构建的项目无法实现静态资源缓存.那么webpack怎样才能达到使用缓存的效果呢,

  • Springboot静态资源的访问方法介绍

    目录 1.官方文档 2.基本介绍 3.快速入门 4.静态资源访问注意事项和细节 1.官方文档 在线文档 2.基本介绍 只要静态资源放在类路径下: /static . /public . /resources . /META-INF/resources 可以被直接访问- 对应文件 WebProperties.java 直接放到resources目录下是访问不到的,这里的 /resources是指在resource目录的创建resources目录 private static final Strin

  • SpringBoot静态资源的访问方法详细介绍

    目录 一. 静态资源 二. 静态资源访问目标 三. 静态资源访问前缀 1. 默认访问路径为 / 2. 配置访问前缀 3. 配置静态资源默认访问位置 四. 欢迎页及网页图标设置 1. 欢迎页的设置 2. 网页图标的设置 分析源码 一. 静态资源 在web场景中的静态图片.html网页等 二. 静态资源访问目标 在SpringBoot中,静态资源访问目标有 resources文件下的 public.resources.static 以及 META-INF 文件夹下的 recources 如下图所示:

  • spring boot 自定义规则访问获取内部或者外部静态资源图片的方法

    项目中需要将图片放在磁盘上,不能将图片放在webapp下面! springboot默认配置基本上可以满足我们的日常需要.但是项目中大量用户上传的图片,不能放在tomcat下面,这样子每次重新部署项目的时候,图片就失效了,很是麻烦. 所以此时就需要自定义配置springboot的项目静态文件映射 springboot默认的配置规则 映射 /** 到 classpath:/static classpath:/public classpath:/resources classpath:/META-IN

  • springboot操作静态资源文件的方法

    默认静态资源供 SpringBoot有几个默认的静态资源目录,当然也可配置,默认配置的/**映射到/static(或/public ,/resources,/META-INF/resources),自定义配置方式如下: spring.mvc.static-path-pattern=/** # Path pattern used for static resources. 前端如果需要访问默认的静态资源,下面有点要注意,考虑下面的目录结构: └─resources │ application.ym

随机推荐