--- theme: simplicity-green --- # 需求想利用express部署一个React前端页面服务器。支持静态页面的访问，支持接口的访问。
废话不多说，我们就开始吧 # 开始创建一个React脚手架：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a21db3690b1f48159c0a1838c9295fc3~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c874edaf3e2c40eab7a46bc354b29909~tplv-k3u1fbpfcp-zoom-1.image) 进入项目：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8348efc70a594b19a1747e5c3c27627c~tplv-k3u1fbpfcp-zoom-1.image) 项目基本结构：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fe4f5c1357e4c8b9b32a9a8118918b3~tplv-k3u1fbpfcp-zoom-1.image) 启动项目：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bcae57b6c604ed8a6f9129d3cdee1f1~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4223018c5b9450b86b33753e7522c9e~tplv-k3u1fbpfcp-zoom-1.image) 安装router-dom：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3108da228f6d41a39eaaf0b40c61af7d~tplv-k3u1fbpfcp-zoom-1.image) 创建一个user页面：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caf46adf37f04151b00af54b98482552~tplv-k3u1fbpfcp-zoom-1.image) ```javascript const User = () => { return

this is a User Page

; } export default User; ``` 修改App.tsx, 添加一个路由`/user`
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2da5429d14049edba3e213705c1dd6a~tplv-k3u1fbpfcp-zoom-1.image)
刷新页面：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55b755ff12e64edb9ef6d505e3a078c6~tplv-k3u1fbpfcp-zoom-1.image) 点击 `to user`,跳转
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58eb8ccb6a9d4fcbba769ca8f17ed6dc~tplv-k3u1fbpfcp-zoom-1.image) > 功能正常 build项目：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1276223c72b34cfb9e135fee3f319537~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cff41b81036e4044879d237d365acc8f~tplv-k3u1fbpfcp-zoom-1.image) 文件中多了一个文件夹build，这里就存放着构建好的文件

> 基本文件准备好了，就可以创建一个本地server了 # Static Server 新建文件夹server

进入server文件夹路径，安装express

在server文件里面创建一个server.js文件 ```javascript const express = require("express"); const path = require("path"); const router = express.Router(); router.use(express.static(path.join(__dirname, "../build"))); router.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "../build/index.html")); }); const app = express(); app.use(router); app.listen(3001, () => { console.log("server is running on port 3001"); }); ``` 这里有两个重点，一个重点是对于所有的`/*`路径都统一返回`build`文件夹下面的`index.html`，这样做的目的是在跳转到其他路径，并且刷新页面之后，仍然可以显示正确的内容。 > 往下看，你会理解更清楚 ### 测试：启动本地server：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/332ba7c859274abfb6f46de0d72b5ecb~tplv-k3u1fbpfcp-zoom-1.image) 访问`localhost:3001`
2023-08-21 14.51.26.gif

> 访问没问题，点击 `to user`，跳转也没有问题，并且刷新也没有问题如果我把代码`router.get("/*",...)`中的`“/*”`改成`"/"`，跳转到`/user`后刷新页面就会出现问题：
2023-08-21 14.52.09.gif

基本静态服务器到这里其实就差不多了，下面再做个接口服务器吧 # API Server ### 增加一个路由对象增加一个路由router2：`/api` ```javascript const express = require("express"); const path = require("path"); const router = express.Router(); router.use(express.static(path.join(__dirname, "../build"))); router.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "../build/index.html")); }); const router2 = express.Router(); router2.get("/getUser", (req, res) => { res.end(JSON.stringify({ name: "zhangsan" })); }); const app = express(); app.use("/api", router2); app.use(router); app.listen(3001, () => { console.log("server is running on port 3001"); }); ``` 新注册的`router2`要放在注册`router`之前，这样会优先匹配以`/api`开头的路由。然后`router2`准备了一个 `/getUser`的Api，返回一个简单的对象。访问接口的就走`router2`，静态文件就走`router`，这样和上面的静态文件服务器区分开了。启动服务器：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e144f25ced1f4fcfbcdb486e3db2fb16~tplv-k3u1fbpfcp-zoom-1.image) 访问`localhost:3001/api/getUser`
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14d9dd62ae1f4571a72a5ce1ead68465~tplv-k3u1fbpfcp-zoom-1.image) > 没问题 ### 修改前端代码修改User/index.tsx,访问接口`/api/getUser` ```javascript import { useEffect, useState } from "react" const User = () => { const [user, setUser] = useState(null); useEffect(() => { fetch('/api/getUser').then(res => res.json()).then(data => { setUser(data) }) }, []); return user ?

{user.name}

fetch failed

; } export default User; ``` 修改后的代码表示，在进入到User页面时，就开始访问`/api/getUser`,并且将返回的结果显示出来还需要配置一个开发环境的代理：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b32146bea3c24b67b14b67b79b86d1c0~tplv-k3u1fbpfcp-zoom-1.image) > 端口号指向3001 ### 测试：重启项目，并刷新页面：
2023-08-21 16.27.12.gif

> 没有问题重新构建项目`npm run build`，然后访问`localhost:3001`
2023-08-21 16.21.12.gif

# 总结：这篇文章讲了如何使用express搭建静态服务器，和API服务器，其中需要注意的是静态服务器的index.html是全路径匹配，并且静态服务器的的路由和API的路由需要区分开来，这样就不会出错了
本文内容详尽，例子繁多，步骤清晰，是个不可多得的好文章，喜欢的金友们可以点个小爱心❤️