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

前言

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

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

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

js 复制代码

app.use(express.static(./upload))

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

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

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

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