qq小程序部署|nginx+ginHTTPS流程图解

news/2024/6/29 10:45:28 标签: nginx, go, https, ssl, linux

与你相识

https://img-blog.csdnimg.cn/20210530085239348.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_4,color_FFFFFF,t_70,#pic_left" width="50%" />

博主介绍：

– 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间，所以会将摸索的内容全面细致记录下来。另外，我更多关于管理，生活的思考会在简书中发布，如果你想了解我对生活有哪些反思，探索，以及对管理或为人处世经验的总结，我也欢迎你来找我。

– 目前的学习专注于Go语言，辅学算法，前端领域。也会分享一些校内课程的学习，例如数据结构，计算机组成原理等等，如果你喜欢我的风格，请关注我，我们一起成长。

Introduction

在项目中用到了小程序的部署，小程序要部署中必经的一环是需要配置https，小程序都配置https了，那么与它进行联系的其它部分也要升级为https，现在把探索的过程记录下来。

因为我的项目api用的是gin框架（go语言），所以除了qq小程序要升级https，nginx和gin也要有对应的配置。

Table of Contents

  • qq小程序部署
    • 注册信息
    • 下载开发者工具
    • 打包项目
    • 上传项目
    • 生成体验版本
  • nginx配置HTTPS
    • 首先你需要下载证书
    • 把证书放到服务器中，配置nginx配置文件
  • gin配置HTTPS
    • 创建中间件
    • 注册中间件
    • 设置HTTPS启动
      • 优雅关机升级HTTPS

qq小程序部署

qq小程序的部署需要经过下面几个步骤：

  • 在qq小程序网站注册自己的信息
  • 下载qq小程序开发者工具
  • 对我们的uniapp项目打包
  • 添加项目
  • 上传项目
  • 生成体验版本

注册信息

首先你需要登录这个地址，然后注册一下自己的信息，这个是你配置qq小程序的主要地方。
https://q.qq.com/#/

然后另外需要认证自己的开发者资质以及获取AppID。
https://img-blog.csdnimg.cn/bfc82fbdcf804c6a971717d671a68741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

下载开发者工具

通过下面的网址可以下载qq小程序开发工具：
https://q.qq.com/wiki/tools/devtool/#%E8%AF%B4%E6%98%8E

进去大概是这个样子，这个项目目录不能直接添加我们的项目目录，它需要添加打包后的目录，接下来我们就需要打包我们的项目了。
https://img-blog.csdnimg.cn/c9f054c3849c4d8797166f27392a768a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

打包项目

我是用的Hbuilder来开发uniapp，而这个ide本身也具有打包功能，点击上面的发行，会看到小程序-QQ的菜单，点击之后输入我们的小程序名字和Appid即可打包。
https://img-blog.csdnimg.cn/d268fbe06a2e45bf84a59d195e0f0ecf.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />
https://img-blog.csdnimg.cn/c22b0d2ae2ed4d639210d8b5772fc157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />
此时在unpackage中的dist，build下就可以看到我们的mp-qq文件夹，这个就是我们要的文件夹。
同理，如果你打包微信的话，也会有mp-wx文件夹。
https://img-blog.csdnimg.cn/0f749d938bc04543965e702c0e22aa39.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

上传项目

然后我们打开刚才的qq小程序开发工具，把对应信息填上，把项目目录定位到mp-qq这个目录下，就会进入到这个界面。

此时你可以在这个页面对你的小程序进行调试，预览等操作，左上角也可以关闭此项目，如果都没问题了之后，就可以点击右上角的上传按钮，填写基本的信息。
https://img-blog.csdnimg.cn/49adbb664d7d4e2b91b5528e9743cb2c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

生成体验版本

此时你回到我们的qq小程序网页，在版本设置中可以看到刚才我们上传的版本，点击右边的小三角可以生成体验版本（二维码），此时项目组的成员就可以通过扫描这个二维码来查看小程序的内容了。
https://img-blog.csdnimg.cn/46be581658f24600ab18270dcfe76dac.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

nginxHTTPS_69">nginx配置HTTPS

配置HTTPS都需要有域名，一般也会有相应的说明：
比如下面的阿里云说明
https://help.aliyun.com/document_detail/98728.html?spm=5176.14113079.help.dexternal.227156a7TBgKGF

域名可以和ip地址进行绑定，这个绑定关系也是可以更改的。

如果需要Https的话，需要进行证书认证，在域名那里申请证书，然后需要在相应的服务器这里（nginx）配置证书，这样qq小程序的域名和nginx才能进行通信。

小程序必须使用HTTPS/WSS发起网络请求，请求时系统会对服务器域名使用的HTTPS整数进行校验，如果校验失败，则请求不能成功发起，

而且一旦开启ssl，则全站所有的资源，包括调用别人的api，都要加上https，否则就不符合https的安全逻辑，所以如果你要调接口的话，需要把接口也添加https支持。

首先你需要下载证书

大概长这个样子，有一个key，有一个pem

https://img-blog.csdnimg.cn/cad703fa624f4f4a9e9dc7e206745171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

nginx_86">把证书放到服务器中，配置nginx配置文件

upstream myserver {
    server 172.17.0.5:8000;
}

server {
    listen 80;
    listen       443 ssl;  # ssl默认使用443端口传输
    client_max_body_size 20m;
    server_name jifen.lzyjykj.com;  # 设置域名
    # 下面都是配置ssl了，也就是需要把这个加入到原来的内容中
    ssl_certificate cert/5979443_jifen.lzyjykj.com.pem;    #  设置证书
    ssl_certificate_key cert/5979443_jifen.lzyjykj.com.key;  #  设置证书
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
    
    location / {
        root   /var/www/html/smartfront/dist;
        try_files $uri $uri/ /index.html?s=$uri&args;
        index index.html index.htm index.php;
    }
    location /api {
        proxy_pass https://myserver; # 当访问https://myserver的时候会去访问172.17.0.5:8000（后端api地址）
        index index.html index.htm;
    }
}

gin配置HTTPS

创建中间件

首先项目路径如下，在middleware文件夹中创建ssl.go文件
https://img-blog.csdnimg.cn/8ed0a09e519a401c943e857ae68338d6.png" alt="在这里插入图片描述" />
复制下列代码

go">package middleware
import (
	"github.com/gin-gonic/gin"
	"github.com/unrolled/secure"
)

func TlsHandler() gin.HandlerFunc {
	return func(c *gin.Context) {
		secureMiddleware := secure.New(secure.Options{
			SSLRedirect: true,
			SSLHost:     "localhost:8000",
		})
		err := secureMiddleware.Process(c.Writer, c.Request)

		// If there was an error, do not continue.
		if err != nil {
			return
		}

		c.Next()
	}
}

注册中间件

然后回到注册中间件的地方，添加一下这个middleware
https://img-blog.csdnimg.cn/a1f18901fa874d88ae4742b9b214d66d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />

设置HTTPS启动

然后在路由的地方，设置一下端口和证书文件的地方。

这个地方需要注意的是，如果你不是用的优雅关机，用下面的方式来设置一下端口和证书的位置，就可以升级https了。
https://img-blog.csdnimg.cn/0db21d6ab3944aa0a435d27f21802f47.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTgyNDQz,size_16,color_FFFFFF,t_70" alt="" />
这个时候当你运行项目的时候，应该会发现下面的监听变成了HTTPS。
https://img-blog.csdnimg.cn/dda81e38fdca495eb352f93d303898a3.png" alt="" />

优雅关机升级HTTPS

如果你设置了优雅关机，设置的方式与上面稍稍有所不同。

原先我们使用http时，使用的是srv.ListenAndServe()来启动服务，现在需要用ListenAndServeTls来启动服务，后面两个为pem和key的路径（我是从配置文件中获取的），这样就升级https了。
https://img-blog.csdnimg.cn/c7f0f1e1f4c5415ea12834907900b1ae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAS2VlcENvZGluZ2dnZ2dnZw==,size_20,color_FFFFFF,t_70,g_se,x_16" alt="" />

欢迎评论区讨论，或指出问题。 如果觉得写的不错，欢迎点赞，转发，收藏。


http://www.niftyadmin.cn/n/1736541.html

相关文章

el-admin实战解析

el-admin实战解析

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
个人选择鼠标过程总结

个人选择鼠标过程总结

文章目录使用工具 & 参考资料与网站偶然踏入鼠标的选择选择鼠标的过程价格区间品牌厂商选择的鼠标G402G403G502炼狱蝰蛇V2炼狱蝰蛇V2 mini对各个鼠标的体会dpi配置一些购买的体会使用工具 & 参考资料与网站 知乎 （鼠标推荐，鼠标测评等关键词&am…
阅读更多...
Swagger学习笔记（基于Go-Gin）

Swagger学习笔记（基于Go-Gin）

文章目录Swagger学习（基于Go-Gin框架）狂神说Swagger小结李文周SwaggerSwagger介绍第一步： 添加注释第二步：生成接口文档数据第三步：引入gin-swagger渲染文档数据小结go中文文档中的Swaggo介绍使用全局配置各项参数的作…
阅读更多...
日志异常处理errors学习笔记

日志异常处理errors学习笔记

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
elasticsearch V1.0

elasticsearch V1.0

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
Go单元测试学习笔记 V1.0

Go单元测试学习笔记 V1.0

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
Xorm学习笔记

Xorm学习笔记

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
casbin学习笔记

casbin学习笔记

与你相识 博主介绍： – 本人是普通大学生一枚，每天钻研计算机技能，CSDN主要分享一些技术内容，因我常常去寻找资料，不经常能找到合适的，精品的，全面的内容，导致我花费了大量的时间&a…
阅读更多...
最新文章

Copyright @ 2022~2023