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

相关推荐
fox_lht8 小时前
第一章 不可变的变量
开发语言·后端·rust
舒一笑12 小时前
PandaCoder:致敬MyBatis Log Plugin,但我们做得更极致!
后端·程序员·intellij idea
简单点了14 小时前
go前后端项目的启动 、打包和部署
开发语言·后端·golang
雨夜之寂15 小时前
mcp java实战 第一章-第一节-MCP协议简介.md
java·后端
摇滚侠15 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 核心语法 笔记39
spring boot·笔记·后端·thymeleaf
Code blocks17 小时前
GB28181视频服务wvp搭建(二)
后端·音视频
码事漫谈17 小时前
C++与C#布尔类型深度解析:从语言设计到跨平台互操作
后端
程序新视界17 小时前
在MySQL中,一条SQL语句的执行全流程是怎样的?
数据库·后端·mysql
lang2015092817 小时前
打造专属Spring Boot Starter
java·spring boot·后端
码事漫谈18 小时前
解决Python调用C++ DLL失败的问题:extern "C"的关键作用
后端