静态页面可以借助 github,或者 gitee 的静态文件托管功能进行部署。区别于这些,以下步骤的目的是:

  • 将服务端的代码部署至公网
  • 并且搭建起来一个线上可以访问的页面,环境是真实的线上环境
  • 框架是 Express

市场很多虚拟服务器,相对于真实服务器,可以显著节省硬件成本。这里用新浪 SAE 作为虚拟服务器

SAE 注册

使用微博账号注册即可,注册成功可以赠送200云豆,这些云豆拿来做这次模拟

注册完成之后,登录,到首页最下方选择“云应用 SAE”

ruoyi 云服务器部署_ruoyi 云服务器部署

控制台

这次测试不涉及数据库等,但是会有服务端的简单接口和从服务端拉去静态页面的简单操作

点击“云应用 SAE””进入如下页面

ruoyi 云服务器部署_服务端_02


点击进入控制台,可以进行添加/创建应用的操作

创建应用

控制台页面有个比较显著的“创建应用”的按钮,点击可以创建新的应用

ruoyi 云服务器部署_Express_03

创建应用的环境选择 nodejs,然后选择创建。就可以创建一个应用

ruoyi 云服务器部署_Express_04

代码部署

创建项目应用之后,点击进入对应的应用,选择“代码管理”,将来自己的代码都是从这里开始进行自动化部署的(在每次 push 之后,SAE会进行一个自动化部署)

ruoyi 云服务器部署_ruoyi 云服务器部署_05


然后在打开的页签翻到最后,将仓库克隆至本地,迁移项目代码至这个仓库,提交之后,交给 SAR 自动化部署即可

ruoyi 云服务器部署_服务器_06


在部署之前需要注意

  • 配置 package.json 的 start 脚本,保证本地开发可以正常运行
  • 根目录下必须包含package.json文件,HTTP的端口需要监听在5050

线上访问

部署完毕之后,需要验证一下成果

点击左侧导航栏:应用设置->应用信息,并拉到页面的最后

ruoyi 云服务器部署_服务端_07

这两个链接点进去,将会有类似于开发环境的效果(这里是页面的展示)

ruoyi 云服务器部署_Express_08


Express代码:

ruoyi 云服务器部署_Express_09

这里是接口的返回

ruoyi 云服务器部署_ruoyi 云服务器部署_10


Express 代码:

ruoyi 云服务器部署_服务器_11