AWS CloudFront 统一404页面响应

299 阅读1分钟

FloudFront有错误页面处理的模块,可以与S3结合应用,直接响应相关的错误。比如常见的HTTP 404错误代码。

  1. 定义响应页面路径/404/index.htlm,如下: image.png

  2. 创建S3源,需要注意设置S3存储桶权限。(不公开访问)

image.png

  1. 上传html页面到S3,目录结构要与第1步创建页面路径保持一致。

image.png

如何让index.html页面能访问到assets目录下面的样式呢?

为了让将index.html页面能加载到css、js样式,那么就需要在所有href引用都加上/404/,如下:

  <title>Home</title>
  <link rel="stylesheet" href="/404/assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/404/assets/bootstrap/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="/404/assets/bootstrap/css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="/404/assets/smart-cart/minicart-theme.css">
  <link rel="stylesheet" href="/404/assets/dropdown/css/style.css">
  <link rel="stylesheet" href="/404/assets/socicon/css/styles.css">
  <link rel="stylesheet" href="/404/assets/theme/css/style.css">

一个自定义的404页面就可以直接响应了

image.png