H5小程序+GO服务部署并上线飞书

素履coder

发布于 2022-09-29 18:48:18

1.3K00

代码可运行

文章被收录于专栏：素履coder素履coder

运行总次数：0

代码可运行

1. 背景#

目前所拥有的的条件

一个已经开发好的uniapp小程序，H5类型的，里面的各种接口已经调通并且测试完成
一个已经开发好的go后端服务，采用beego框架，里面的各种接口已经调通并且测试完成
nginx在A服务器，运行程序需要放在B服务器，两台服务器在同一区域，可通过内网访问
一个飞书账号

想要达成的效果

用户在飞书的工作台点击上线的小程序后，可以进入程序内，并且读取到go后台的数据，实现交互

2. 实施步骤#

2.1 前端页面处理#

前端页面需要通过打包的方式生成静态文件

最终会得到一个打包文件

打包的时候注意要改变H5的路由模式为hash模式，不然无法在正式环境直接通过路由访问，只能从主界面进入。

hash 就是指 url 后面的 # 号以及后面的字符，还有一种路由模式叫history，history模式没有带#。hash模式在每次刷新页面时是直接更改 # 后的东西，history每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404，history的好处是可以进行历史记录修改，并且不会立刻向后端发起请求，history模式URL要和后端一致，所以要改为history也需要后端的配合，否则会报错。

2.2 服务部署#

把上面得到的静态文件和后台程序对接起来，因为本次部署没有采用前后端分离的方式，所以前端页面和后端程序是放在一起的，也即在同一台服务器B。beego里面读取静态页面的函数如下图：

然后现在需要把程序放到服务器上，并通过supervisor来控制程序的启动和关闭，可以参考我之前写的这一篇文章： Title supervisor+go+beanstalkd 环境配置和部署，当输入supervisor status看到相关程序正常运行则说明部署成功，记得程序里面要开一个端口供其他服务器的nginx访问，假设开的端口为8888

程序部署成功后则需要开始配置nginx的域名跳转，使得访问该域名能把请求发送到B服务器的程序上，其中信息都是假设的，并非真实信息，基本架构图如下图：

下面是nginx配置过程中一些需要注意的关键点，使用内网地址的原因是为了访问速度更快，通过端口的方式映射访问刚才部署的程序

server{
    listen	80;
    server_name # 这里填写域名
    rewrite ^(.*) https://$server_name$1 permanent;
    location / {
        proxy_pass  http://172.22.22.112:8888; # 填写服务器B的内网地址，并通过8888端口映射到部署的程序
        proxy_set_header Host            $host;
        proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REFERER $http_referer; 
    }
}
 
server {
    listen	443 ssl;
    server_name  # 这里填写域名
    ssl on;

    # ......

    location / {
        proxy_pass  http://172.22.22.112:8888;	# 填写服务器B的内网地址，并通过8888端口映射到部署的程序
        proxy_set_header Host            $host;
        proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REFERER $http_referer;
    }
}