如何将前端项目部署到阿里云上？-云小栈

将前端项目部署到阿里云，可以通过以下几种常见方式实现。以下是详细步骤和推荐方案：

✅ 推荐方案：使用阿里云 OSS + CDN + 域名备案 + HTTPS

这是部署静态前端项目（如 Vue、React、Angular、HTML 等）最常用、最经济高效的方式。

🌐 一、准备环境

注册阿里云账号
- 访问 https://www.aliyun.com
- 注册并完成实名认证。
购买域名（可选）
- 如果需要自定义域名（如 www.yoursite.com），可在阿里云购买。
- 进入「域名控制台」购买并完成 域名实名认证。
域名备案（中国大陆服务器必须）
- 使用阿里云服务器或 OSS 托管在中国大陆节点时，必须备案。
- 进入「ICP 备案系统」提交备案申请（通常需 5-20 天）。

☁️ 二、使用 OSS 部署静态网站

1. 创建 OSS Bucket

登录 OSS 控制台
点击「创建 Bucket」
- 名称：唯一，如 my-website-prod
- 地域：选择靠近用户的位置（如 华东1（杭州））
- 存储类型：标准存储（适合频繁访问）
- 读写权限：公共读（Public Read）

2. 开启静态网站托管

进入 Bucket → 「基础设置」→ 「静态页面」
启用静态网站托管：
- 索引页面：index.html
- 错误页面：error.html（可选）
保存后会生成一个访问地址，如：http://my-website-prod.oss-cn-hangzhou.aliyuncs.com

⚠️ 注意：此时是 HTTP，建议搭配 CDN 使用 HTTPS。

🚀 三、配置 CDN 提速（推荐）

CDN 可提速访问，并支持 HTTPS。

1. 开通 CDN 服务

进入 CDN 控制台

2. 添加域名

添加你的域名（如 www.yoursite.com）
源站类型：OSS
源站域名：选择你刚创建的 OSS 网络访问域名（如 my-website-prod.oss-cn-hangzhou-internal.aliyuncs.com）

3. 配置 CNAME

添加完成后，CDN 会分配一个 CNAME 地址（如 xxx.cdncenter.net）
回到「域名控制台」，添加 DNS 解析记录：
- 类型：CNAME
- 主机记录：www
- 记录值：CDN 提供的 CNAME 地址

4. 开启 HTTPS

在 CDN 控制台 → HTTPS 配置 → 启用 HTTPS
可以选择「阿里云免费证书」自动申请 SSL 证书
强制跳转 HTTPS（可选）

📦 四、上传前端项目文件

1. 构建项目

# Vue 项目
npm run build

# React 项目
npm run build

# 输出目录通常是 dist 或 build

2. 上传文件到 OSS

方式一：通过 OSS 控制台手动上传 dist/* 文件

方式二：使用命令行工具 ossutil

ossutil cp -r ./dist oss://my-website-prod --include "*" --exclude ".git"

方式三：使用 CI/CD 自动部署（见下文）

🔁 五、自动部署（可选，推荐）

使用 GitHub Actions / Jenkins / 阿里云效实现自动化构建与发布。

示例：GitHub Actions 自动部署到 OSS

name: Deploy to Aliyun OSS

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - run: npm install
      - run: npm run build

      - name: Deploy to OSS
        uses: jakejarvis/oss-deploy-action@master
        with:
          access-key-id: ${{ secrets.OSS_ACCESS_KEY_ID }}
          access-key-secret: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
          bucket: my-website-prod
          region: oss-cn-hangzhou
          source-dir: dist

在 GitHub 仓库 Settings → Secrets 中配置 OSS_ACCESS_KEY_ID 和 OSS_ACCESS_KEY_SECRET（从阿里云 RAM 获取）

✅ 六、验证部署

访问你的域名：https://www.yoursite.com
检查资源是否加载正常
F12 查看是否有 404 或跨域问题

🧩 其他部署方式对比

方式	适用场景	成本	维护难度
OSS + CDN	静态网站（推荐）	低	简单
ECS 服务器	需要运行 Node.js 后端	较高	中等
函数计算 FC	Serverless 前后端一体	低	较复杂
云翼计划学生机	学生低成本练手	极低	中等

📌 注意事项

所有在中国大陆接入的域名必须备案。
OSS 不支持动态内容（如 PHP、Node.js），仅适合静态文件。
使用 CDN 可大幅提升访问速度并节省流量费用。
定期清理旧版本文件，避免 OSS 存储费用过高。

💡 总结

最佳实践流程：

前端代码 → 构建 (build) → 上传 OSS → CDN 提速 → 域名解析 → HTTPS 访问

只需几百元甚至免费即可长期稳定运行。

如果你提供具体框架（如 Vue、React）或想结合后端部署，我可以给出更详细的配置脚本。欢迎继续提问！

✅ 推荐方案：使用 阿里云 OSS + CDN + 域名备案 + HTTPS