使用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还会进行对应内容的下载让浏览器进行解析展示。

相关推荐
追逐时光者5 小时前
精选 4 款基于 .NET 开源、功能强大的 Windows 系统优化工具
后端·.net
TF男孩5 小时前
ARQ:一款低成本的消息队列,实现每秒万级吞吐
后端·python·消息队列
AAA修煤气灶刘哥6 小时前
别让Redis「歪脖子」!一次搞定数据倾斜与请求倾斜的捉妖记
redis·分布式·后端
AAA修煤气灶刘哥6 小时前
后端人速藏!数据库PD建模避坑指南
数据库·后端·mysql
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
昵称为空C9 小时前
SpringBoot3 http接口调用新方式RestClient + @HttpExchange像使用Feign一样调用
spring boot·后端
架构师沉默9 小时前
设计多租户 SaaS 系统,如何做到数据隔离 & 资源配额?
java·后端·架构
RoyLin9 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
该用户已不存在10 小时前
Mojo vs Python vs Rust: 2025年搞AI,该学哪个?
后端·python·rust
Moonbit10 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言