乐趣区

关于前端:nodeexpress构建web服务器部署前端项目

jiezi

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

退出移动版