正常公司里一般都是使用nginx作静态资源代理，这里我们测试使用node做静态资源代理。
创建git仓库，初始化前端项目
首先去github或者码云上创建一个仓库jenkins_node，然后clone到本地。然后我们进入到jenkins_node目录下，使用vue-cli初始化一个vue项目，vue create vue-test,需要先全局安装vue-cli。
然后在jenkins_node文件夹下载建一个server文件夹，并使用npm init -y初始化一下，这个文件夹下用来放node服务代码。
编写node服务
下面我们来写node服务。在server文件夹下新建一个server.js文件。这里我们使用koa框架来写node服务。首先安装使用到的npm包
npm install koa connect-history-api-fallback koa-static koa2-proxy-middleware
koa-static用来做静态资源代理connect-history-api-fallback解决vue中mode为history时刷新页面报错的问题koa2-proxy-middleware用来做代理转发
然后server.js中的代码如下
const Koa = require('koa')
const history = require('connect-history-api-fallback');
const serve = require('koa-static')
const proxy = require('koa2-proxy-middleware')
const app = new Koa()
const moddleHistory = options=> {
const middleware = history(options);
const noop = () => {};
return async (ctx, next)=> {
middleware(ctx, null, noop);
await next();
};
};
// 如果需要做代理转发的话（一般用来调用后端的接口时），在此处处理，要和vue项目中vue.config.js的proxy里的代理同步
// 下面的意思是，当匹配到api开头的路由时会把请求转发到http://localhost:8018上
const options = {
targets: {
'/api/(.*)': {
target: 'http://localhost:8018',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
}
}
app.use(moddleHistory({
verbose: true
}));
app.use(
proxy(options)
);
// 代理static文件夹下的静态资源
app.use(serve(__dirname + '/static', {extensions: ['html']}))
app.listen(8018)
这个时候我们先去前端项目vue-test文件夹下面修改一下vue.config.js配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir: '../server/static',
})
我们把打包输出的路径指向server文件夹下的static文件夹下
此时的文件夹结构
- vue-test下时前端源代码
- server下server.js是node服务代码
- server下static时前端代码打包之后的静态文件
待会我们要把server文件夹里的文件上传到服务器上（node_modules除外），然后再服务器上把服务启动起来。
这个时候我们就可以先本地测试一下node的静态资源代理了，
到server文件夹下，使用命令node server.js此时，node服务就启动在了8018端口，我们可以通过http://localhost:8018/ 来访问项目了
此时本地已经测试完成了，下面就可以将node服务代码上传到服务器启动起来，然后使用jenkins集成git拉去最新的代码并打包，将打包后的代码移动到server/static就可以了。
上传node服务代码到服务器
我们在server文件夹下再建立一个vueTestServer文件夹，将static文件夹，server.js,package.json和package-lock.json复制到vueTestServer文件夹下，然后将vueTestServer压缩成zip文件(为了避免出现未知的错误，这里重命名把后缀的.zip删除)。
然后我们到服务器上通过rz命令上传该压缩文件
登录服务器之后，cd /到根目录下，我们建一个front文件夹mkdir front
然后进去到front文件夹下cd front,使用命令rz然后enter，上传刚刚压缩的vueTestServer
如果报 rz: command not found，需要先安装 yum -y install lrzsz 即可
上传之后，还需安装unzip解压工具用来解压zip文件yum -y install unzip
然后执行unzip vueTestServer.zip,这样就把解压到了当前文件夹下
进如到vueTestServer目录下,使用
npm install安装package.json里的依赖包
这里先执行node -v看看有没有装node环境，node环境安装见02部分
这里我们还需要安装一个pm2,用来管理node进程的
npm i pm2 -g
然后我们就可以通过pm2来启动node服务了。
pm2 start server.js
这个时候就可以通过ip:端口号，来访问了页面了，端口号就是server.js里最后监听的端口号8018
pm2常用的命令
pm2 start app.js # 启动app.js应用程序
pm2 start app.js --watch # 当文件变化时自动重启应用
pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
pm2 list # 列表 PM2 启动的所有的应用程序
pm2 stop app.js # 停止app.js应用程序
pm2 stop all # 停止所有应用程序
pm2 restart app.js # 重启app.js应用程序
这些完成之后，node服务一般不会去动了，除非改了server.js里面的内容才回去重启服务，下面我们要做的就是从git上拉去最新的代码，然后打包，把打包后的文件移动到vueTestServer/static下
