传统的前端我的项目部署依赖于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服务、不波及到后端接口调用、所以能够把它当做纯动态的前端资源进行解决。在实在的我的项目中,会用到代理及跨域解决,如果以上内容还满足不了您的需要,能够评论区留言,一起探讨!!