使用 npm 反应部署到 AWS S3 生产 - index.html 文件作为最后

Question

我有一个 React 应用程序（使用 React Create App），我想使用脚本将其上传到生产环境。我的产品是 AWS S3 存储桶。我已经向 package.json 添加了一个 "deploy" 脚本，如下所示：

"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 等）有自己的哈希码，因此它们不会被每个版本覆盖，这很好。

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

知道如何实现吗？如果有更好的脚本上传react app到S3就好了

Answer 1

如果我没记错的话，您希望 index.html 文件最后上传，这样它将包含应在您的应用程序中加载的静态 js/css 文件名（旧的 index.html 包含旧版本）对吗？

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

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

命令"syncs directories and S3 prefixes. Recursively copies new and updated files from the source directory to the destination. Only creates folders in the destination if they contain one or more files." - AWS Docs

"the --delete flag will cause the CLI to delete files that are in the destination, that are not in the source." - AWS Help

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

编辑（而不是删除旧文件）：

# 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

Answer 2

您可以先复制除 index.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 "

使用 npm 反应部署到 AWS S3 生产 - index.html 文件作为最后

React Deploying to AWS S3 production using npm - index.html file as last

javascript

amazon-s3

reactjs

webpack

react-create-app