背景
如果你作为一个独立的应用开发者,当你的应用发布在苹果或者谷歌的应用市场,你可以希望用一个应用的主页,可以用它来用户访问和下载,那么你可以考虑要租台服务器,然后搭建一个网站,但你的网站又不需要特别强大的工单,主要就是用来展示产品和下载的,那么您租一个服务器,在搭建一个网站,自己需要配置应用,部署应用,发布是一个很繁琐的事情。如果您按照这个方式搞,您的思维还是传统的软件思维,没有基本的云思想,更别提微服务了。下面我将逐步实现一个静态页面的网站。
前提条件准备:
1. 阿里云的账号
2. 持有一个域名
3. 静态的网站文件
有了这三样就可以搭建一个静态展示的网站了
上传静态文件到OSS
- 首先创建一个海外region的bucket, 注意存储桶的名字必须全局唯一,是所有阿里云的账号创建 bucket 名称全局唯一,应为OSS是支持HTTP访问的,访问的URL是包含 bucket 的名称的。
- 上传静态文件到bucket,我这里是直接页面上传,当然如果你的文件比较多,或者比较大的,建议通过oss的其他工具上传,分片上传最大可以传几个T,这里超出我们的讨论范围。不在讨论。注意我圈出来的红圈,是支持文件夹上传的,所以只要将文件整体拖拽到框内,那么文件夹的文件就都一起上传了,但是上传并不会保存文件路径,也就是说上传后,在bucket只有一级目录,其实OSS没有目录的概念,同一个bucket内的文件都是同级的。 这里我还是创建了不同的文件夹,应为我的静态文件在html调用的时候是相对路径,那么上传到对于的文件夹下后,对于html文件的修改是比较方便的,应为很多静态文件的调用时写在了CSS文件里,如果你调用bootstrap等框架的时候,会导致显示出现问题。
创建和本地一样的文件夹后,上传对应的文件,我这里是这样的
修改html文件
如果你现在打开html的文件,你会发现只能显示文件,渲染效果完全没有了,那么你需要在本地进行html的修改,将引用的静态文件的路径修改OSS的对应地址,
将静态的js,css,和图片都换成 oss 的地址文件
点击文件名,从这里获得oss的http地址,
调试和修改html文件需要耗费大笔的时间,如果你的页面的静态文件大多是通过相对路径,可能会省去很多时间。调试完成后你本地就可以看到完整的页面展示了。然后在上传文件到bucket覆盖之前的旧的index文件,你不需要重命名,OSS是通过文件名去判断是否为同一个文件,不做文件一致性验证。
开启OSS的静态网站功能
你这里可以设置默认首页和404页面
绑定域名
现在你只可以通过OSS提供的地址进行访问,你准不能期望客户可以记住这么长的一段 URL吧,http://api******tion.oss-ap-southeast-1.aliyuncs.com/index.html, 并且客户发现您的URL是阿里云的,可能会比较奇怪了。那么你就需要绑定自己的域名了。OSS控制台可以快速绑定域名,当然你也可以前往DNS控制台绑定域名。
我这里开启了CDN,一会在后面会讲,你直接在这里绑定域名可能会遇到报错,说需要备案,因为默认的CDN加速区域包含了中国大陆地区,所以需要备案。
如果你的域名不是在阿里云,那么你可以选择自行前往DNS页面添加解析记录,添加CNAME记录,其中记录值oss的公网地址,你可以通过概览你看到。现在您就可以通过域名访问了。
你可能注意到我是通过非 www的域名访问的网站,是由于我添加了@的CNAME解析记录,而我又不能用同一个值添加两个CNAME,那么我需要创建另一个空的bucket,作为跳转,那么我在访问www.abc.com 会直接跳转到 abc.com/index.html 页面。
- 首先创建一个私有的bucket,并且开启静态网站,设置默认注意index.html,设置镜像回源
现在你就可以通过www.abc.com 或者 abc.com 访问你的网站了,但是你很快就发现你的网站只有在bucket 创建国家访问 速度比较快,在其他的国家速度很慢,而且还在浪费你的流量。那么你可能想着如果有CDN可以加速一下就好了。
添加CDN加速
前往阿里云CDN控制台,添加加速域名,类型图片,源站选择OSS域名,加速区域选择海外,
海外区域不需要备案,域名审核也快。
开启私有bucket回源,这样你的静态网站就只能通过CDN访问了
添加成功后,CDN回给一个CNAME地址,需要前往DNS添加解析记录,
总结
现在您的网站就已经完成了基本的搭建,可以正常访问,你的网站已经通过CDN加速,全球各地的用户就可以访问你的应用主页了,整个网站的搭建过程不超过半天,极大减少了时间的浪费,同时你的网站运行在阿里云的共有云产品上,享受极高的SLA保证,远比自己搭建一个网站好维护,并且你的网站不需要随着访问量增加而去升级,这一切阿里云CDN和OSS已经弹性提升了。几乎获得一个不会down机的网站,除非你欠费了。
下一篇文档将会介绍如何通过函数计算实现微服务的动态展示静态网站
动态展示的OSS网站 - 函数计算 https://blog.csdn.net/afxcontrolbars/article/details/81284720
参考文档:https://www.alibabacloud.com/help/zh/doc-detail/67323.htm