服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

云服务器|WEB服务器|FTP服务器|邮件服务器|虚拟主机|服务器安全|DNS服务器|服务器知识|Nginx|IIS|Tomcat|

服务器之家 - 服务器技术 - Nginx - nginx静态资源的服务器配置方法

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

2022-07-04 10:23一乐乐 Nginx

Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,同时现在也很流行动静分离,就可以通过Nginx来实现,这篇文章主要介绍了nginx静态资源的服务器配置方法,需要的朋友可以参考下

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

一、nginx 作用

静态HTTP服务器

HTTP服务器(动静分离)

反向代理

负载均衡

二、nginx 静态HTTP服务器配置

Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,同时现在也很流行动静分离,就可以通过Nginx来实现。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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目录找页面

?
1
2
3
4
location / { #匹配路径
        root html; #文件根目录
        index index.html index.htm; #默认页名称
    }

● location 配置方法

location 配置可以有两种配置方法

① 前缀 + uri(字符串/正则表达式)

② @ + name

前缀含义

= :精确匹配(必须全部相等):大小写敏感

~* :忽略大小写

^~ :只需匹配uri部分

@ :内部服务跳转

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

静态资源:数据不变,请求不需要后台处理;动态资源:模板,jsp、templates等,数据需要后台处理后渲染到网页,动态网页。

Nginx可以根据一定规则把不变的资源和经常变的资源区分开,对动静资源进行拆分,实现对静态资源的做缓存,从而提高资源响应的速度。这就是网站静态化处理的核心思路。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 /],然后默认页面是首页;

?
1
2
3
4
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 到那个目录下获取这些静态资源。

?
1
2
3
4
5
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 主要内容:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 主要配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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静态资源服务器内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://www.cnblogs.com/shan333/p/16431672.html

延伸 · 阅读

精彩推荐
  • NginxNginx实现https网站配置代码实例

    Nginx实现https网站配置代码实例

    这篇文章主要介绍了Nginx实现https网站配置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参...

    ノGHJ13102020-12-29
  • Nginx使用Nginx搭建高可用高并发的Wcf集群

    使用Nginx搭建高可用高并发的Wcf集群

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对 C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果你的负载...

    一线码农聊技术2362020-12-03
  • Nginx18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢)

    18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢)

    这篇文章主要介绍了18个运维必知的Nginx代理缓存配置技巧(你都掌握了哪些呢),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考...

    运维之美1902020-01-15
  • Nginx利用njs模块在nginx配置中引入js脚本

    利用njs模块在nginx配置中引入js脚本

    这篇文章主要给大家介绍了关于利用njs模块在nginx配置中引入js脚本的相关资料,通过这个脚本实现一些更复杂的 nginx 配置功能,需要的朋友可以参考下...

    弥广5712022-01-18
  • NginxCentOS7系统下用YUM安装Nginx详解

    CentOS7系统下用YUM安装Nginx详解

    相信大家都知道Nginx ("engine x") 是一个高性能的 HTTP和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。这篇文章将详细给大家介绍在CentOS7系统下用YUM安...

    daisy5062019-11-16
  • Nginxnginx中的listen指令实例解析

    nginx中的listen指令实例解析

    这篇文章主要给大家介绍了关于nginx中listen指令解析的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    郑尔多斯2542019-12-31
  • NginxNginx配置https的实现

    Nginx配置https的实现

    本文主要介绍了Nginx配置https的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    tang_jian_dong3512022-01-10
  • NginxNginx之Http模块系列之autoindex模块的具体使用

    Nginx之Http模块系列之autoindex模块的具体使用

    这篇文章主要介绍了Nginx之Http模块系列之autoindex模块的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    DevOps充电宝5272021-04-27