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

问题描述

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

我知道我可以在S3和CDN上托管它，但是对于这种用例，我想使用Amplify，以便可以使用Git自动化部署。

任何种类的信息/帮助都将很棒！

解决方法

我遇到了同样的问题。问题是您的资产（在您的示例中为 ./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>

amplify aws-amplify