Amazon web services 如何在AWS Cloudfront（S3）上获得干净的URL？

我正在AWS S3上托管我的静态网站，Cloudfront作为CDN，我想知道如何让干净的URL工作

我目前必须转到

example.com/about.html

才能获得about页面。我更喜欢

example.com/about

以及其他所有页面。另外，我必须这样做，因为我的规范URL已经设置了元标记和搜索引擎，要改变它们会有点困难

云端有我看不见的背景吗

更新 我已经探索了两种选择，Matt在下面详细介绍了其中一种

首先是在上传到S3之前修剪

.html

文件，然后在http中编辑该文件的内容头。这可能工作得很好，但我不知道如何从命令行编辑内容标题，我正在编写“推送网站更新”bash脚本

---

第二个由Matt在下面详细介绍，它利用S3的特性识别根默认文件，通常是index.html。这可能是一个很好的方法，但它让我的本地测试变得很有挑战性，而且它会在URL上留下一个对我不起作用的斜杠。

当您在S3中托管您的网站时（通过扩展CloudFront），您可以将S3配置为在请求目录时加载一个“默认”文件。这称为“索引文档”

例如，您可以将S3配置为加载

index.html

作为默认文件。这样，如果请求是针对

example.com/abc/

，那么它将加载

abc/index.html

当您这样做时，如果他们请求

example.com/abc/123.html

，那么它将提供

abc/123.html

。因此，默认文件仅在请求文件夹时应用

为了满足您对

example.com/about/

的请求，您可以使用默认文件

index.html

配置您的bucket，并将

about/index.html

放入您的bucket中

---

更多信息可以在Amazon的文档中找到：。

当您的S3存储桶配置为网站端点时，您可以使用自定义源来克服丑陋的URL。缺点是您无法将Cloudfront配置为使用HTTPS在Cloudfront和您的源站之间进行通信。您仍然可以使用HTTPS，但不能使用端到端加密

---

您可以使用Lambda作为网站的反向代理

在API网关中，您需要创建一个“代理资源”，其资源路径为=“{proxy+}”

然后，创建Lambda函数来路由请求：

const AWS = require('aws-sdk');
const s3 = new AWS.S3();
const myBucket = 'myBucket';

exports.handler = async (event) => {

    var responseBody = "";

    if (event.path=="/") {
        responseBody = "<h1>My Landing Page</h1>";
        responseBody += "<a href='/about'>link to about page</a>";
        return buildResponse(200, responseBody);
    }

    if (event.path == "/about") {

        var params = { 
            Bucket: myBucket,
            Key: 'path/to/about.html',
        };

        const data = await s3.getObject(params).promise();

        return buildResponse(200, data.Body.toString('utf-8'));
    }

    return buildResponse(404, 'Page Not Found');

};


function buildResponse(statusCode, responseBody) {

    var response = {
        "isBase64Encoded": false,
        "statusCode": statusCode,
        "headers": {
            "Content-Type" : "text/html; charset=utf-8"
        },
        "body": responseBody,
    };

    return response;
}

const AWS=require（'AWS-sdk'）；
const s3=新的AWS.s3（）；
const myBucket='myBucket'；
exports.handler=异步（事件）=>{
var responseBody=“”；
如果（event.path==“/”）{
responseBody=“我的登录页”；
响应体+=“”；
返回buildResponse（200，responseBody）；
}
如果（event.path==“/about”）{
var params={
桶：我的桶，
键：“path/to/about.html”，
};
const data=wait s3.getObject（params.promise（）；
返回buildResponse（200，data.Body.toString（'utf-8'）；
}
返回buildResponse（404，“未找到页面”）；
};
函数buildResponse（状态代码、响应库）{
var响应={
“isBase64Encoded”：false，
“状态代码”：状态代码，
“标题”：{
“内容类型”：“文本/html；字符集=utf-8”
},
“身体”：回应体，
};
返回响应；
}

然后，您可以使用自定义域为API网关创建CloudFront发行版

有关更多详细信息，请查看此答案：

---

“很高兴知道：”Hi @科斯塔，如果这个或任何答案已经解决了你的问题，请考虑点击复选标记。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这么做。谢谢你，约翰！这不能回答我的问题。不知道如何进一步澄清我的问题。@Costa，为什么这不能回答你的问题？您询问如何将页面设置为

example.com/about

，而不是

example.com/about.html

，我解释了如何做到这一点。你还想找什么？这是一个有效的解决办法，但也有成本，比如重新安排我的整个工作目录。在您的示例中还有一个尾随斜杠，它不是我的规范URL当前在我的站点中列出的方式。知道这个选项的存在肯定很有帮助，谢谢！我最终编写了一个构建脚本，该脚本复制了所有html文件，但文件名末尾没有“.html”，然后将它们推送到s3 bucket，并在push命令中指定了内容类型html。我最终编写了一个构建脚本，该脚本复制了所有html文件，但文件名末尾没有“.html”，然后使用push命令中指定的内容类型html将它们推送到s3 bucket。