小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

系列学习前端之第 11 章：将前端项目部署到本机运行起来 2 种方式（使用 Express 和 Nginx），使用花生壳做内网穿透，让外网可以访问网站_项目打包部署到本机的服务

作者：小桥流水78 | 2024-08-21 14:52:13

踩

项目打包部署到本机的服务

导语

当我们开发完前端项目的时候，需要把项目部署到服务器上运行起来。一般来说在公司里开发的项目，都有专门的运维人员负责部署，或者通过 Jenkins 等集成部署工具让开发人员自行部署。本篇博客简单介绍将前端项目部署到自己的电脑并运行起来。主要讲解 Express 框架和 Nginx。

在前后端分离的社会环境下，大部分前端项目都是通过 Nginx 的方式进行部署，因为 Express 框架是基于 Node.js 平台，Node.js运行的是 js 代码，而现在已经很少很少有企业级项目使用纯 js 代码来编写后端业务逻辑了。

部署完之后，我们想让外网来访问（而不是localhost 或者局域网）项目（不购买云服务器的情况下），让远在他乡的同学朋友能访问，趁机炫技一波，就需要将本机的内网穿透出去（如果你的电脑连网络都没有就当我没说）。

1、Express

Express是一个基于 Node.js 平台的极简、灵活的 Web 应用开发框架。简单来说，Express 是一个封装好的工具包，封装了很多功能，方便我们开发 web 应用。

官网地址：https://www.expressjs.com.cn/

1.1 Express 环境搭建

Express 本身是一个 npm 包，所以可以通过 npm 安装。如果你对 Node.js 和 npm 一无所知，可以先阅读我之前的博客：

系列学习前端之第 9 章：一文搞懂 Node.js 和 nvm，掌握 npm

OK，我们使用 VSCode 工具新建一个 express 空目录。鼠标右键【在集成终端中打开】

1.1.1 包初始化

npm init -y

说明：

npm init -y 或者 npm init --yes

如果命令行不加 -y 或者 --yes，npm 则会采用“交互式”的方式带领我们去创建 package.json 文件。什么是交互式？就是一问一答的形式。比如：让你确认包的名字、版本号、描述、作者名字、证书等等。一般开发过程我们直接跳过这个交互式。

1.1.2 安装 express

npm i express

安装成功：

1.1.3 新建服务器文件

在 express 目录下新建服务器文件，比如：server.js 或者你喜欢的名字，完整代码：


//引入 express
const express = require("express");
 
//创建 app 实例对象
const app = express();
 
//测试 HelloWorld
app.get("/hello", (req, res) => {
    res.send("HelloWorld,This is my server!");
})
 
//监听服务器端口
app.listen(6666, () => {
    console.log("服务器启动成功，监听端口6666");
})

1.1.4 启动服务

使用以下命令行启动服务（注意要对应上你 js 的文件名，其实就是运行你的 js 文件，server 是我的 js 文件名）：

node server

控制台输出：

1.1.5 验证

浏览器地址访问：http://localhost:6666/hello

说明我们搭建 Express 服务器成功！

1.2 使用 Express 部署前端项目

1.2.1 打包前端项目

我们知道，现在的浏览器只能运行 html、css、js 文件，所以我们使用框架生成的文件（比如 .vue）是无法直接被浏览器运行的，需要使用工具构建（build）和打包。

假如是 Vue 框架脚手架开发的前端项目，我们使用以下命令来构建项目：

npm run build

说明：在 Vue 脚手架中有一个 package.json 文件，里面的 scripts 节点有相关的命令。其中 npm run serve 是开启 8080 的内置服务器。而 npm run build 是构建项目。

脚手架只构建 src 文件夹和 public 文件夹的内容，其它地方的文件是不构建的。

构建成功后，会在项目下生成一个 dist 文件夹，里面存放项目所需的 js、css、html 和网站图标 favicon.ico。

1.2.2 部署项目

回到我们的 express 框架的项目中，在项目下创建一个 static 文件夹用来存放前端静态资源文件（或者你喜欢的名字，建议按照行业规范）。前端静态资源文件指的是 html、css、js 这些文件。

然后把打包好的文件复制到 static 文件夹下，注意是全量复制粘贴，不要遗漏，如图：

1.2.3 让 Express 框架识别项目

静态资源文件部署到服务器后，还需要做一个重要的步骤，就是让 Express 框架识别前端项目，具体操作就是修改 server.js ，增加如下代码（两个下划线加 dirname）：

app.use(express.static(__dirname + "/static"));

完整代码如下 server.js：


//引入 express
const express = require("express");
 
//创建 app 实例对象
const app = express();
 
app.use(express.static(__dirname + "/static"));
 
//测试 HelloWorld
app.get("/hello", (req, res) => {
    res.send("HelloWorld,This is my server!");
})
 
//监听服务器端口
app.listen(6666, () => {
    console.log("服务器启动成功，监听端口6666");
})

1.2.4 重启 express 服务

在 VSCode 终端的右下角，切换到 express 项目的终端，然后使用 Ctrl+C 停止项目，然后再重启：

node server 注意这个 server 对应的是你的 js 文件名，就是运行你的 js 文件的意思

1.2.5 验证

浏览器访问：http://localhost:6666/ 或者 http://localhost:6666/index.html

如果把 express 框架的端口号改成 80，可以不需要输入端口号。

测试效果：

OK，使用 Express 将前端项目部署到本机运行起来成功！

1.3 解决 Vue 项目路由 history 模式的兼容性问题

如果前端项目是使用 Vue 框架开发，路由中如果使用 history 模式，会有兼容性问题。兼容性问题主要体现在前端把地址栏的 URL 传给后端服务器，后端服务器没有找到对应 URL 导致 404。

解决 history 兼容性问题的工作在后端服务器，跟前端开发没多大关系。所以修改的是 express 框架。

我们使用第三方库 connect-history-api-fallback 来解决 history 模式的兼容性问题。

npm 介绍地址： connect-history-api-fallback - npm

回到 express 项目中，先下载：

npm i connect-history-api-fallback

修改 express 项目的 server.js 文件

//引入 connect-history-api-fallback 解决 history 模式兼容性问题
const history = require("connect-history-api-fallback");

... ... 其它代码

//使用 connect-history-api-fallback 对象，注意要在框架处理静态资源文件之前
app.use(history());

完整代码如下：


//引入 express
const express = require("express");
//引入 connect-history-api-fallback 解决 history 模式兼容性问题
const history = require("connect-history-api-fallback");
 
//创建 app 实例对象
const app = express();
 
//使用 connect-history-api-fallback 对象，注意要在框架处理静态资源文件之前
app.use(history());
 
app.use(express.static(__dirname + "/static"));
 
//测试 HelloWorld
app.get("/hello", (req, res) => {
    res.send("HelloWorld,This is my server!");
})
 
//监听服务器端口
app.listen(6666, () => {
    console.log("服务器启动成功，监听端口6666");
})