当我们前端代码开发完毕，build打包完成后会生成一个dist文件夹，这个文件夹中的资源就是我们开发需要部署上线的前端静态web资源，此时我们就需要运行一个静态资源服务器，去让他能够正常运行、正常打开页面访问后端请求获取资源。
云服务器
在此之前我们需要拥有一个云服务器，因为我们在本地运行代码启动的web网站只能我们自己访或者是同一局域网下的人才可以访问，其他所有人都是无法访问到的，因为我们的服务地址是运行在我们自己的私有ip中。为了让所有用户都能看见我们的网站，我们就必须把他运行在公网ip上,所以此时我们就需要一台云服务器。阿里云、腾讯云、华为云很多云服务器厂商都有售卖，如果你是学生可以购买其学术套餐，一个轻量级的云服务器即可。
我这里使用的是【腾讯云服务器】
- 我们在购买了服务器后，会默认给我们创建一个实例，实例有对应的账号（默认：Administrator）、密码，不记得密码可以进行重置修改。
- 开启端口
我这里开启了全部端口
接下来打开Windows 远程桌面连接
输入公网IP,点击连接然后输入服务器密码
我们就能进入到服务器了
接下来你需要去浏览器下载Node，下载完成后，就可以后续静态资源服务器部署了。
在服务器C盘新建一个文件夹
- 在该文件夹中打开powershell窗口 npm init -y
- 使用npm 安装如下依赖
-
"dependencies": { "koa": "^2.13.1", "koa-compress": "^5.1.0", "koa-static": "^5.0.0", "koa2-connect-history-api-fallback": "^0.1.3" }, "devDependencies": { "koa2-proxy-middleware": "^0.0.4" }
将我们本地电脑打包好的dist文件夹复制粘贴到hrServer文件夹中
创建app.js文件，开始写代码了！！！重点来了
接下来就跟着我一起使用node+koa2搭建起一个自己的服务器。
const Koa = require('koa')//koa框架
const serve = require('koa-static')//静态资源处理
const { historyApiFallback } = require('koa2-connect-history-api-fallback') //历史模式配置模块
const proxy = require('koa2-proxy-middleware') //代理模块
const app = new Koa()//new 一个服务器对象
/* gzip压缩配置 start */
const compress = require('koa-compress')
const options = {
threshold: 10 //数据超过1mb时压缩
}
app.use(compress(options))
/* gzip压缩配置 end */
// 历史模式配置
app.use(
historyApiFallback({
whiteList: ['/api']
})
)
// 代理,相当于我们使用Vue、React 中的Proxy 代理
app.use(
proxy({
targets: {
'/api/(.*)': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
})
)
// 静态资源配置
app.use(serve(__dirname + '/dist')) //__dirname表示当前文件的绝对路径，此处的dist 就是我们前端打包完成后的资源文件夹
app.listen(10005, () => {//配置我们需要监听的服务器端口
console.log('10005 start')
})
app.js完成后我们就可以返回powershell 窗口 输入 node app.js 运行服务器代码了，运行成功后，我们就可以在任何人的手机电脑上通过 【http://公网ip:端口】访问了
你可以将自己的服务器配置成模板保存到github，后续其他项目直接使用直接在服务器git clonex下来，改一下端口和dist资源即可。
服务器部署的方法针对不同系统、不同项目各有不同，此次讲解的只是一个适合于新手、不熟悉Linux命令的开发者简单使用。