如何借助Bitbucket Pipelines实现静态网站至AWS S3的持续部署

完全懂你的痛点——手动跑bower install再删S3全量上传太折腾了，咱们用Bitbucket Pipelines把整个流程自动化，以后改完代码推仓库就自动部署，省事儿得很。下面是一步步的实现方案：

1. 前期准备 #

• 确保你的Bitbucket仓库已经包含项目所有代码（包括bower.json）
• AWS侧：拥有配置好静态网站托管的S3存储桶，同时创建一个IAM用户，给它分配仅够操作该存储桶的最小权限，权限策略参考示例：

  {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Effect": "Allow",
              "Action": [
                  "s3:ListBucket",
                  "s3:DeleteObject",
                  "s3:PutObject",
                  "s3:PutObjectAcl"
              ],
              "Resource": [
                  "arn:aws:s3:::your-bucket-name",
                  "arn:aws:s3:::your-bucket-name/*"
              ]
          }
      ]
  }
  

• 记下这个IAM用户的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY，后续配置要用。

2. 创建Bitbucket Pipelines配置文件 #

在项目根目录新建bitbucket-pipelines.yml文件，内容如下：

image: node:16-alpine

pipelines:
  default:
    - step:
        name: 安装依赖并部署到S3
        script:
          # 全局安装Bower工具
          - npm install -g bower
          # 安装项目依赖（禁用交互式提示，避免CI流程卡住）
          - bower install --allow-root --config.interactive=false
          # 安装AWS CLI工具
          - apk add --no-cache aws-cli
          # 同步文件到S3：--delete会清理S3上本地已删除的文件，和你手动删全量效果一致但更高效
          - aws s3 sync . s3://your-bucket-name --delete --exclude ".git/*" --exclude "node_modules/*" --exclude "bower_components/.git/*"

配置细节说明： #

• 选用node:16-alpine镜像：轻量且自带npm，适配前端项目需求
• bower install的参数：--allow-root解决CI环境下root用户运行的权限问题，--config.interactive=false禁用所有交互式提问，确保自动化流程不中断
• aws s3 sync：比手动删全量再上传高效得多——仅上传改动过的文件，--delete参数同步删除S3上本地已移除的文件，完美替代你的手动操作；--exclude则过滤掉无需上传的冗余目录（如.git、node_modules里的无关文件）

3. 在Bitbucket中配置环境变量 #

1. 打开你的Bitbucket仓库，进入Settings > Pipelines > Repository variables
2. 添加两个加密变量：
   • AWS_ACCESS_KEY_ID：填入之前记下的IAM用户访问密钥ID
   • AWS_SECRET_ACCESS_KEY：填入对应的秘密访问密钥，记得勾选Secured选项加密存储

4. 测试自动部署 #

把bitbucket-pipelines.yml提交并推送到Bitbucket仓库，然后去Pipelines页面查看运行状态：

• 如果一切顺利，所有步骤会依次执行，最后你的静态站就自动部署到S3了
• 以后每次推送代码到仓库，Pipelines都会自动重复这个流程，完全不用手动干预

额外注意点 #

• 项目的.gitignore无需添加bower_components或node_modules——因为Pipelines每次都会在干净的环境中重新安装依赖，不会影响本地环境
• 若仅需特定分支（比如main分支）触发部署，可把default改成branches，示例：

  pipelines:
    branches:
      main:
        - step:
            # 步骤内容和之前一致
  

内容的提问来源于stack exchange，提问作者Kuldeep Yadav