AWS中使用CloudFront分发位于S3中的静态网站

这是其中一种方法,可有变化

假设主页为index.html

还要准备一个证书,要覆盖子域名(AWS Certificate Manager->Certificates)

1、S3->Create bucket->Bucket name(myweb)->Create bucket

2、S3->Buckets->myweb->Upload->Add files Add folder

3、CloudFront->Distributions->Create->Origin domain(myweb.s3.amazonows.com)->Name(myweb)->Origin access(Origin access control settings (recommended))->Origin access control->Create new OAC->复制到S3->Alternate domain name (CNAME) - optional-> Add item->(www.youweb.com)->Custom SSL certificate - optional(提前准备好 证书*)->*Create distribution

4、Amazon S3->Buckets->myweb->Permissions->Bucket policy->Edit->粘贴到S3

5、Route 53->Hosted zones->配置域名记录

6、问题:www.youweb.com不能访问,只能访问www.youweb.com/index.html

6.1、办法,CloudFront Functions:

6.2、CloudFront->Functions->Create function->Name(index)->Create function

javascript 复制代码
function handler(event) {
    var request = event.request;

    // 如果请求路径是根路径(/),重写为 /index.html
    if (request.uri === '/') {
        request.uri = '/index.html';
    }

    return request;
}

6.3、CloudFront->Functions->index->Publish->Publish function

6.4、CloudFront->Distributions->myweb->Behaviors->Edit->Function associations *- optional->Viewer request->*Function type->CloudFront Functions->Function ARN / Name(index)

相关推荐
u***276136 分钟前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
星空的资源小屋1 小时前
跨平台下载神器ArrowDL,一网打尽所有资源
javascript·笔记·django
Dorcas_FE1 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
八月ouc1 小时前
解密JavaScript模块化演进:从IIFE到ES Module,深入理解现代前端工程化基石
javascript·es6·模块化·cmd·commonjs·amd·iife
四岁爱上了她2 小时前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
互联网老欣2 小时前
2025年保姆级教程:阿里云服务器部署Dify+Ollama,打造专属AI应用平台
服务器·阿里云·ai·云计算·dify·ollama·deepseek
烟袅2 小时前
5 分钟把 Coze 智能体嵌入网页:原生 JS + Vite 极简方案
前端·javascript·llm
神秘的猪头2 小时前
🧠 深入理解 JavaScript Promise 与 `Promise.all`:从原型链到异步编程实战
前端·javascript·面试
白兰地空瓶2 小时前
从「似懂非懂」到「了如指掌」:Promise 与原型链全维度拆解
前端·javascript
湖边看客4 小时前
antd x6 + vue3
开发语言·javascript·vue.js