node+express构建web服务器部署前端项目

传统的前端项目部署依赖于tomcat服务做静态资源服务器、随着前后端分离的进程化、前端项目需要单独部署。对于前端部署我们除了采用nginx搭建静态资源服务器外，还可以使用node来搭建web服务器。下面跟大家分享下如何使用node搭建web服务器：

一、在服务器上安装node环境

1、进入weblogic目录，下载node二进制文件包（免编译）

sudo  wget  https://nodejs.org/dist/v8.14.0/node-v8.14.0-linux-x64.tar.gz

如果wget不可用，可先下载wget:sudo yum -y install wget
2、解压文件

sudo tar zxvf node-v8.14.0-linux-x64.tar.gz

3、配置node环境变量

sudo vim /etc/profile

添加NODE_HOME,配置export path

export NODE_HOME = /home/weblogic/node-v8.14.0-linux-x64.tar.gz

执行命令使文件生效
source /etc/profile
4、安装npm
curl https://npmjs.org/install.sh | sh
5、查看环境是否安装成功
执行node --version及npm -v查看版本号

二、server脚本

1、server.js脚本
如果你会点nodejs，脚本就很好理解了，下面是server.js启动脚本的内容：
脚本使用了express框架、把我们打包好的dist目录作为静态资源、在收到客户端请求后，由于vue项目是单页应用，我们只需要把index.html返回客户端即可。

const fs = require("fs");
const path = require("path");
const express = require("express");
const app = express();

app.use(express.static(path.resolve(__dirname, "./dist")));

app.get("*", function (req, res) {
  console.log(req);
  const html = fs.readFileSync(path.resolve(__dirname, "./dist/index.html"), "utf-8");
  res.send(html);
});

app.listen(8082, () => {
  console.log("Server is running at http://10.29.43.152:8082");
});

这是一个非常简单的express作为web服务的脚本，如果你的vue项目使用mock服务、不涉及后端接口，那么以上内容可以满足纯前端的部署了。如果涉及到接口调用、跨域解决、推荐使用http-proxy、http-proxy-middleware中间件进行接口地址代理

2、中间件模块

const proxy = require('http-proxy-middleware');
var options = {
        target: 'http://10.29.43.152:8090',    //  你服务器端口
        changeOrigin: true,
    };
var exampleProxy = proxy(options);
app.use('/', exampleProxy);              //  ‘/’ 表示对所有请求代理

增加以上代码即可。

3、日志模块
如果你想搭建比较完善的express web服务，可能还需要优秀的日志模块
推荐使用morgan中间件，可点击该链接查看详细用法：https://www.npmjs.com/package/morgan
4、其他中间件
当然你可能还会使用到其他的express中间件如：
应用级中间件、 路由级中间件、错误处理中间件、内置中间件、第三方中间件（结合项目实际情况可选择相应中间件进行配合搭建）在此不做过多累述、大家可参考express框架https://www.expressjs.com.cn/4x/api.html

三、打包与部署
1、上传server.js及前端项目至服务器
把server.js和前端项目打包好之后上传至服务器frontEnd目录下。

2、启动服务
在服务器端添加package.json并安装server.js启动依赖的express包。执行 npm install命令即可自动安装

接下来我们运行：
node server.js启动服务：

运行成功后，我们可以看到我们的web服务器已经启动成功。
3、打开页面进行验证

点击登录，我们可以看到项目页面

注：由于我这里使用的是mock服务、不涉及到后端接口调用、所以可以把它当做纯静态的前端资源进行处理。在真实的项目中，会用到代理及跨域解决，如果以上内容还满足不了您的需求，可以评论区留言，一起探讨！！