Node+koa2搭建前端静态资源服务器部署网站上线

当我们前端代码开发完毕，build打包完成后会生成一个dist文件夹，这个文件夹中的资源就是我们开发需要部署上线的前端静态web资源，此时我们就需要运行一个静态资源服务器，去让他能够正常运行、正常打开页面访问后端请求获取资源。

云服务器

在此之前我们需要拥有一个云服务器，因为我们在本地运行代码启动的web网站只能我们自己访或者是同一局域网下的人才可以访问，其他所有人都是无法访问到的，因为我们的服务地址是运行在我们自己的私有ip中。为了让所有用户都能看见我们的网站，我们就必须把他运行在公网ip上,所以此时我们就需要一台云服务器。阿里云、腾讯云、华为云很多云服务器厂商都有售卖，如果你是学生可以购买其学术套餐，一个轻量级的云服务器即可。

我这里使用的是【腾讯云服务器】

1. 我们在购买了服务器后，会默认给我们创建一个实例，实例有对应的账号（默认：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命令的开发者简单使用。

源码：https://github.com/ruo-love/web-server-tem