博客搭建-网站部署至OSS
# 一、概述
网站自从2.1号上线以来,平日除了写博客,完善网站功能外,也一直在研究怎么更方便以及节省资源的把网站跑起来(打工人,能省则省:happy:),期间是跑在服务器上,但是服务器相对来说每年的费用也不便宜,主要只是简单跑一个网站感觉也是浪费,也想过直接部署在github或者gitee,考虑到稳定性,想到公司有部分前端项目是直接部署在阿里的OSS上面的,就开始折腾把该博客也部署在OSS上面,下面是整个过程。
# 二、账号资源准备
这里没啥难度,使用过阿里云的都知道,不在细说。
- 创建阿里云账号
- 创建OSS桶
# 三、博客打包
使用OSS部署博客,跟Nginx一样也需要先把博客打包成静态文件。
// 直接在根目录下执行打包命令
npm install --registry=https://registry.npm.taobao.org -unsafe-perm=true
npm run build
2
3
然后静态文件会在docs/.vuepress/
目录下生产dist
目录。
[root@iZ8vbh8yje0btc412m2ebcZ wiki]# ls -l docs/.vuepress/dist/
total 112
-rw-r--r-- 1 root root 4687 Mar 13 18:17 404.html
drwxr-xr-x 2 root root 4096 Mar 13 18:17 about
drwxr-xr-x 2 root root 4096 Mar 13 18:17 archives
drwxr-xr-x 5 root root 4096 Mar 13 18:17 assets
drwxr-xr-x 2 root root 4096 Mar 13 18:17 categories
-rw-r--r-- 1 root root 14 Mar 13 18:17 CNAME
drwxr-xr-x 2 root root 4096 Mar 13 18:17 devops
-rw-r--r-- 1 root root 5106 Mar 13 18:17 feed.atom
-rw-r--r-- 1 root root 5909 Mar 13 18:17 feed.json
drwxr-xr-x 2 root root 4096 Mar 13 18:17 friends
drwxr-xr-x 2 root root 4096 Mar 13 18:17 img
-rw-r--r-- 1 root root 25377 Mar 13 18:17 index.html
drwxr-xr-x 2 root root 4096 Mar 13 18:17 more
drwxr-xr-x 2 root root 4096 Mar 13 18:17 ops
drwxr-xr-x 21 root root 4096 Mar 13 18:17 pages
-rw-r--r-- 1 root root 7288 Mar 13 18:17 rss.xml
drwxr-xr-x 2 root root 4096 Mar 13 18:17 tags
drwxr-xr-x 2 root root 4096 Mar 13 18:17 technology
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 四、博客上传及配置
# 4.1 文件上传
上面打包后,直接把dist
目录下的文件上传到提前创建好的OSS桶即可
。
# 4.2 OSS Bucket配置
想要把OSS当做web服务跑静态网站,这里还需要几点简单的配置,更具体的请参考官方静态网站托管 (opens new window)。
- 配置默认首页
数据管理 --> 静态页面 --> 配置静态首页为
index.html
- 绑定域名
这里需要自定义域名,按照提示进行解析验证即可,记住后面把域名CNAME到OSS对应的别名即可
- 配置OSS访问策略
把策略修改为公共读
# 4.3 访问
等待域名解析生效后,直接浏览器访问,就可以看到博客正常渲染,如果想要对域名配置https,直接在oss控制台域名绑定那里上传https证书即可。
# 五、进阶配置
注意
通过上面其实就可以实现网站正常访问,接下来我会讲一下使用jenkins自动发布网站至OSS,及配置CDN提速,如果你没有这些环境,完全可以忽略以下的内容。
# 5.1 自动发布
自动发布,是通过Jenkins打包后,实现发布OSS,另外配置代码提交自动触发Jenkins构建。
# 5.1.1 Jenkins插件安装
Jenkins插件中心,找到Aliyun OSS Uploader (opens new window),Gitee Plugin (opens new window),两个插件安装重启Jenkins。
# 5.1.2 集成OSS
这里在集成OSS之前,需要咱们先在阿里云创建一个RAM子账号,拿到AccessKey、然后授权该RAM有访问OSS的权限,具体可参考创建AccessKey (opens new window)。
- RAM授权示例
- Jenkins配置OSS
在job配置页面,增加构建后步骤,可以看到阿里云OSS上传功能
注意
按照OSS上创建的桶对应的配置信息,填写即可。需要注意的是阿里的ak sk权限问题,正常来说访问哪个Bucket需要自定义访问策略,我这边是因为只有一个桶,所以授权全部管理权限。
# 5.1.3 webhook自动发布
- Jenkins配置
- gitee配置
- gitee上返回webhook配置页面 测试
- 查看是否触发自动构建
总结
以上就是gitee+jenkins+oss自动发布的配置,当然这里并没有列出更多Jenkins其他相关的细节,不过涉及到的配置,其实就这么多,如果你没有借助Jenkins的话,只是本地这里建议参考使用阿里的OSS客户端工具 (opens new window)。
# 5.2 接入CDN
接入CDN这里只是说明使用阿里的CDN,如果是其他云厂商的建议自行查询接入方式。
# 5.2.1 配置CDN
OSS域名管理列表,如果没有接入CDN则会显示未配置,直接点击即可跳转至CDN配置页面,如果OSS与CDN不是同一个账号,则需要直接去CDN控制台,新建域名。
- 跳转CDN页面配置
- 域名解析配置
上面点击下一步后,跳转到基础默认配置,直接跳过返回下一步进行域名解析配置。
- 根据给定的CNAME别名,在域名控制台进行域名CNAME解析
# 5.2.2 生效访问
等待域名解析生效,这里可以在本地通过ping域名查看域名解析是否生效。
域名解析生效,测试是否可以访问。
# 5.3 优化配置
# 5.3.1 CDN优化
- 开启压缩
- 开启私有回源
这里是对应后面OSS关闭公共读权限使用
- CDN配置url重写
否则的话,访问回出现403报错,可以参考阿里的说明 (opens new window)。
# 5.3.2 OSS
- 关闭公共读
CDN开启私有回源,这里就不需要公共读了,也是为了节省这里流量。
# 5.4 总结
以上就是进阶优化博客,这里我并没有对网站证书配置进行细说,因为证书从申请到配置,在控制台都可以直接点击操作,如果接入了CDN,则证书在CDN控制台域名管理即可找到证书配置位置。
# 六、OSS&CDN费用
这里简单看了下OSS及CDN费用信息,相对来说,还是很便宜的,在接受范围之内。
# 6.1 OSS
因为我关闭了OSS公共读,因此这里就没有外网访问,只是着重看存储及请求计费即可,计费参考 (opens new window)。
- 存储
如果按量0.12元/GB/月
40G存储包一年的费用,大多都是静态文件完全够用了
- 回源流量
按量0.15元/GB
- 请求费用
0.01元/万次
# 6.2 CDN
# 6.3 计费案例
# 6.4 总结
相对直接使用ECS服务器部署来说,OSS或者OSS+CDN费用还是比较少的,这样也无需关注机器的配置,具体的费用主要就是根据博客请求量来计算,这个后面再根据实际请求进行评估。