5

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

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

知道如何实现这一目标吗？如果有更好的脚本可以将 React 应用程序上传到 S3，那就太好了。

4

2 回答 2

4

您可以先复制除 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 "
于 2018-02-18T21:12:46.170 回答
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

该命令“同步目录和 S3 前缀。递归地将新文件和更新文件从源目录复制到目标。如果文件夹包含一个或多个文件，则仅在目标中创建文件夹。” - AWS 文档

“--delete 标志将导致 CLI 删除目标中的文件，而不是源中的文件。” - AWS 帮助

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

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

# 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
于 2018-02-17T16:01:54.680 回答