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

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

服务器之家 - 服务器技术 - Nginx - Nginx搭建前端静态服务器+文件服务器

Nginx搭建前端静态服务器+文件服务器

2021-09-14 01:59panqi181 Nginx

Nginx虚拟主机配置, 我们可以在一台机器上面配置很多个虚拟主机配置多个域名。那这样的话我们就可以靠虚拟主机转发到不同的应用,就不用每个系统都配置一个Nginx。

一、Nginx的虚拟主机介绍

大家可能被虚拟主机不太了解,那我们的解释一下,虚拟主机指在一台物理主机服务器上划分出多个磁盘空间,每个磁盘空间都是一个虚拟主机,每台虚拟主机都可以对外提供Web服务,并且互不干扰。

Nginx搭建前端静态服务器+文件服务器

就类似我们本地虚拟机,我们可以在window系统上面安装一个虚拟机,在虚拟机里面安装很多个系统。那这样的话我们就可以模拟很多个服务器。

Nginx虚拟主机配置, 我们可以在一台机器上面配置很多个虚拟主机配置多个域名。那这样的话我们就可以靠虚拟主机转发到不同的应用,就不用每个系统都配置一个Nginx。

Nginx搭建前端静态服务器+文件服务器

二、搭建前端静态服务器

前面我们讲解了很多基础知识以及我们这个环境的搭建,那我们现在就来开发我们第一个案例实操。

我们知道一个系统它有前端页面跟后端服务组成。这个就不像我们最开始学那个编码的时候,前端代码跟后端代码放在一起。这一种的话性能很低,完全支撑不了高并发访问。

现在公司基本都是前后端分离的架构。前端专门负责开发前端的页面,后端专门开发对应的后端接口。

后端部署的话一般都是集群部署,然后会增加对应的缓存跟消息队列,提高接口的一个性能。

那前端这一块我们一般怎么去部署呢?

比如vue开发或者React开发的项目,我们一般会把前端代码单独放到一个文件服务器上面或者购买CDN服务,用户访问前端代码,前端代码会发起异步请求我们后端的接口,然后渲染数据最终通过浏览展示出来。

这个跟下面的图也是一样的,我们可以用Nginx做一个文件服务器,用户访问Nginx去找对应的HTML代码返回给浏览器,再请求后端接口拿数据在浏览器上渲染出来。

Nginx搭建前端静态服务器+文件服务器

那Nginx怎么配置静态代码服务器呢?跟着步骤即可,我们编辑/usr/local/nginx/conf/nginx.conf文件。

找到server虚拟主机节点,配置下静态html文件路径,root可以是相对路径,也可以是绝对路径,我们这边使用nginx 里面的html文件夹,index 配置表示会根据html文件路径去找默认的首页文件,先找index.html

如果找不到就找index.htm

Nginx搭建前端静态服务器+文件服务器

  1. server { 
  2.         listen       80; 
  3.         server_name  aabbccdd.com; # 本地虚拟主机的配置域名 
  4.  
  5.         location / { 
  6.             root   /usr/local/nginx/html; #相对路径或者绝对路径都可以 
  7.             index  xdclass.html; 
  8.         } 
  9.   } 

为了方便验证,我们需要准备对应的前端代码,直接修改/usr/local/nginx/html/index.html里面的代码,修改完保存, 然后重启我们的Nginx即可验证

Nginx搭建前端静态服务器+文件服务器

访问我们配置好的本地域名解析,aabbccdd.com 就可以访问到静态代码文件,包括如果你使用vue或者react 开发的前端代码,也可以按照这种方式进行一个配置。

Nginx搭建前端静态服务器+文件服务器

三、Nginx搭建文件服务器

在讲我们搭建文件服务器之前,我们一般开发一个系统,肯定会涉及到一个文件的上传好比用户的头像, 或者PDF文件,那这些东西我们应该存储到哪里呢?

以前学项目的时候,基本就是把图片传到项目本身里面, 如果文件数量少的话还可以接受。

那如果图片的数量有几万几十万到几百万个,那这个缺点很明显,用Tomcat返回对应的文件,那这个肯定很占用的内存资源、带宽资源以及并发量,基本很少公司会这样做,公司基本就是使用文件服务器或者云厂商提供的CDN。

那这一个文件服务器是怎么操作的流程呢?前端用户上传文件到我们的后端服务器,后端服务器存储临时文件,然后再把文件传到我们的文件服务器,拼装好访问的文件访问URL,再把我们这个URL存储到对应的数据库,最后把URL返回给咱们这个前端用户,这一个就是完整的文件上传的流程。

Nginx搭建前端静态服务器+文件服务器

这样的好处很明显,后续用户访问对应的文件的时候不用经过我们的后端接口,直接访问单独的文件服务器。

我们后端的接口更适合于处理业务逻辑,合适的功能做合适的事情。

那使用Nginx怎么去搭建我们这个图片服务器呢?操作步骤很简单,我们只要找到在nginx.conf配置文件到虚拟主机,然后根据location做个路径的映射就可以。

  1. server { 
  2.         listen       80; 
  3.         server_name  aabbccdd.com; 
  4.         location /app/img { 
  5.           alias /usr/local/software/img/; 
  6.         } 
  7.   } 

上面这个配置的意思就是用户访问 aabbccdd.com/app/img/ ,命中我们配置的location路径,Nginx就会根据对应的文件名称,去这个/usr/local/software/img/文件夹下面找一下对应的文件返回给用户。

这个alias相当于取了一个别名,把用户访问的资源路径映射到我们这个配置的文件夹下面。

为了方便测试,我们直接在这个文件夹上面上传几个图片和文本,上传上去之后,我们重启我们的Nginx了。

Nginx搭建前端静态服务器+文件服务器

我们就可以通过我浏览器访问对应的资源路径,Nginx就会根据路径找对应的文件返回给我们。

原文地址:https://www.toutiao.com/a7005498295393010215/

延伸 · 阅读

精彩推荐
  • Nginx通过Nginx规则重写URL去掉index.php不显示index.php

    通过Nginx规则重写URL去掉index.php不显示index.php

    Nginx不仅占用内存少,并发能力强,而且拓展功能丰富,可以通过安装模板来强化功能,也能通过规则优化,优化服务器并发处理能力,是建站的不二之选...

    Genius日记5872020-10-16
  • Nginxnginx ssl免密码重启教程详解

    nginx ssl免密码重启教程详解

    这篇文章给大家介绍了nginx 如何启动以及nginx ssl 免密码重启 的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧 ...

    mrr4272019-11-19
  • NginxNginx location 和 proxy_pass路径配置问题小结

    Nginx location 和 proxy_pass路径配置问题小结

    本文是基于 location 的匹配末尾是否配置 / 和 proxy_pass 末尾是否配置 / ,进行测试,完全还原了整个测试过程,本文给大家介绍Nginx location 基本配置及相关配...

    自由早晚乱余生18742021-09-24
  • NginxNginx动静分离实现案例代码解析

    Nginx动静分离实现案例代码解析

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

    盗哥泡茶去了3382020-09-27
  • NginxNginx Rewrite使用场景及代码案例详解

    Nginx Rewrite使用场景及代码案例详解

    这篇文章主要介绍了Nginx Rewrite使用场景及代码案例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可...

    盗哥泡茶去了11862020-09-27
  • Nginx利用nginx和腾讯云免费证书制作https的方法

    利用nginx和腾讯云免费证书制作https的方法

    这篇文章主要介绍了利用nginx和腾讯云免费证书制作https的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...

    dalaoyang5992019-12-30
  • Nginxnginx rewrite 伪静态配置参数和使用例子

    nginx rewrite 伪静态配置参数和使用例子

    nginx下伪静态配置参数详细说明,使用nginx的朋友,nginx rewrite 伪静态配置参数和使用例子 附正则使用说明 ...

    服务器之家3102019-10-08
  • Nginx如何优化Nginx的处理性能

    如何优化Nginx的处理性能

    Nginx是一个很强大的高性能Web和反向代理服务,它具有很多非常优越的特性,在连接高并发的情况下,Nginx是Apache服务不错的替代品。其特点是占有内存少,...

    Dockone.io5142020-12-11