Mac环境下如何自动同步VS Code文件至Amazon AWS S3存储桶

第一步：搞定AWS CLI的安装与配置（核心前置步骤） #

1. 安装AWS CLI #

根据你的操作系统下载对应安装包：

• Windows：直接下载exe安装程序，一路下一步完成安装
• Mac：打开终端输入 brew install awscli（没装Homebrew先装一下）
• Linux：Ubuntu用 sudo apt install awscli，CentOS用 sudo yum install awscli

安装完成后，终端输入 aws --version，能显示版本号就说明装好了。

2. 创建AWS权限账号（IAM用户） #

直接用主账号不安全，得创建一个专门管S3同步的子账号：

• 登录AWS控制台，搜索“IAM”进入用户管理页面
• 点击「添加用户」，取个名字比如css-sync-user，勾选「访问密钥 - 编程访问」，点下一步
• 权限设置选「直接附加现有策略」，搜索AmazonS3FullAccess并勾选（新手先开全权限，后续可以缩窄到指定存储桶），点下一步完成创建
• 下载保存生成的访问密钥ID和秘密访问密钥，这玩意儿只能下一次，丢了就得重新创建用户

3. 配置AWS CLI #

打开终端输入 aws configure，然后依次输入：

• AWS Access Key ID：刚才下载的密钥ID
• AWS Secret Access Key：刚才的秘密密钥
• Default region name：填你存储桶所在的区域（比如创建桶时选的us-east-1或者cn-north-1）
• Default output format：直接回车用默认的JSON就行

第二步：先手动测试同步是否正常 #

先确保手动能传文件，避免后面自动同步踩坑：

1. 终端进入本地CSS文件所在的文件夹，比如 cd /Users/xxx/projects/my-site/css
2. 输入命令：

aws s3 sync ./ s3://你的存储桶名 --exclude "*" --include "*.css"

这个命令的意思是：把当前本地文件夹里的所有CSS文件，同步到指定的S3存储桶里，其他文件忽略。

运行完去AWS S3控制台看，CSS文件已经传上去就说明配置没问题。

第三步：设置VS Code保存时自动同步 #

用VS Code自带的任务功能，不用装插件：

1. 打开你的项目文件夹，按Ctrl+Shift+B（Windows/Linux）或Cmd+Shift+B（Mac），选择「创建tasks.json文件」，再选「Others」
2. 把自动生成的tasks.json内容替换成下面的代码，记得把你的存储桶名换成你自己的：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sync CSS to S3",
      "type": "shell",
      "command": "aws s3 sync ${fileDirname} s3://你的存储桶名/${fileDirnameRelativeToWorkspaceRoot} --exclude \"*\" --include \"*.css\"",
      "group": "none",
      "presentation": {
        "echo": false,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": false,
        "clear": false
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

这段代码会保持S3上的文件结构和本地一致，避免文件乱传。

3. 开启保存自动运行任务：
   打开VS Code设置（Ctrl+,/Cmd+,），搜索「tasks run on save」，点击「编辑 in settings.json」，添加以下内容：

"tasks.runOnSave": {
  "enabled": true,
  "tasks": [
    "Sync CSS to S3"
  ]
}

4. 测试：打开一个CSS文件改点内容保存，VS Code底部终端会自动跑同步命令，去S3控制台看，文件已经更新了。

常见问题排查 #

• 同步失败先查AWS CLI配置：终端输入 aws s3 ls s3://你的存储桶名，能列出文件说明配置没问题，报错的话大概率是密钥不对或者区域填错了
• VS Code任务没运行：先手动执行任务（Ctrl+Shift+B选「Sync CSS to S3」）看能不能成功，再检查settings.json里的runOnSave配置是否正确
• 权限不足：回去给IAM用户重新添上AmazonS3FullAccess策略，新手先别纠结细粒度权限，能用上再说

内容的提问来源于stack exchange，提问作者Julia Sanders