AWS入门实践-利用S3构建一个静态网站

news/2024/5/18 14:09:23 标签: aws, udp, 云计算

使用Amazon S3托管静态网站是一个流行的选择,因为它简单、成本效益高,并且易于维护。静态网站由不含服务器端脚本的文件组成,如HTML、CSS和JavaScript文件。下面是使用S3托管静态网站的操作步骤:

如果大家没有AWS免费账号,请参考下面链接来创建:

想学习云计算么?教你如何免费白嫖微软和AWS的云资源一年_免费使用azure一年-CSDN博客

步骤 1:创建S3存储桶

  1. 登录到AWS管理控制台,并打开Amazon S3控制台。
  2. 点击“创建存储桶”。
  3. 为存储桶命名,这个名称必须全球唯一。
  4. 选择存储桶所在的区域。
  5. 点击“创建”完成存储桶的创建。

步骤 2:启用静态网站托管

  1. 在S3控制台中,选择你刚创建的存储桶。
  2. 转到“属性”选项卡。
  3. 在“静态网站托管”部分,选择“启用”。
  4. 输入你的首页文档(通常是index.html)和错误页面(例如:error.html)的名称。
  5. 记下S3为你的静态网站提供的终端节点URL。

步骤 3:上传网站内容

  1. 转到你的存储桶,并打开“对象”选项卡。
  2. 点击“上传”并选择你的静态网站文件(HTML、CSS、JavaScript等)。这里有一个简单的index.html供参考:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>静态网页示例</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                text-align: center;
                margin: 0;
                padding: 0;
            }
            
            h1 {
                font-size: 3em;
                margin-top: 1em;
            }
            
            img {
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
        <h1>S3静态网页展示</h1>
        <img src="https://picsum.photos/1200/800" alt="随机图片">
    </body>
    </html>
    
  3. 设置文件的权限,使其对公众可读。你可以在上传时选择“设置权限”,然后选择“公开读取”。
  4. 完成上传。

步骤 4:设置存储桶策略

首先将公共权限打开,如下图:

然后在存储桶的“权限”选项卡下,点击“存储桶策略”。

输入一个策略,允许任何人访问存储桶中的对象。例如:

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

test-static-website2024替换为你的存储桶名称。

步骤5:验证静态网站

在浏览器键入刚才保存的URL
http://test-static-website2024.s3-website-ap-southeast-1.amazonaws.com

显示如下图:一个简单的静态网站就创建好了。 

步骤 6:(可选)配置自定义域名

如果你有自己的域名,你可能想要使用该域名而不是S3提供的终端节点URL来访问你的网站。

  1. 在你的DNS提供商处创建一个CNAME记录,指向你在步骤2中记下的S3网站终端节点URL。
  2. 如果使用Amazon Route 53作为DNS服务,你可以创建一个别名记录来实现相同的目的。

示例

假设你有一个静态网站,主页是index.html,有一个样式表style.css和一个JavaScript文件script.js。你希望通过www.example.com域名访问你的网站。

按照上述步骤,你将创建一个名为www.example.com的S3存储桶,启用静态网站托管,设置index.html作为首页。然后,你上传index.htmlstyle.cssscript.js到存储桶,并设置它们为公开读取。接着,你添加一个存储桶策略,允许公共访问。最后,你在你的DNS提供商处设置一个指向S3终端节点URL的CNAME记录。

这样,当用户访问www.example.com时,他们将看到由你的S3存储桶提供服务的静态网站。


http://www.niftyadmin.cn/n/5473357.html

相关文章

HarmonyOS 应用开发之@Builder装饰器:自定义构建函数

前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定&#xff0c;仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制Builder&#xff0c;Builder所装饰的函数遵循build()函数语法规则&#xff0c;开发者可以将重复使用的UI元素抽象成一个方法&a…

Apache Log4j2 Jndi RCE CVE-2021-44228漏洞原理讲解

Apache Log4j2 Jndi RCE CVE-2021-44228漏洞原理讲解 一、什么是Log4j2二、环境搭建三、简单使用Log4j2四、JDNI和RMI4.1、启动一个RMI服务端4.2、启动一个RMI客户端4.3、ldap 五、漏洞复现六、Python批量检测 参考视频&#xff1a;https://www.bilibili.com/video/BV1mZ4y1D7K…

腾讯光子工作室群 一面 (30min)

问题&#xff1a; 你毕业是打算考研还是直接工作 深挖项目&#xff08;介绍、剖析遇到问题如何解决&#xff09;&#xff1a; 你在进行攻击的时候会不会有穿模的情况&#xff0c;怎么解决 为什么会造成卡顿&#xff08;多嘴说的&#xff09; 说说行为树和状态机之间的差别 …

c语言:大端小端(真实考试题目)

请简述大端字节序和小端字节序的概念&#xff0c;设计一个程序&#xff08;代码&#xff09;判断当前机器的字节序 大端&#xff08;存储&#xff09;字节序&#xff1a;是指数据的低位保存在内存的高地址中&#xff0c; 数据的高位保存在内存的低地址中。 小端&#xff08;存储…

【OTA】STM32-OTA升级——持续更新

【OTA】STM32-OTA升级——持续更新 文章目录 前言一、ymodem串口协议1、Ymodem 协议2、PC3、蓝牙4、WIFI云平台 二、UDS车载协议1.UDS协议 总结 前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、ymodem串口协议 1、Ymodem 协议 STM32 Ymodem …

深入了解iPhone GPU技术:优化游戏图形渲染

摘要 了解你的显卡对于在电脑上玩现代图形要求高的游戏非常重要。本文介绍了如何轻松查看你的显卡型号以及为什么显卡在玩电脑游戏时如此关键。 引言 随着电脑游戏的发展&#xff0c;现代游戏对硬件性能的要求越来越高。十年前发布的显卡已经无法满足当前游戏的需求。因此&…

使用Android完成案例教学

目录 题目&#xff1a;完成在Android平台下2个玩家分别利用2个手机连接在同一局域网下通过滑动摇杆分别使红飞机和黄飞机移动的开发。&#xff08;全代码解析&#xff09; 题目&#xff1a;完成在Android平台下2个玩家分别利用2个手机连接在同一局域网下通过滑动摇杆分别使红飞…

HUD抬头显示器阳光倒灌实验一般步骤

概述 汽车HUD&#xff08;Head-Up Display&#xff0c;即抬头显示器&#xff09;阳光倒灌实验是一种用于评估汽车抬头显示器在阳光直射条件下显示效果的测试。该实验的目的是确保HUD系统在强烈的阳光下依然能够清晰地显示信息&#xff0c;不影响驾驶员的视线和驾驶安全。 一般…