👊简单到爆，一看就会，来教你搭建express静态服务器

慢功夫
3,166 阅读3分钟

需求

想利用express部署一个React前端页面服务器。支持静态页面的访问，支持接口的访问。
废话不多说，我们就开始吧

开始

创建一个React脚手架：
image.png
image.png

进入项目：
image.png

项目基本结构：
image.png

启动项目：
image.png
image.png

安装router-dom：
image.png

创建一个user页面：
image.png

const User = () => {
  
  return <h1>this is a User Page</h1>;
}

export default User;

修改App.tsx, 添加一个路由/user
image.png
刷新页面：
image.png

点击 to user,跳转
image.png

功能正常

build项目：
image.png
image.png

文件中多了一个文件夹build，这里就存放着构建好的文件
image.png

基本文件准备好了，就可以创建一个本地server了

Static Server

新建文件夹server
image.png

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

在server文件里面创建一个server.js文件

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

访问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

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

访问localhost:3001/api/getUser
image.png

没问题

修改前端代码

修改User/index.tsx,访问接口/api/getUser

import { useEffect, useState } from "react"

const User = () => {
  const [user, setUser] = useState<any>(null);
  useEffect(() => {
    fetch('/api/getUser').then(res => res.json()).then(data => {
      setUser(data)
    })
  }, []);
  return user ? <div><h1>{user.name}</h1></div> : <h1>fetch failed</h1>;
}

export default User;

修改后的代码表示，在进入到User页面时，就开始访问/api/getUser,并且将返回的结果显示出来

还需要配置一个开发环境的代理：
image.png

端口号指向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的路由需要区分开来，这样就不会出错了
本文内容详尽，例子繁多，步骤清晰，是个不可多得的好文章，喜欢的金友们可以点个小爱心❤️

avatar
文章
阅读
粉丝