共计 1950 个字符,预计需要花费 5 分钟才能阅读完成。
前言
使用阿里云 OSS + CDN 方案的几大好处:
- 成本低廉。OSS+CDN 部署自己的网站每个月的花费远比自己买 ECS 服务器部署网站花费要少得多
- 大幅降低运维成本。直接使用现成的云服务了,无需花精力去维护 ECS 了。
- 极高的可用性。无论阿里云的 OSS 还是 CDN,都已经做好了高可用性,几乎可以保证网站始终可访问
- 极高的访问速度。ECS 带宽毕竟有限的,高带宽意味着超高的费用。但是用 OSS+CDN 这种天然分布式的架构部署网站很轻松的解决了带宽问题,极大地提升了用户的访问体验。
- OSS 会自动帮你压缩,使得你的页面加载速度极快。
为此我写了一篇博客来帮助指导使用 OSS,并且写了一个部署脚本 deploy.js 来实现自动上传。js_deploy
配置 阿里云对象存储(OSS)
首先登陆阿里云 oss 控制台,点击创建一个 bucket。
根据自己的需求选择参数。
然后就创建了一个 bucket。
为 bucket 配置域名,在上图中,将阿里云外网访问 Bucket 域名记录下来。然后在 DNS 控制台添加记录解析。然后回到 oss 控制台,在 域名管理 选项 将你刚刚 DNS 解析的域名 绑定上去。这样就可以通过自己设置的二级域名访问到自己的项目了。
在 基础设置 找到静态页面 设置默认首页的文件名 一般都是 index.html,如果有 404 页面也可以配置。
就下来就只要将自己的打包出来的静态文件 通过 deploy.js 脚本上传到 OSS 上就行了
配置 deploy.js
打开 deploy.js 将 bucket,region 填入。key,secret 可能忘记 (在刚开始使用阿里云的时候,阿里云会将这个发送给你,并提醒你保存),可以在 用户信息管理 安全信息管理 获取到自己的 Access Key Secret(也可以在这里创建一个新的 AccessKey)。因为 deploy.js 中保存有你的阿里云 accessKeyId 与 accessKeySecret 所以 记得在.gitignore 文件忽略 deploy.js
这样再稍微配置下要部署的项目 就可以用这个脚本了。
使用
将 deploy.js 下载到你的项目根目录下。一般是 webpack 打包而成的单页面应用。页面打包生成 dist 文件夹目录,将 dist 文件夹上传到阿里云 oss 上。
在 package.json 中加入这个脚本命令,用来更快的执行部署命令。也可以手动 node deploy.js 执行部署脚本。
"scripts": {"deploy": "node deploy.js"},
"devDependencies": {"ali-oss": "^6.1.1", // 这是阿里云的 oss 依赖,也可以直接手动 npm install ali-oss --save-dev}
演示
在这里 我演示一个将 ant-design-pro 构建的项目打包上传到 oss 上。
然后就可以访问到了(记得一定要在 oss 控制台设置 index.html 为首页)
在这里你可以通过访问 http://example-oss.flura.cn 访问到我的阿里云示例
webpack 项目自动部署到阿里云 OSS
这里做一个补充:如果是一个 webpack 项目 我们使用一个 webpack 插件,可以实现自动部署到阿里 oss 的效果。可以极大的提升开发效率,开发完毕,打包项目就可以部署到线上环境。
aliyunoss-webpack-plugin
插件使用
- 首先安装
aliyunoss-webpack-plugin
插件
yarn add aliyunoss-webpack-plugin -D
// 或者使用 npm i aliyunoss-webpack-plugin -D
- 修改
webpack.prod.conf.js
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin')
const oss = require('../oss')
...
plugins: [
...
// 插入到最后面
new AliyunossWebpackPlugin({
buildPath: 'dist/**',
region: oss.region,
accessKeyId: oss.accessKeyId,
accessKeySecret: oss.accessKeySecret,
bucket: oss.bucket,
deleteAll: true,
generateObjectPath: function(filename, file) {return file.replace(/dist\//, '')
},
})
}
创建一个 oss.js 因为不希望 阿里云 oss 隐私信息被上传到 git 所以 记得在.gitignore 文件中忽略。
现在只要执行 npm run build 就能打包并上传到 oss 上实现自动部署了。
deploy.js github 仓库链接
github 仓库
部署示例