跳转到主文档

阿里云 OSS

Modern.js 支持将资源文件上传到阿里云 OSS 产品中。

启用功能

在项目目录中执行 pnpm new 启用部署功能,忽略云函数相关内容,只开启 CDN 上传功能:

? 请选择你想要的操作:启用可选功能
? 启用可选功能:启用「部署」功能
? 默认使用框架自带的专业 Web 服务器,是否调整:否
? 请选择 CDN 平台:阿里云 OSS
? 请选择云函数平台:不使用云函数部署

可以发现 package.json 中已经新增了以下依赖:

{
+ "@modern-js/plugin-cdn-oss": "^1"
}

配置环境变量

部署到阿里云 OSS 需要在环境变量中配置账号、区域等信息。除了基础的 accountIdsecretIdsecretKey 等账号信息外,还需要配置 bucketName

部分可以进入代码仓库的环境变量可以放在项目的 .env 文件中。例如:

# 阿里云账号 ID
CLOUD_ACCOUNT_ID
# 阿里云区域信息(可选,默认 'cn-hangzhou')
CLOUD_REGION
# OSS Bucket 名称
CLOUD_BUCKET_NAME
# 如果创建的 bucket region 与默认 region 不同,也可以单独配置
CLOUD_BUCKET_REGION
# 配置资源上传到 Bucket 的哪个目录下
CLOUD_BUCKET_PATH

另外与账号鉴权相关的信息,必须确保放在平台上,例如 GitHub Environments 中。

# 阿里云访问 AK
CLOUD_SECRET_ID
# 阿里云访问 SK
CLOUD_SECRET_KEY

获取发布配置

上述相关配置都可以在阿里云平台中获取。

  1. AccountID 在阿里云账号中心页获取:

accountId

  1. SecretID(AccessKey ID),SecretKey(AccessKey Secret),在用户信息管理页获取:

aksk

  1. Bucket 信息可以从阿里云 OSS 的 Bucket 列表中获取:

bucket

查看资源文件

直接访问指定 Bucket 的文件列表,点击文件详情即可获取访问 URL:

bucket-file

若要通过外网直接访问对象存储的临时域名,必须修改该桶权限为对外可读。

补充信息

阿里云 OSS 不支持默认的对域名来访问 .html、图片等文件,如需以此方式部署,则必须自定义对象存储的域名,详情可以查看阿里云帮助文档

应用域名

在测试阶段,可以直接在配置文件中设置静态资源前缀 output.assetPrefix 为阿里云 OSS 的临时域名:

export default defineConfig({
output: {
assetPrefix: "https://{bucketName}.oss-{bucketRegion}.aliyuncs.com/"
}
}

执行 pnpm run build && pnpm run start 后,打开页面,可以发现静态资源已经通过 OSS 临时域名访问,并且页面能够正常展示。