乐趣区

阿里云对象存储OSS部署前端项目并使用自动脚本上传

jiezi

前言

使用阿里云 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插件使用

  1. 首先安装 aliyunoss-webpack-plugin 插件
yarn add aliyunoss-webpack-plugin -D
// 或者使用 npm i aliyunoss-webpack-plugin -D
  1. 修改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 仓库

部署示例

退出移动版