likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 29

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

一、在服务器上安装node环境node+express构建web服务器部署前端项目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 wget2、解压文件

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/profile4、安装npmcurl https://npmjs.org/install.sh | sh5、查看环境是否安装成功执行node --version及npm -v查看版本号node+express构建web服务器部署前端项目

二、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/morgan4、其他中间件当然你可能还会使用到其他的express中间件如:应用级中间件、 路由级中间件、错误处理中间件、内置中间件、第三方中间件(结合项目实际情况可选择相应中间件进行配合搭建)在此不做过多累述、大家可参考express框架https://www.expressjs.com.cn/4x/api.html

三、打包与部署1、上传server.js及前端项目至服务器把server.js和前端项目打包好之后上传至服务器frontEnd目录下。node+express构建web服务器部署前端项目2、启动服务在服务器端添加package.json并安装server.js启动依赖的express包。执行 npm install命令即可自动安装node+express构建web服务器部署前端项目接下来我们运行:node server.js启动服务:node+express构建web服务器部署前端项目运行成功后,我们可以看到我们的web服务器已经启动成功。3、打开页面进行验证node+express构建web服务器部署前端项目点击登录,我们可以看到项目页面node+express构建web服务器部署前端项目

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