一、概述

网站自从2.1号上线以来，平日除了写博客，完善网站功能外，也一直在研究怎么更方便以及节省资源的把网站跑起来(打工人,能省则省:happy:),期间是跑在服务器上，但是服务器相对来说每年的费用也不便宜，主要只是简单跑一个网站感觉也是浪费，也想过直接部署在github或者gitee，考虑到稳定性，想到公司有部分前端项目是直接部署在阿里的OSS上面的，就开始折腾把该博客也部署在OSS上面，下面是整个过程。

二、账号资源准备

这里没啥难度，使用过阿里云的都知道，不在细说。

• 创建阿里云账号
• 创建OSS桶

三、博客打包

使用OSS部署博客，跟Nginx一样也需要先把博客打包成静态文件。

// 直接在根目录下执行打包命令
npm install --registry=https://registry.npm.taobao.org -unsafe-perm=true
npm run build

然后静态文件会在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

四、博客上传及配置

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

计费参考 (opens new window)

6.3 计费案例

6.4 总结

相对直接使用ECS服务器部署来说，OSS或者OSS+CDN费用还是比较少的，这样也无需关注机器的配置，具体的费用主要就是根据博客请求量来计算，这个后面再根据实际请求进行评估。