美文网首页微信小程序开发AWS 微服务
用AWS S3搭建小程序资源服务器

用AWS S3搭建小程序资源服务器

作者: 厨小满 | 来源:发表于2020-02-19 02:30 被阅读0次

写在前面(2020.2),由于我已经有一个网站使用的是AWS S3的图片资源,所以想在小程序中使用同样的。但是遇到了各种困难,磨难和坑,本篇为大家介绍我的解决方案,适合想用小程序+S3的同学。

用到的几个东西:

AWS S3: 图片服务器
AWS CloudFront: CDN服务,可以让全球享受最快的访问速度
Web Host: 域名解析商
ACM: AWS中创建和管理SSL证书,验证你的网站,以允许https访问

遇到的坑

  1. 在AWS S3中,不用把你的bucket设成web hosting,否则会无法用https访问。(具体原因我也不大清楚,可能是由于S3本身不支持Https访问导致的)

  2. AWS CloudFront需要使用自定义的SSL证书,但是这个证书有2个条件,第一个要在us-east-1建立(这个很好理解)。

第二个要证书长度大于2048位,不然选择自定义证书那里会变灰,如果旧的不行重建一个就好了(我原来已经有个证书了,也在us-east-1里,不过就是不能选择,后来发现重新建一个就可以了)

  1. Cloudfront里面price class要选择有Asia的,不然亚洲地区https无法访问。

下面开始正文

1. 申请AWS S3

新建一个S3 Bucket, 命名必须是你的域名(比如我的是image.sfmeal.com),权限是open to public, 其他默认就可以。

如果你已有旧的其他名字的bucket,要重新建一个,把旧的拷贝过来了。

完成这一步,就可以访问你的图片了(路径是http://bucket-name.s3.amazon.com/yourimage)

2. 开通AWS Cloudfront

S3不支持https访问,但是小程序要求请求是https的,所以这里要用到Cloudfront。
前往CloudFront页面,新建Cloudfront,配置图如下:

image.png
  1. Price Class选择支持Asia的(否则国内IP访问不了哦)
  2. Alternate Domain Names就是需要绑定的域名,Cloudfront默认会分配一个域名给你,这里的值会替换掉那个域名(需要在域名解析商增加一个CName指向cloudfront分配的域名)

比如,默认分配给我的是 https://dassdsd11.cloudfront.com/yourimage, CNAMES我填的是image.sfmeal.com(如上图),配置成功后最终访问会变成https://image.sfmeal.com/yourimage

  1. SSL Certificate,要选择Custom SSL Cerficate,如果是灰色不可选则表示你没有us-east-1的证书或者你的证书不符合要求(长度不够),那么我们下一步来创建证书。先选"Default CloudFront Certificate",回头再修改。

其他默认,点击创建

现在我们测试一下路径(https://dassdsd11.cloudfront.com/yourimage)OK!

3. 创建证书

前往AWS的Certificate Manager服务的页面(ACM),打开后如下图:

image.png
  1. 点击Request a certificate创建证书(注意右上角的地区要选择N. Virginia us-east-1才行,因为这是Cloudfront服务的大本营)

  2. 选择验证方式,可以通过DNS(在你的Web Host那里增加一个指定的CName)或者邮箱认证(发邮件到你域名的管理员邮箱),哪种方便选择哪种都一样。

3.验证后很快状态一栏(Status)会变成Issued,就可以在Cloudfront把它那里修改为使用自定义SSL证书啦!

4. 更改Web Host配置

前往你的Web Host更改域名解析,把CloudFront分配你的域名添加进CNAME里面作为value,key就是你自己的图片域名(注意⚠️这个域名必须和S3的bucket名字还有CloudFront里的别名一致,Cloudfront的第二步)

修改完成后,静待解析完成。

现在我们测试一下路径(https://image.sfmeal.com/yourimage)一切OK,完成了!

相关文章

网友评论

    本文标题:用AWS S3搭建小程序资源服务器

    本文链接:https://www.haomeiwen.com/subject/lllofhtx.html