脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → nginx静态资源服务器

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

 更新时间：2022年07月01日 08:51:59   作者：一乐乐  
Nginx本身也是一个静态资源的服务器，当只有静态资源的时候，就可以使用Nginx来做服务器，同时现在也很流行动静分离，就可以通过Nginx来实现，这篇文章主要介绍了nginx静态资源的服务器配置方法,需要的朋友可以参考下

一、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静态资源服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解Nginx proxy_pass的一个/斜杠引发的血案

    详解Nginx proxy_pass的一个/斜杠引发的血案

    这篇文章主要介绍了详解Nginx proxy_pass的一个/斜杠引发的血案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Nginx定义域名访问方式

    Nginx定义域名访问方式

    这篇文章主要介绍了Nginx定义域名访问方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-05-05
  • 隐藏网站Nginx版本号信息的方法分享

    隐藏网站Nginx版本号信息的方法分享

    隐藏网站nginx服务的版本号信息，在安全的角度上来说，可以防止黑客快速利用nginx的版本漏洞进行攻击，所以本文为大家整理了隐藏网站Nginx版本号信息的方法，希望对大家有所帮助
    2023-08-08
  • Nginx启用gzip压缩的方法示例

    Nginx启用gzip压缩的方法示例

    这篇文章主要介绍了Nginx启用gzip压缩的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 基于nginx设置浏览器协商缓存过程详解

    基于nginx设置浏览器协商缓存过程详解

    这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • Nginx中FastCGI如何配置优化

    Nginx中FastCGI如何配置优化

    这篇文章主要介绍了Nginx中FastCGI如何配置优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Nginx 虚拟主机配置的三种方式(基于域名)

    Nginx 虚拟主机配置的三种方式(基于域名)

    Nginx配置虚拟主机支持3种方式：基于IP的虚拟主机配置，基于端口的虚拟主机配置，基于域名的虚拟主机配置。本文主要介绍了基于域名的实现，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • nginx ingress代理websocket流量的配置方法

    nginx ingress代理websocket流量的配置方法

    ingress nginx默认支持websocket协议，使用长连接协议时需要注意连接超时的设置，文中有提到读取和发送超时的注解参数，通过本文阅读可以快速掌握，对nginx ingress代理websocket相关知识感兴趣的朋友一起看看吧
    2022-03-03
  • 利用nginx搭建静态资源服务器的方法步骤

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

    这篇文章主要介绍了利用nginx搭建静态资源服务器的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 解决nginx启动失败(bind() to 0.0.0.0:80 failed，An attempt was made to access a socket in...)

    解决nginx启动失败(bind() to 0.0.0.0:80 failed，An attempt was 

    这篇文章主要介绍了解决nginx启动失败问题(bind() to 0.0.0.0:80 failed,An attempt was made to access a socket in ...),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05

最新评论