将打包好的代码打包上线,并在nodejs中代理跨域 前端工程师完成开发流程,按照常规的做法,此时,运维会将我们的代码部署到阿里云的ngix服务上,对于我们而言,我们可以将其部署到本机的nodejs环境中 企业代码部署分为 自动化部署 /手动部署 (自动化部署就是将手动化部署全部写成了脚本然后去执行脚本)
第一步,建立web服务文件夹 hrServer (桌面git bash here ) mkdir命令的主要功能为创建一个或多个空目录,
$ mkdir hrServer #建立hrServer文件夹
第二步,cd 切换到hrServer文件夹下,初始化npm $ npm init -y
( -y表示一切认为默认值,自动生成package.json文件,可以在这个文件下安装服务端需要的依赖)
第三步,安装服务端框架koa(也可以采用express或者egg)
$ npm i koa koa-static (koa-static 实现静态代码托管的包)
第四步,拷贝上小节打包的dist目录到hrServer/public下 建一个public文件夹 mkdir public
第五步,在根目录下创建app.js,代码如下
app.js 服务器根路径
1.引入相关依赖
a.引入服务端框架koa koa-static静态代码托管插件
b.引入专门处理history模式的中间件 koa2-connect-history-api-fallback
c.引入跨域代理中间件 proxy (koa2-proxy-middleware)
2.当app.listen监听成功后会去访问 node.js中间件注入的静态文件 访问当前路径下的public下的html文件(路由处理,专门处理history模式的中间件定义了变量historyApiFallback 将我们 接口请求的文件排除在外不注入到html文件当中去 而是通过跨域去发送请求 )
- 注设置跨域代理相关配置 使用Koa提供的跨域代理中间件 注册app.use 跨域代理中间件
a. '/prod-api/(.*)' 代表请求路径以prod-api开头的就将代理请求到 http://localhost:3000 b. target:代表代理到的目标地址 c. changeOrigin: true, // 是否跨域 d. 接口本身没有'/prod-api'需要通过pathRewrite来重写了地址,这里把'/prod-api'改成 ""
4.完成后我们在hrSever下执行 node.app 5.上线成功