实战指南：如何使用 AWS S3 托管静态网站

2026-02-08 03:15:48 0条评论 1次阅读 0人点赞

在构建现代 Web 应用时，我们经常需要一个快速、可靠且经济实惠的地方来存放前端资源——比如 HTML、CSS、JavaScript 文件以及图片等。这就是 AWS Simple Storage Service (S3) 大显身手的地方。作为 AWS 云服务平台中最受欢迎的服务之一，S3 本质上是一个高可用性、高安全性的对象存储服务。对于开发者和初创公司来说，它不仅能存储数据，还能直接变身为一个全功能的静态网站托管服务器。

你可能会问：“为什么不直接使用传统的虚拟主机或云服务器？”这是一个好问题。使用 S3 托管静态网站，我们无需管理底层服务器，无需配置操作系统或修补漏洞， AWS 会自动处理所有的扩容和高可用性需求。这意味着，无论你的网站有 1 个访客还是 100 万个访客，它的表现都同样稳定。

在这篇文章中，我们将作为一个团队，一步步地探索如何将一个普通的 S3 存储桶配置成可以直接访问的网站。但在 2026 年的今天，我们不仅要关注“怎么做”，更要结合最新的开发理念，探讨“如何做得更好、更智能”。我们将涵盖从创建存储桶、处理权限配置（这是最关键的一步），到最终上传代码并上线的全过程。此外，我还会分享一些关于索引文档、错误页面以及性能优化的最佳实践，确保你的网站不仅“能跑”，而且“跑得快、跑得稳”。

前置准备与核心概念：2026 年视角

在开始点击按钮之前，我们需要先理解两个核心概念，这将帮助我们理解后续的操作步骤，并结合 AI 辅助开发（Vibe Coding）的趋势。

静态网站托管 vs. 标准存储桶访问：S3 有两种访问模式。一种是标准的 REST API 端点，主要用于数据存储；另一种是“网站端点”，专门用于托管静态网站。后者支持 HTTP 重定向、索引文档等功能。
公共访问与安全性：出于安全考虑，AWS 默认封锁了所有公共访问。要让全世界都能看到你的网站，我们需要显式地解除这些封锁。请务必注意：在现代架构中，直接公开 S3 存储桶存在安全风险。最佳实践是结合 CloudFront 和 OAC（Origin Access Control）来实现 HTTPS 安全托管。但在本文中，为了让你理解 S3 托管的基础原理，我们将重点讲解通过 S3 直接托管的基础方法，这是学习 AWS 权限模型的基础。

第一步：创建专属存储桶

首先，我们需要一个“容器”来存放我们的文件。请按照以下步骤操作：

登录控制台：打开 AWS 管理控制台，在服务列表中找到 S3。
创建存储桶：点击右上角的 Create bucket（创建存储桶）按钮。

配置细节详解：

Bucket name（存储桶名称）：这是最重要的设置。存储桶名称在全局所有 AWS 账户的所有区域中必须是唯一的。如果你的名字是 INLINECODEee8733d6，很可能已经被别人占用了。建议使用类似 INLINECODEdc8f44e2 这样的命名方式。
AWS Region（区域）：选择一个距离你或你的目标用户最近的区域。例如，如果你的用户主要在亚洲，选择“亚太地区（孟买）”或“东京”会有更低的延迟。
Object Ownership（对象所有权）：这里我们选择 ACLs enabled（启用 ACL）。虽然 AWS 推荐使用 Bucket Policy 来管理权限，但为了后续演示“通过 ACL 将对象设为公开”的步骤，我们需要保持此处的默认设置或显式启用它。

点击创建后，你会看到我们的存储桶出现在列表中。这就像是我们刚刚买下了一块地皮，接下来就要在上面盖房子了。

第二步：配置“屏蔽公共访问”设置

这是一个容易出错但至关重要的步骤。AWS 为了防止数据泄露，默认开启了“屏蔽公共访问”。

如果你希望网站能被公开访问，我们需要关闭这个开关（或者至少关闭“屏蔽公共访问存储桶”和“屏蔽公共访问由存储桶提供的公共访问”）。警告：只有当你确定该存储桶用于托管公开网站时，才应该这样做。如果你存储的是敏感数据，请保持开启。

操作步骤：

在存储桶列表中，点击你刚刚创建的存储桶名称。
切换到 Permissions（权限） 选项卡。
向下滚动找到 Block public access (bucket settings)。
点击 Edit（编辑），取消勾选所有的复选框。
在确认框中输入 confirm，然后保存。

此时，AWS 会在顶部显示一个警告：“此存储桶具有公共访问权限”。这正是我们想要的效果（对于静态网站托管而言）。

第三步：上传网站代码

现在，让我们把内容放进去。假设你已经在本地准备好了以下文件结构：

/website-root
  ├── index.html (主页)
  ├── error.html (错误页)
  ├── styles.css
  └── logo.png

实战操作：

在 S3 控制台中，点击 Objects（对象） 选项卡。
点击 Upload（上传） 按钮。
将你的 index.html 文件拖拽到上传区域，或者点击“添加文件”进行选择。
在上传页面下方（不需要展开额外设置），直接点击 Upload（上传） 按钮。

代码示例：简单的 index.html

为了演示效果，你可以创建一个名为 index.html 的文件，内容如下：




    
    
    我的 AWS S3 网站
    
        body { font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 50px; background-color: #f0f2f5; color: #333; }
        .container { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 600px; margin: auto; }
        h1 { color: #007bff; }
        .badge { display: inline-block; padding: 5px 10px; background: #e9ecef; border-radius: 20px; font-size: 0.8rem; margin-top: 10px; }
    


    
        恭喜！部署成功 🚀
        如果你能看到这段文字，说明你的 S3 静态网站已经成功托管。
        Powered by AWS S3 | 2026 Edition

第四步：启用静态网站托管

仅仅上传文件是不够的，我们需要告诉 S3：“嘿，请把这个存储桶当作一个网站服务器来对待。”

切换到 Properties（属性） 选项卡。
向下滚动，找到 Static website hosting（静态网站托管） 卡片。
点击 Edit（编辑）。
选择 Enable（启用）。
Index document（索引文档）：这是非常重要的配置。当用户访问 INLINECODE99639376 时，S3 会自动寻找并返回这个文件。通常填入 INLINECODEeba02bb3。
Error document（错误文档）：可选，但建议填写。当用户访问一个不存在的页面（如 404 错误）时，S3 会返回这个文件。填入 error.html。
保存更改。

此时，你会看到一个名为 Bucket website endpoint（存储桶网站终端节点） 的链接出现。类似 http://bucket-name.s3-website-us-east-1.amazonaws.com。请复制这个链接，我们稍后会用到。

第五步：设置对象与存储桶策略（进阶）

这是新手最容易卡住的地方。即便启用了静态网站托管，如果 S3 没有“允许读取”的权限，访问链接时会报错 403 (Forbidden)。

我们需要做两件事：

#### 1. 设置存储桶策略

为了允许所有人匿名读取存储桶中的对象，我们需要附加一个 Bucket Policy。

回到 Permissions（权限） 选项卡。
找到 Bucket policy（存储桶策略），点击 Edit（编辑）。
输入以下 JSON 策略（请将 YOUR_BUCKET_NAME 替换为你实际的存储桶名称）：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}

代码原理解析：

Effect: Allow：表示允许操作。
Principal: "*"：表示任何人（包括未登录 AWS 的访客）。
Action: "s3:GetObject"：只允许下载（读取）文件，不允许修改或删除。
INLINECODE1761c75c：指定策略应用于哪个存储桶下的所有文件（INLINECODE30f1fe16 表示所有对象）。

#### 2. 确保对象本身的 ACL 也是公开的

有时候，即使有了 Bucket Policy，如果文件上传时被标记为“私有”，我们也无法访问。为了确保万无一失（尤其是在本文的第二步我们提到了 ACL）：

点击 Objects（对象） 选项卡。
勾选你的 index.html 文件。
点击上方的 Actions（操作） 按钮。
选择 Make public using ACL（通过 ACL 设为公开）。
在弹出的确认框中，点击 Make public（设为公开）。

第六步：访问你的网站

一切准备就绪！还记得我们在第四步复制的那个链接吗？

格式通常是：http://bucket-name.s3-website-region.amazonaws.com
将其粘贴到浏览器中打开。

你应该能看到刚才编写的 index.html 页面渲染出来的内容。

如果看到 403 Forbidden 错误，请回退检查 Permissions 中的 Block public access 是否已关闭，以及 Bucket Policy 是否正确保存。

如果看到 404 Not Found 错误，请检查 Static website hosting 设置中的 Index document 是否填的是 index.html，并且该文件是否确实存在于存储桶根目录下。

2026年实战深度：从“能跑”到“好用”

通过上面的步骤，我们已经成功部署了一个静态网站。但在实际的生产环境中，还有一些“坑”和优化技巧是你必须知道的。作为经验丰富的开发者，我们在 2026 年会更加关注自动化、安全性以及如何利用 AI 来辅助这一过程。

1. AI 辅助的 CI/CD 部署工作流

每次都要手动在控制台上传文件？这在 2026 年已经是不可接受的了。我们可以利用现代 CI/CD 工具（如 GitHub Actions）结合 AWS CLI 来实现自动化。更有趣的是，我们可以利用 AI（如 GitHub Copilot 或 Cursor）来帮我们编写部署脚本。

以下是一个生产级的部署脚本示例，我们通常会用 AI 辅助生成并根据项目微调：

# .github/workflows/deploy-s3.yml
name: Deploy to S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      # 配置 AWS 凭证
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1

      # 部署到 S3 并清除缓存
      - name: Deploy to S3
        run: |
          # 同步文件，设置缓存控制，删除源端不存在的文件
          aws s3 sync . s3://YOUR_BUCKET_NAME --delete --cache-control "max-age=3600, public"
        env:
          BUCKET_NAME: ${{ secrets.BUCKET_NAME }}

2. 性能优化：拥抱 CloudFront 与边缘计算

直接使用 S3 网站端点有几个缺点：不支持 HTTPS（这在现代浏览器中会被标记为“不安全”），且速度受限于 S3 区域。

解决方案：在生产环境中，最佳实践是将 S3 设置为私有（只允许 CloudFront 访问），然后创建一个 CloudFront 分发。这不仅解决了 HTTPS 问题，还带来了全球 CDN 加速。

我们来看一个用于配置 CloudFront OAC (Origin Access Control) 的 Terraform 代码片段，这体现了“基础设施即代码” 的现代理念：

resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.my_website.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.default.id
  }

  enabled             = true
  is_ipv6_enabled     = true
  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = aws_s3_bucket.my_website.id

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }
    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  # 确保所有 HTTP 请求重定向到 HTTPS
  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }
}

总结与前瞻

在这篇文章中，我们深入探讨了如何利用 AWS S3 托管静态网站，从基础的存储桶创建到权限控制，再到 2026 年视角下的 CI/CD 自动化和边缘计算优化。

作为开发者，我们应该保持好奇心，不断探索新的技术趋势。S3 虽然是一个基础服务，但结合 CloudFront、Lambda@Edge 以及现代 AI 辅助开发工具，它依然是构建高性能、高可用 Web 应用的基石。希望这篇指南能帮助你更好地理解云原生开发的精髓！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客