Pulumi（TypeScript、AWS）：如何将多个文件上传到 S3，包括。静态网站托管目录中的嵌套文件

Question

在 5 分钟内创建AWS S3 网站 YT 视频和在 Amazon S3 Pulumi 上托管静态网站教程中，详细解释了如何使用 Pulumi 在 S3 上创建托管网站。

示例代码中使用了Pulumi的Bucket和BucketObject 。第一个创建 S3 存储桶，后者创建对象，这些对象主要用于index.html公共访问，如下所示：

const aws = require("@pulumi/aws");
const pulumi = require("@pulumi/pulumi");
const mime = require("mime");

// Create an S3 bucket
let siteBucket = new aws.s3.Bucket("s3-website-bucket");

let siteDir = "www"; // directory for content files

// For each file in the directory, create an S3 object stored in `siteBucket`
for (let item of require("fs").readdirSync(siteDir)) {
    let filePath = require("path").join(siteDir, item);
    let object = new aws.s3.BucketObject(item, {
      bucket: siteBucket,
      source: new pulumi.asset.FileAsset(filePath),     // use FileAsset to point to a file
      contentType: mime.getType(filePath) || undefined, // set the MIME type of the file
    });
}

exports.bucketName = siteBucket.bucket; // create a stack export for bucket name

现在使用基于 Vue.js / Nuxt.js 的应用程序，我需要上传多个生成的文件，这些文件位于dist我的项目根目录内。它们由 anpm run build生成并产生以下文件：

$ find dist
dist
dist/favicon.ico
dist/index.html
dist/.nojekyll
dist/200.html
dist/_nuxt
dist/_nuxt/LICENSES
dist/_nuxt/static
dist/_nuxt/static/1619685747
dist/_nuxt/static/1619685747/manifest.js
dist/_nuxt/static/1619685747/payload.js
dist/_nuxt/f3a11f3.js
dist/_nuxt/f179782.js
dist/_nuxt/fonts
dist/_nuxt/fonts/element-icons.4520188.ttf
dist/_nuxt/fonts/element-icons.313f7da.woff
dist/_nuxt/c25b1a7.js
dist/_nuxt/84fe6d0.js
dist/_nuxt/a93ae32.js
dist/_nuxt/7b77d06.js

我的问题是这些文件还包含嵌套在子目录中的文件，子目录本身也可以是子目录 - 例如dist/_nuxt/fonts/element-icons.4520188.ttf. 教程中提供的方法不会评估子目录，我不知道如何使用 Pulumi/TypeScript 来执行此操作。

Answer 1

我继续采用该方法，并尝试构建一个递归 TypeScript 函数，该函数根据教程的建议基于 Pulumi 的BucketObject创建文件或目录。这让我陷入了复杂的困境！我需要使用创建目录，使用参数内BucketObject附加可以实现什么（请参阅此答案）。仅供记录，该函数如下所示："/"key

function createS3BucketFolder(dirName: string) {
  new aws.s3.BucketObject(dirName, {
    bucket: nuxtBucket,
    acl: "public-read",
    key: dirName + "/", // an appended '/' will create a S3 Bucket prefix (see /sf/answers/4023575741/)
    contentType: "application/x-directory" // this content type is also needed for the S3 Bucket prefix
    // no source needed here!
  })
}

但这只是使用 TypeScript 递归遍历目录所需的大量代码的一部分（另请参阅有关该主题的大量答案，从同步版本到疯狂的 Node.js 11+ 异步解决方案）。我最终得到了大约 40-50 行代码，仅用于将静态站点生成的文件递归添加到 S3 - 感觉不太好，没有对此进行测试（而且我真的不明白，为什么Pulumi 不支持该用例，例如 Terraform）。

最后，我偶然发现了有关使用 Amazon S3、CloudFront、Route53 和证书管理器保护静态网站的Pulumi 教程，其中有一段关于部署速度的特殊段落，并引用了一段有趣的引言：

此示例为网站提供的每个文件创建一个 aws.S3.BucketObject。部署大型网站时，这可能会导致很长的更新，因为每个单独的文件都会被检查是否有任何更改。不使用 Pulumi 管理单个文件，而是使用 AWS CLI 直接将本地文件与 S3 存储桶同步可能会更有效。

TLDR：对于非 hello world 用例，Pulumi 文档告诉我们不要使用 Pulumi 将文件上传到 S3，而是使用 AWS CLI！因此，我重新编写了代码，仅使用 Pulumi 创建 S3 存储桶，如下所示：

import * as aws from "@pulumi/aws";

// Create an AWS resource (S3 Bucket)
const nuxtBucket = new aws.s3.Bucket("microservice-ui-nuxt-js-hosting-bucket", {
  acl: "public-read",
  website: {
    indexDocument: "index.html",
  }
});

// Export the name of the bucket
export const bucketName = nuxtBucket.id;

这将创建一个启用静态站点托管的 S3 存储桶，并可public-read通过 Pulumi 进行访问。现在使用 AWS CLI，我们可以使用以下命令将文件复制/同步到存储桶：

aws s3 sync ../dist/ s3://$(pulumi stack output bucketName) --acl public-read

使用$(pulumi stack output bucketName)我们只需获取 Pulumi 创建的 S3 Bucket 名称即可。请注意--acl public-read最后的参数，因为您必须对 S3 中的每个静态 Web 文件启用公共读取访问权限，尽管存储桶本身已经具有公共读取访问权限！