React 使用 npm 部署到 AWS S3 生产环境 - 索引.html 文件作为最后一个

Question

我有一个 React 应用程序(使用 React Create App(，我想使用脚本上传到生产环境。我的生产是 AWS S3 存储桶。我已经在package.json中添加了一个"部署"脚本，如下所示：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "aws s3 cp ./build s3://app.example.com --recursive --exclude "*.DS_Store" --cache-control public,max-age=604800 --profile production-profile"
  },

这会将所有构建文件更新到生产存储桶。由于构建静态文件(css，js等(获得自己的哈希代码，因此它们不会被每个版本覆盖，这很好。

我

遇到的问题是我不希望在其他文件完成上传之前上传索引.html文件。这样，一旦索引.html被最新版本覆盖，就会自动使用新的静态文件。

知道如何实现这一目标吗？如果有更好的脚本将反应应用程序上传到 S3 会很棒。

Answer 1

您可以

先复制除索引之外的其他所有内容.html然后再复制该索引。

 "aws s3 cp ./build s3://app.example.com --recursive --exclude "*.DS_Store" --exclude "index.html" --cache-control public,max-age=604800 --profile production-profile && aws s3 cp ./build/index.html s3://app.example.com  --cache-control public,max-age=604800 --profile production-profile "

Answer 2

如果我没记错的话，您希望最后上传索引.html文件，以便它包含应在您的应用程序中加载的静态 js/css 文件名(旧索引.html包含旧版本(对吗？

那么，您可以做的是让s3删除正在上传的文件中不存在的文件：

aws s3 sync build/ s3://app.example.com --delete --exclude "*.DS_Store" --cache-control public,max-age=604800 --profile production-profile

该命令"同步目录和 S3 前缀。以递归方式将新的和更新的文件从源目录复制到目标目录。仅当文件夹包含一个或多个文件时，才在目标中创建文件夹。

"--delete 标志将导致 CLI 删除目标中不在源中的文件。">

因此，这仍然应该上传构建目录中的所有内容，但也应该删除文件的旧版本。

编辑(而不是删除旧文件(：

# Exclude the index.html file for first upload, you could probably use cp instead of sync
aws s3 sync build/ s3://app.example.com --exclude "*.DS_Store" --exclude "index.html" --cache-control public,max-age=604800 --profile production-profile
# Add it after everything else is uploaded
aws s3 sync build/index.html s3://app.example.com --exclude "*.DS_Store" --cache-control public,max-age=604800 --profile production-profile