rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
89 lines (61 loc) • 2.82 kB
Markdown
---
sidebar_position: 2
---
# 腾讯云 COS
Modern.js 支持将资源文件上传到腾讯云 COS 产品中。
## 启用功能
在项目目录中执行 `pnpm new` 启用部署功能，忽略云函数相关内容，只开启 CDN 上传功能：
```bash
? 请选择你想要的操作：启用可选功能
? 启用可选功能：启用「部署」功能
? 默认使用框架自带的专业 Web 服务器，是否调整：否
? 请选择 CDN 平台：腾讯云 COS
? 请选择云函数平台：不使用云函数部署
```
可以发现 `package.json` 中已经新增了以下依赖：
```json
{
+ "@modern-js/plugin-cdn-cos": "^1"
}
```
## 配置环境变量
部署到腾讯需要在环境变量中配置账号、区域等信息。除了基础的 `secretId` 和 `secretKey` 等账号信息外，还需要配置 `bucketName`。
部分**可以进入代码仓库**的环境变量可以放在项目的 `.env` 文件中。例如：
```bash
# 腾讯云区域信息（可选，默认 'ap-guangzhou'）
CLOUD_REGION
# COS Bucket 名称
CLOUD_BUCKET_NAME
# 如果创建的 bucket region 与默认 region 不同，也可以单独配置
CLOUD_BUCKET_REGION
# 配置资源上传到 Bucket 的哪个目录下
CLOUD_BUCKET_PATH
```
另外与账号鉴权相关的信息，必须确保放在平台上，例如 [Github Environments](https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment) 中。
```bash
# 腾讯云访问 AK
CLOUD_SECRET_ID
# 腾讯云访问 SK
CLOUD_SECRET_KEY
```
## 获取发布配置
1. 上述账号相关配置都可以在腾讯云平台的 [API 秘钥管理](https://console.cloud.tencent.com/cam/capi)中获取：
2. Bucket 信息可以从腾讯云 COS 的 [Bucket 列表](https://console.cloud.tencent.com/cos5/bucket)中获取：
## 查看资源文件
直接访问指定 Bucket 的文件列表，点击文件详情即可获取访问 URL：
:::note 注
若要通过外网直接访问对象存储的临时域名，必须修改该桶权限为对外可读。
:::
## 修改应用配置
在测试阶段，可以直接在配置文件中设置静态资源前缀 `output.assetPrefix` 为腾讯云 COS 的临时域名：
```js
export default defineConfig({
output: {
assetPrefix: "https://{bucketName}.cos.{bucketRegion}.myqcloud.com/"
}
}
```
执行 `pnpm run build && pnpm run start` 后，打开页面，可以发现静态资源已经通过 COS 临时域名访问，并且页面能够正常展示。