使用Express部署静态资源服务器

前言


🤡如果我们的静态资源在Express文件中,我们该如何访问到?我们部署前端项目一般都是使用Nginx,我们能否使用Express来直接部署静态文件?答案是可以的,那么我们就来看下如何实现这些功能吧!

一.如何在Express中部署静态资源


🫥在Express中进行非常的简单,直接使用已经提供的中间件就可以了,部署的内容可以是图片等静态文件也可以是前端打包好的静态资源。

js 复制代码
app.use(express.static(./upload))

二.使用Nginx部署前端资源原理


🥺首先我们先来了解下使用静态资源服务器部署静态资源的基本原理是什么

  1. 开发者将静态资源上传到服务器的某个文件夹中。
  2. 客户通过浏览器在地址中输入URL,Nginx从文件夹中查找静态资源的内容。
  3. 将查找到的内容返回给浏览器,浏览器根据文件的依赖进行下载展示。

三.使用Express代替Nginx部署静态资源


🤡首先我们可以将开发好的前端项目在Express中进行部署,我们拷贝一下dist包,然后使用如下的方式进行引入就可以了。

js 复制代码
const express = require('express')
const userRouter = require('./router/userRouter.js')
const app = express()

app.use(express.static('./dist'))

// 使用路由
app.use('/users', userRouter)

app.listen(9000, () => {
  console.log("服务启动成功")
})

然后我们直接在浏览器上访问9000端口。

🫥疑问解答,为什么直接访问900端口就可以进行部署了?因为无论在Nginx还是在Express中当你直接访问对应端口的时候静态资源服务器会自动去查找index.html然后将它加载到浏览器中,之后会依次加载他们所依赖的对应的样式文件和JS文件等等。

四.总结


🤗在静态资源部署的时候我们一般都会使用Nginx来进行静态资源的部署,但是其实我们还有更加简单的方式类来部署,并且仅仅一行,就能实现静态资源的部署,并且当我们访问的时候index.html还会进行对应内容的下载让浏览器进行解析展示。

相关推荐
追逐时光者2 小时前
推荐 12 款开源美观、简单易用的 WPF UI 控件库,让 WPF 应用界面焕然一新!
后端·.net
Jagger_2 小时前
敏捷开发流程-精简版
前端·后端
苏打水com2 小时前
数据库进阶实战:从性能优化到分布式架构的核心突破
数据库·后端
间彧3 小时前
Spring Cloud Gateway与Kong或Nginx等API网关相比有哪些优劣势?
后端
间彧3 小时前
如何基于Spring Cloud Gateway实现灰度发布的具体配置示例?
后端
间彧4 小时前
在实际项目中如何设计一个高可用的Spring Cloud Gateway集群?
后端
间彧4 小时前
如何为Spring Cloud Gateway配置具体的负载均衡策略?
后端
间彧4 小时前
Spring Cloud Gateway详解与应用实战
后端
EnCi Zheng5 小时前
SpringBoot 配置文件完全指南-从入门到精通
java·spring boot·后端
烙印6015 小时前
Spring容器的心脏:深度解析refresh()方法(上)
java·后端·spring