avatar

前端/前端项目部署到ali-oss

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

前言

使用阿里云 OSS + CDN 方案的几大好处:

  • 成本低廉。OSS+CDN 部署自己的网站每个月的花费远比自己买 ECS 服务器部署网站花费要少得多
  • 大幅降低运维成本。直接使用现成的云服务了,无需花精力去维护 ECS 了。
  • 极高的可用性。无论阿里云的 OSS 还是 CDN,都已经做好了高可用性,几乎可以保证网站始终可访问
  • 极高的访问速度。ECS 带宽毕竟有限的,高带宽意味着超高的费用。但是用 OSS+CDN 这种天然分布式的架构部署网站很轻松的解决了带宽问题,极大地提升了用户的访问体验。
  • OSS 会自动帮你压缩,使得你的页面加载速度极快。

配置 阿里云对象存储(OSS)

首先登陆阿里云 oss 控制台,点击创建一个 bucket。

img

根据自己的需求选择参数。

然后就创建了一个 bucket。

img

为 bucket 配置域名,在上图中,将阿里云外网访问 Bucket 域名记录下来。然后在 DNS 控制台添加记录解析。然后回到 oss 控制台,在域名管理选项 将你刚刚 DNS 解析的域名 绑定上去。这样就可以通过自己设置的二级域名访问到自己的项目了。

img

img

基础设置找到静态页面 设置默认首页的文件名 一般都是 index.html,如果有 404 页面也可以配置。

img

接下来就只要将自己的打包出来的静态文件 通过 deploy.js 脚本上传到 OSS 上就行了

配置 deploy.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const fs = require("fs");
const path = require("path");
const util = require("util");
const OSS = require("ali-oss");

const promisifyReaddir = util.promisify(fs.readdir);
const promisifyStat = util.promisify(fs.stat);

const client = new OSS({
// yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
bucket: "owner-h5",
region: "oss-cn-shenzhen",
// 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
accessKeyId: "accessKeyId",
accessKeySecret: "accessKeyId"
});
const publicPath = path.resolve(__dirname, "./dist");

async function run(proPath = "") {
const dir = await promisifyReaddir(`${publicPath}${proPath}`);

for (let i = 0; i < dir.length; i++) {
const stat = await promisifyStat(path.resolve(`${publicPath}${proPath}`, dir[i]));

if (stat.isFile()) {
const fileStream = fs.createReadStream(path.resolve(`${publicPath}${proPath}`, dir[i]));
console.log(`上传文件: ${proPath}/${dir[i]}`);
const result = await client.putStream(`${proPath}/${dir[i]}`, fileStream);
} else if (stat.isDirectory()) {
await run(`${proPath}/${dir[i]}`);
}
}
}

run();

打开 deploy.js 将 bucket,region 填入。

在阿里云的 RAM 访问控制 中,创建一个新用户,配置下 oss 管理权限后 Key 和 seccret 复制出来

img

这样再稍微配置下要部署的项目 就可以用这个脚本了。

使用

将 deploy.js 下载到你的项目根目录下。一般是 webpack 打包而成的单页面应用。页面打包生成 dist 文件夹目录,将 dist 文件夹上传到阿里云 oss 上。

在 package.json 中加入这个脚本命令,用来更快的执行部署命令。也可以手动 node deploy.js 执行部署脚本。

1
2
3
4
5
6
"scripts": {
"deploy": "node deploy.js"
},
"devDependencies": {
"ali-oss": "^6.1.1", // 这是阿里云的oss依赖,也可以直接手动npm install ali-oss --save-dev
}
文章作者: 小黑
文章链接: http://ynxh.xyz/2023/02/28/前端/前端项目部署到ali-oss/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小黑的小站
打赏
  • 微信
    微信
  • 支付寶
    支付寶
2