vercel打造免费小程序

1,053 阅读3分钟

准备工具:

  1. vercel 账号1个
  2. 微信接入 mp.weixin.qq.com/cgi-bin/wx?…
  3. vps虚拟机 www.vultr.com/?ref=895588… (注册可送100刀)
  4. 已备案域名1个

操作步骤:

VPS 安装docker后创建docker-compose.yml文件 建立 hexo blog

mkdir -p /root/blog/vksec
cat >docker-compose.yml <<EOG
version: '3.3'
services:
  hexo:
    #image: superpaintman/hexo
    image: spurin/hexo
    container_name: vksec
    restart: always
    ports:
      - "8029:80"
      - "8030:22"
    volumes:
      - ./data:/blog
    environment:
      hexo_SERVER_PORT: 8000 # 缺省的端口号
      NODE_ENV: production
EOG

进入容器 patch

docker exec -it vksec /bin/bash

升级操作系统安装必要组件

apt-get -y  update && apt-get -y upgrade
apt-get -y install git net-tools openssh-server vim
apt-get install language-pack-zh-hans

提示: 
 1. Africa  2. America  3. Antarctica  4. Australia  5. Arctic  6. Asia  7. Atlantic  8. Europe  9. Indian  10. Pacific  11. SystemV  12. US  13. Etc
选择: 6
Please select the city or region corresponding to your time zone.
再选: 70 shanghi

更改/etc/ssh/sshd_config 配置
vim /etc/ssh/sshd_config 

::去掉以下两项的注释
PermitRootLogin yes 
PasswordAuthentication yes 

#允许root认证登录
sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/g'  /etc/ssh/sshd_config 
#允许密码认证
sed -i 's/#PasswordAuthentication yes/PasswordAuthentication yes/g'  /etc/ssh/sshd_config

# vim 模式修复
sed -i 's/mouse=a/mouse-=a/g' /usr/share/vim/vim81/defaults.vim

# 重启服务
/etc/init.d/ssh restart
passwd root


cat > ~/startup_run.sh << EOF
#!/bin/bash

LOGTIME=$(date "+%Y-%m-%d %H:%M:%S")
echo "[$LOGTIME] startup run..." >> ~/startup_run.log
service ssh start >>/root/startup_run.log
EOF
chmod +x ~/startup_run.sh

vim /root/.bashrc 末尾增加如下语句
# startup run
if [ -f /root/startup_run.sh ]; then
    . /root/startup_run.sh
fi

现在可以直接使用 Bitvise SSH Client 连接这个docker了

vercel安装

挂代理升级

export ALL_PROXY=socks5://192.168.2.114:7892

vercel配置

apt -y install nodejs npm sudo
npm install -g hexo-cli
npm install hexo-generator-restful
nvm install 17.0.0
npm install -g vercel
npm install -g npm@8.13.2
cd /blog
git clone https://github.com/theme-next/hexo-theme-next themes/next

预览

cd /blog && hexo server -p 80

浏览器打开

如: http://192.168.2.48:8025 (内网IP和docker映射的端口)

上传生成

按提示使用邮箱验证一下就能直接上传了

cd /blog && hexo cl && hexo g && cd public && vercel --prod --confirm && cd ..

绑定域名

上传完成后可以到 vercel后台绑定域名

配置hexo-generator-restful

github.com/yscoder/hex…

打开_config.yaml 文件,粘贴以下代码,当然配置信息具体描述可以在Github上查看获取。 注意配置信息的代码缩进

# 对外API
restful:
  # site 可配置为数组选择性生成某些属性
  # site: ['title', 'subtitle', 'description', 'author', 'since', email', 'favicon', 'avatar']
  site: true        # hexo.config mix theme.config
  posts_size: 10    # 文章列表分页,0 表示不分页
  posts_props:      # 文章列表项的需要生成的属性
    title: true
    slug: true
    date: true
    updated: true
    comments: true
    path: true
    excerpt: false
    cover: true      # 封面图,取文章第一张图片
    content: true
    keywords: true
    categories: true
    tags: true
  categories: true         # 分类数据
  use_category_slug: true # Use slug for filename of category data
  tags: true               # 标签数据
  use_tag_slug: true      # Use slug for filename of tag data
  post: true               # 文章数据
  pages: true

配置好以后,push 代码,vercel 自动部署后即可访问。 访问地址是你的域名+/api/ 你也可以直接访问域名+/api,查看完整的数据类目。

微信上程序开发

  1. 下载开发工具 下载地址: developers.weixin.qq.com/miniprogram…

新建小程序项目

  • 项目名称:填写你的项目名称
  • 目录:选择项目所在目录
  • AppID:就是在微信小程序后台中的那个 AppId
  • 开发模式:小程序
  • 后端服务:小程序云开发表示可以使用云函数以及云开发环境,是微信提供的,通过微信云 SDK 进行调用;不使用云服务则是简单的微信小程序项目。因为我已经开通了云开发功能因此这里我也选择了云开发。
  1. 导入小程序 github.com/fuzui/GBlog… 下载源码并导入到小程序中

效果:

image.png

总结

    到这里其实也就基本完了,后续中在hexo博客中写了博客以后,vercel自动部署接口也会自动更新,小程序打开的时候也会获取到最新的数据。

    整个过程其实也没有什么难度,利用的也都是第三方的插件,至于微信小程序的开发有什么坑我暂时还没有遇到,因为还没有深入去做,后续实践的过程中有遇到再写吧。