使用阿里云OSS托管前端代码怎么配置？

使用阿里云 OSS（对象存储服务）托管前端代码是一种常见且高效的静态网站部署方式。以下是详细的配置步骤：

✅ 一、准备工作

1. 注册阿里云账号
   访问 https://www.aliyun.com 并注册账号。

2. 开通 OSS 服务
   登录后进入 OSS 控制台，开通对象存储服务。

3. 创建 Bucket（存储空间）

   • 进入 OSS 控制台 → 创建 Bucket
   • 填写 Bucket 名称（全局唯一）
   • 选择地域（建议靠近用户）
   • 存储类型：标准存储（适合静态网站）
   • 访问权限：
     • 公共读（Public Read）或
     • 开启“静态网站托管”功能（推荐）

✅ 二、开启静态网站托管（推荐）

1. 在创建的 Bucket 中，点击左侧菜单「静态页面」。
2. 点击「设置」，开启「静态网站托管」。
   • 默认首页文件：index.html
   • 错误页文件（可选）：error.html
3. 保存设置。

启用后，OSS 会提供一个网络访问域名（如 http://your-bucket.oss-cn-region.aliyuncs.com），可以直接访问你的前端页面。

✅ 三、上传前端代码

方法 1：通过控制台上传

1. 进入 Bucket 的「文件管理」。
2. 将构建好的前端项目（如 dist/ 或 build/ 目录下的所有文件）拖拽上传。
3. 确保 index.html 在根目录。

方法 2：使用命令行工具（推荐自动化）

安装 ossutil 工具（下载地址）

# 配置 access-key 和 endpoint
ossutil config

# 同步本地 dist 目录到 OSS
ossutil cp -r ./dist oss://your-bucket-name --update

注意：建议使用子目录如 oss://your-bucket/dist，但若开启静态网站托管，需确保 index.html 可被访问。

✅ 四、设置跨域（CORS）（如需要）

如果你的前端应用要调用其他后端 API，可能需要设置 CORS。

在 Bucket 的「权限管理」→「跨域设置」中添加规则：

✅ 五、绑定自定义域名（可选）

1. 在「域名管理」中绑定你的域名（如 www.your-site.com）。
2. 添加 CNAME 解析记录到 OSS 提供的域名（如 your-bucket.oss-cn-region-internal.aliyuncs.com）。
3. 强烈建议配合 CDN 使用（下文说明）。

⚠️ 注意：直接绑定 HTTPS 需上传 SSL 证书或使用 CDN。

✅ 六、推荐：结合 CDN 提速（提升性能）

1. 将 OSS Bucket 作为源站接入阿里云 CDN。
2. 在 CDN 控制台添加域名，源站填写 OSS 网络地址。
3. 配置 HTTPS 证书（免费支持）。
4. 设置缓存策略（如 HTML 不缓存，JS/CSS 缓存一年）。

优势：

• 支持 HTTPS
• 加载更快
• 节省 OSS 网络流量费用

✅ 七、自动化部署（CI/CD 示例）

以 GitHub Actions 为例：

name: Deploy Frontend to OSS

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Build
        run: |
          npm install
          npm run build

      - name: Deploy to OSS
        uses: jakejarvis/oss-deploy-action@master
        with:
          aws_key_id: ${{ secrets.OSS_ACCESS_KEY_ID }}
          aws_secret_access_key: ${{ secrets.OSS_SECRET_ACCESS_KEY }}
          aws_region: oss-cn-beijing
          bucket: your-bucket-name
          source_dir: dist

✅ 总结：最佳实践

如有进一步需求（如 SPA 路由、404 处理），可以设置：

• 静态网站托管的错误页为 index.html，实现前端路由 fallback。

需要我提供完整的部署脚本或 CI/CD 示例吗？