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

相关推荐
0wioiw025 分钟前
Nodejs(④GraphQL)
后端·graphql
王同学 学出来39 分钟前
跟做springboot尚品甄选项目(二)
java·spring boot·后端
bobz96541 分钟前
Calico 项目功能分析:聚焦转发面
后端
bobz9651 小时前
tcp 状态机
后端
阿杆1 小时前
文心快码 3.5S 发布!实测插件开发,Architect 模式令人惊艳
前端·后端·文心快码
文心快码BaiduComate1 小时前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
计算机毕业设计指导2 小时前
基于Spring Boot + Vue 3的社区养老系统设计与实现
vue.js·spring boot·后端
拾忆,想起2 小时前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
几颗流星2 小时前
Rust 常用语法速记 - 解构赋值
后端·rust
我想当数字游民2 小时前
Go的切片是什么?一些小细节和容易错的地方
后端·golang