微信小程序使用微信云托管添加自定义域名并转发到pexels.com

pexels,com · 浏览次数 : 0

小编点评

**步骤 1:创建微信云托管服务** 1. 登录微信云托管控制台:https://cloud.weixin.qq.com/cloudrun/console 2. 点击新建服务 3. 输入服务名称 4. 点击确定 **步骤 2:配置 Expressjs 服务** 1. 创建一个新的文件 `index.js` 并粘贴以下代码: ```javascript const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); try { // 创建一个代理中间件,将以 /photos 开头的请求代理到目标地址 const photosProxy = createProxyMiddleware({ target: "http://images.pexels.com/photos", changeOrigin: true, pathRewrite: { "^/photos": "", }, }); // 使用代理中间件来处理以 /photos 开头的请求 app.use('/photos', photosProxy); const photosApiProxy = createProxyMiddleware({ target: "https://api.pexels.com", changeOrigin: true, pathRewrite: { "^/pexels-api": "", } }); // 当请求pexels-api时也转发 app.use('/pexels-api', photosApiProxy); // 根目录路由处理函数,输出当前时间 app.get('/', (req, res) => { const currentTime = new Date().toLocaleString(); res.send(`Current time is: ${currentTime}`); }); app.listen(80, () => { console.log("启动成功"); }); } catch (error) { console.error("Failed to start application:", error); process.exit(1); } ``` **步骤 3:配置 SSL 证书** 1. 创建一个名为 `ssl.crt` 的文件,并将您的 SSL 证书内容复制进去。 2. 创建一个名为 `ssl.key` 的文件,并将您的 SSL 私钥内容复制进去。 3. 在 `index.js` 中添加以下代码: ```javascript const fs = require('fs'); const sslCertificate = fs.readFileSync('ssl.crt', 'utf-8'); const sslPrivateKey = fs.readFileSync('ssl.key', 'utf-8'); app.use('/photos', createProxyMiddleware({ target: "http://images.pexels.com/photos", changeOrigin: true, proxyPass: { target: "ssl://localhost:3000", changeOrigin: false, ssl: true, }, })); app.listen(80, () => { console.log("启动成功"); }); ``` **步骤 4:部署服务** 1. 在微信云托管控制台的“服务”页面中,选择您创建的 Expressjs 服务。 2. 点击“部署”。 3. 选择“上传文件”并上传 `index.js` 和 `ssl.crt` 文件。 4. 点击“部署”。 **注意:** * `ssl.crt` 和 `ssl.key` 文件的路径可以根据实际情况进行调整。 * 您需要在服务器上运行 Expressjs 服务,并将其代理到 `images.pexels.com` 上。 * 确保您的服务器运行在安全的环境中。

正文

背景:我要在小程序上显示pexels.com上的图片,然后我得先把pexels.com的域名添加到小程序的request合法域名中,但是pexels.com是国外的,在国内没有备案所以添加不了。解决方案就是:用一个已经备案好的域名进行转发,转发的服务器我选择的是微信云托管,备案好的域名还需要ssl,没有的话本文会讲到如何申请一个免费的ssl证书。

因为pexels.com开放了API可以拿到图片,所以得先请求https://api.pexels.com拿到图片列表,图片的域名是images.pexels.com,两个域名都不能通过小程序后台的校验:

 

所以得需要有一个已备案的域名来进行转发,这样就能绕过限制了。

需要准备的物料:

1、一个在国内已经备案好的域名

2、github账号

大致流程如下:

开通微信云托管服务

基于微信云托管模板部署部署一个expressjs服务

修改服务的路由转发

1、先开通微信云托管:
进入控制台:
https://cloud.weixin.qq.com/cloudrun/console

点击新建服务,输入服务名称点击确定:

 

大家可以先fork一下我的代码仓库:
https://github.com/2424004764/pexels-proxy-expressjs,我把转发的代码都写好了

之后在选择方式的时候选择绑定github仓库:

 

如果不方便使用github仓库,也可以将仓库代码包下载下来以手动上传代码包的形式部署:

 

如果是github的话,提交代码以后会重新自动部署,会方便很多,而手动上传代码包的话还得重新上传再手动点击部署,比较麻烦一点。

选择好后点击发布按钮就开始部署了:

 

等待部署完成,一般这个步骤几分钟左右,部署好是这样的:

 

我们可以点击云端调试测试下服务是否可用:

 

如果输出了当前时间,则表明服务是好的。

expressjs服务的index.js代码如下:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

try {
  // 创建一个代理中间件,将以 /photos 开头的请求代理到目标地址
  const photosProxy = createProxyMiddleware({
    target: "http://images.pexels.com/photos",
    changeOrigin: true, // 设置更改请求头中的 Origin
    pathRewrite: {
      // 将 /photos 开头的请求重写为目标地址的不同路径,保留 /photos
      '^/photos': '' // 保留 /photos 部分,只替换后面的部分
    },
  });

  // 使用代理中间件来处理以 /photos 开头的请求
  app.use('/photos', photosProxy);

  const photosApiProxy = createProxyMiddleware({
    target: "https://api.pexels.com",
    changeOrigin: true,
    pathRewrite: {
      '^/pexels-api': ''
    }
  });

  // 当请求pexels-api时也转发
  app.use('/pexels-api', photosApiProxy);

  // 根目录路由处理函数,输出当前时间
  app.get('/', (req, res) => {
    const currentTime = new Date().toLocaleString();  // 获取当前时间
    res.send(`Current time is: ${currentTime}`);       // 返回当前时间到客户端
  });

  app.listen(80, () => {
    console.log("启动成功");
  });
} catch (error) {
  console.error('Failed to start application:', error);
  process.exit(1); // 退出应用并返回非零状态码
}

  

这样在一个域名下完成了两个域名的转发,只要通过后缀区分即可,我们先设置好自定义域名再说这么访问。

我们来到自定义域名页面,点击绑定域名:

 

假设aaaa.com是你已经备案好的域名,pexels-proxy是二级域名,如果你的域名有https证书的话,可以先把https证书上传,如果没有我在本文会讲到如果10分钟申请一个免费https证书。

申请免费证书,我们打开并注册一个账号:
https://www.sslchaoshi.com/

我们选择体验版证书:

 

选择第一个,点击查看详情:

 

点击购买:

 

选择余额支付:

 

因为我这里已经购买过了,所以不能再购买了:

 

购买后来到个人中心,这里应该就能看到订单了:

 

我记得好像是有验证的,有一个选项是选择dns,然后需要验证域名的cname记录,按操作完成后等几分钟就能下证了:

 

我们点击证书打包下载,打开解压后的目录的ALL目录:

 

我们再回到微信云托管的自定义域名页面:

 

依次上传证书和私钥,然后点击确定,之后就会得到一个cname的记录值:

 

可在这里检车ssl证书状态(微信官方推荐):

https://myssl.com/ssl.html

 

再去域名注册商处解析一个cname记录即可

 

访问方式:

1、如果是请求api:则最终请求url为
https://pexels-proxy.aaaa.com/pexels-api/v1/curated。这样就能绕过pexels.com未备案的限制了

2、如果是请求的图片:

我们请求api的时候返回的列表格式为:

 

我们只需要将图片的域名改成我们的子域名即可:

let list = []

res.photos.forEach((item, index) => {

    list.push({

        title: item.alt,

        image: item.src.medium.replace("images.pexels.com", "pexels-proxy.aaaa.com"),

    })

})

  

这里返回的src.original是原图,medium是小图,作为列表只用,如果点击,则显示原图,这样图片就不会失真了。

效果:

 

这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。

想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。

感谢你的阅读与支持,期待在未来的文章中与你再次相遇!

与微信小程序使用微信云托管添加自定义域名并转发到pexels.com相似的内容:

微信小程序使用微信云托管添加自定义域名并转发到pexels.com

背景:我要在小程序上显示pexels.com上的图片,然后我得先把pexels.com的域名添加到小程序的request合法域名中,但是pexels.com是国外的,在国内没有备案所以添加不了。解决方案就是:用一个已经备案好的域名进行转发,转发的服务器我选择的是微信云托管,备案好的域名还需要ssl,

使用taro+canvas实现微信小程序的图片分享功能

业务场景 二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。 使用场景及功能:微信小程序 生成海报图片 分享好友 下载图片 使用技术:Taro vue vant

小程序中使用 lottie 动画 | 踩坑经验分享

最近被拉去支援紧急需求(赶在五一节假日前上线的,双休需要加班),参与到项目中才知道,开发的项目是微信小程序技术栈的。由于是临时支援,笔者也很久没开发过微信小程序了,所以挑选了相对独立,业务属性相对轻薄的模块参与。 其中有个营销活动(领红包)的弹窗动画就要用到 lottie 动画。 本文就

微信小程序:接手项目,修bug

好家伙, 问题描述如下: 小程序主界面,选择快速上传会议记录 选择快速 其中,没有2022-2023第二学期,所以,新的会议记录无法上传 于是,我自愿修复这个bug 由于我们没有产品文档 我只能由已知,推未知 亲爱的学长告诉我,这是一个使用了uni-app开发的微信小程序 开搞, 1.首先我们把两个

uniapp微信小程序转支付宝小程序踩坑(持续更新)

首先第一个,真有被折磨到! // 微信正常使用,支付宝不行 // 以下两种 微信、支付宝都正常使用

当你使用Taro时,你需要了解的一些事儿

2017 年 1 月 9 日凌晨,万众期待的微信小程序正式上线,前有跳一跳等爆圈小游戏的带动,后有特殊时期下各类健康码小程序的加持,小程序成为了国内技术圈独树一帜的存在。但随着小程序的迅猛发展,其实在小程序发展的过程中,关于小程序的架构就层出不穷,小程序架构的后面也会绑定一个专属 DSL,如类 React 或者类 Vue。

万物皆可集成系列:低代码对接微信小程序

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 近年来,微信小程序的开发如火如荼,很多移动端应用为了更方便被大家所使用的,都步入了小程序的行列 那么对于低代码平台开发的移动端应用是否可以和小程序集成呢?这里我以微信小

微信小程序预约视频号直播

一、概述 微信小程序提供了可以唤起预约视频号直播弹窗的接口 reserveChannelsLive,该接口接收一个参数 noticeId,通过 getChannelsLiveNoticeInfo 接口获取。因此,过程如下: 查看视频号 id finderUserName --> 调用 getChan

微信小程序生态13-微信公众号自定义菜单配置

序 微信公众号分为订阅号和服务号两种,虽然二者很大的不同,但是这两种公众号的底部却是差不多的:都有菜单栏,而且这些底部菜单也都是自定义配置的。 如CSDN的官方公众号的底部就有精彩栏目、新程序员、CSDN等菜单可供使用: 那这些菜单是如何生成的呢?微信以配置方式的不同把它分为了两类:自定义菜单、个性

微信小程序生态15- 批量提交微信小程序审核的一种方式

大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。 以下是『微信小程序生态系列文章』正文! # 需求背景 我们是一个提供SaaS服务的小程序服务商,会给每一个客户申请一个专属的小程序,到目前为止已经差不