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

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

服务器

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

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

  1. 我们在购买了服务器后,会默认给我们创建一个实例,实例有对应的账号(默认:Administrator)、密码,不记得密码可以进行重置修改。

Node+koa2搭建前端静态资源服务器部署网站上线_第1张图片

  • 开启端口

 Node+koa2搭建前端静态资源服务器部署网站上线_第2张图片

我这里开启了全部端口

 接下来打开Windows 远程桌面连接

Node+koa2搭建前端静态资源服务器部署网站上线_第3张图片

输入公网IP,点击连接然后输入服务器密码

 Node+koa2搭建前端静态资源服务器部署网站上线_第4张图片

 我们就能进入到服务器了

Node+koa2搭建前端静态资源服务器部署网站上线_第5张图片

接下来你需要去浏览器下载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

你可能感兴趣的:(服务器,前端,服务器,javascript,node.js)