使用koa框架部署项目

我大前端是什么都需要会的,不然怎么卷

小Tip:部署一般分为自动化部署(执行脚本)和手动部署

部署步骤

第一步,简历web服务文件夹server

$ mkdir server //建立server文件夹

第二步,在文件夹下初始化npm

$ npm init -y

第三步,安装服务端框架koa(也可以使用express和egg)

$ npm i koa koa-static

第四步,拷贝打包好的dist目录下文件到server/public下

第五步,在根目录下创建app.js,代码如下

const Koa = require('koa') //引入Koa包
const serve = require('koa-static') ;

const app = new Koa(); //实例化一个koa
app.use(serve(__dirname'/public')); //将public下的代码静态化
app.listen(8080,()=>{
console.log('马儿跑起来了')
})

问题来了

刷新页面丢失,404

我们上线一般使用的history模式,地址变化会引起服务器的刷新,然后就找不到我们的index.html文件了...

安装koa中间件

$ npm i koa2-connect-history-api-fallback //专门处理history模式的中间件

注册中间件

const Koa = require('koa') //引入Koa包
const serve = require('koa-static') ;

const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa();
app.use(historyApiFallback({
whiteList: ['/prod-api'] //prod-api代理跨域问题
})) // 使用historyApiFallback中间件必须在上面,先处理访问的中间件
app.use(serve(__dirname'/public')); //将public下的代码静态化
app.listen(8080,()=>{
console.log('马儿跑起来了')
})

解决生产环境跨域问题(请求报错,404)

在nodejs中代理,安装跨域代理中间件

$ npm i koa2-proxy-middleware

配置跨域代理中间件

const Koa = require('koa') //引入Koa包
const serve = require('koa-static') ;
const proxy = require('koa2-proxy-middleware')
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa();

app.use(historyApiFallback({
whiteList: ['/prod-api'] //prod-api代理跨域问题
})) // 使用historyApiFallback中间件必须在上面,先处理访问的中间件
app.use({
targets:{
'/prod-api/(.*)':{ //prod-api生产环境下的前缀
target:'http//域名/api',//后端服务器地址,api可根据具体有无设置
changOrigin:true,
pathRewrite:{
'/prod-api':'' //路径重写
}
}
}
})
app.use(serve(__dirname'/public')); //将public下的代码静态化

app.listen(8080,()=>{
console.log('马儿跑起来了')
})

大概就是这样了,学习记录一下,不求自己能够配置,但求那天看到了我能看懂这是做啥.