如何在 AWS Amplify 上部署静态 HTML 网页？

Question

我想知道如何在 AWS Amplify 上部署静态 HTML 网站。我能够部署它但由于某种原因它没有加载资产，特别是来自 ./img 或 ./images 文件夹的图像。它显示为损坏的图像。

我知道我可以使用 S3 和 CDN 来托管它，但是对于这个用例，我想使用 Amplify 以便我可以使用 Git.

自动部署

任何类型的 information/help 都很棒！

Answer 1

我遇到了同样的问题。问题是您的资产（在您的示例 ./images 中，但我只有一个资产文件夹，可能有 images/css 或其他）可能无法从您的 AWS Amplify Build 设置中的目录访问 - 至少是我的问题。

假设您有以下 构建设置：

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands: []
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: blog
    files:
      - '**/*'
  cache:
    paths: []

我将我的 assets 文件夹放在基本目录中，这允许 index.html 读取资产的位置。例如在您的 index.html 代码中：

<!DOCTYPE html>
<html lang="en">
<head>
   ... relevant meta tags etc here
   <link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
</body>
</html>

如何在 AWS Amplify 上部署静态 HTML 网页？

How to deploy static HTML webpage on AWS Amplify?

aws-amplify

amplify