通过gitlab实现自动部署前端项目到AWS S3

前言

在日常的开发工作中，我们经常会遇到将前端项目部署到 AWS S3 存储桶的需求。本文将介绍如何使用 GitLab CI/CD 实现自动部署前端项目到 AWS S3 存储桶。

准备工作

首先，你需要准备以下环境：

一个 GitLab 账号
一个 AWS 账号
一个 S3 存储桶

如果你没有 GitLab 账号，你可以注册一个 GitLab 账号。如果你没有 AWS 账号，你可以注册一个 AWS 账号。如果你没有 S3 存储桶，你可以在 AWS 控制台创建一个 S3 存储桶。

本地代码同步到 GitLab

首先，你需要在本地 git 仓库中添加 GitLab 的远程地址：

1	`git remote add origin your-gitlab-repo-url`

然后，你可以将你的代码推送到 GitLab：

1
2
3

git add .
git commit -m "Your commit message"
git push origin master

自动将 dist 目录同步到 AWS S3 存储桶：

这一步可以通过 GitLab CI/CD 来实现。你需要在你的项目根目录下创建一个 .gitlab-ci.yml 文件，然后在这个文件中定义一个 job 来将 dist 目录同步到 S3。并且在推送到S3之后，清除CloudFront缓存。
这个job分两个阶段，第一阶段通过build命令将前端项目编译成dist目录，第二阶段通过deploy_to_s3命令将dist目录同步到S3，并清除CloudFront缓存。

这是一个 .gitlab-ci.yml 文件的示例：

stages:
  - build
  - deploy

build:
  stage: build
  image: node:${NODE_VERSION}
  cache:
    paths:
      - node_modules/
  script:
    - yarn install --frozen-lockfile
    - yarn build
  artifacts:
    paths:
      - dist/

deploy_to_s3:
  stage: deploy
  image: python:3.7
  script:
    - pip install awscli
    - echo "Deploying to S3..."
    - aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID
    - aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY
    - aws s3 sync dist/ s3://your-s3-bucket-name
    - echo "Invalidating CloudFront cache..."
    - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
  only:
    - main
variables:
  AWS_ACCESS_KEY_ID: "你的AWS访问密钥ID"
  AWS_SECRET_ACCESS_KEY: "你的AWS秘密访问密钥"
  AWS_DEFAULT_REGION: "ap-east-1"
  CLOUDFRONT_DISTRIBUTION_ID: "你的CloudFront分配ID"

这个 job 会在每次你推送到 main 分支时运行，它首先安装了 AWS CLI，然后使用 aws s3 sync 命令将 dist 目录同步到你的 S3 存储桶。

你需要修改这个文件中的以下部分：

dist:你的前端项目的编译产物目录
your-s3-bucket-name:你的 S3 存储桶名称
AWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEY:你的 AWS 访问密钥 ID 和秘密访问密钥
main:你想部署的分支（这里是 main 分支）
AWS_DEFAULT_REGION:你想使用的 AWS 区域（这里是 ap-east-1）
CLOUDFRONT_DISTRIBUTION_ID:你的 CloudFront 分配 ID

请注意，variables 中的 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY 变量是必须的。你也可以在 GitLab CI/CD 的环境变量中设置你的 AWS 访问密钥和秘密访问密钥，以便 AWS CLI 可以访问你的 S3 存储桶。

以上就是将本地代码同步到 GitLab，并自动将 dist 目录同步到 AWS S3 存储桶的方法。

安装 GitLab Runner

GitLab Runner 是一个开源的项目，它可以帮助你在 GitLab 中自动执行 CI/CD 任务。你需要在你的 GitLab 服务器上安装 GitLab Runner。
推荐使用 Docker 容器来安装GitLab及 GitLab Runner。能够快速、轻松的安装 GitLab及 GitLab Runner。
操作步骤如下：

1.拉取 GitLab Runner 镜像

可以使用以下命令拉取gitlab镜像，也可以通过宝塔面板来拉取
docker pull gitlab/gitlab-runner:latest

2.创建 GitLab Runner 容器

你可以使用以下命令创建一个 GitLab Runner 容器。这个命令会创建一个新的 GitLab Runner 容器，并将其配置文件储存在你主机的 /srv/gitlab-runner/config 目录中（你可以根据需要更改这个目录）。

docker run -d --name gitlab-runner --restart always \
  -v /srv/gitlab-runner/config:/etc/gitlab-runner \
  -v /var/run/docker.sock:/var/run/docker.sock \
  gitlab/gitlab-runner:latest

3.注册 GitLab Runner：

接下来，你需要注册你的 GitLab Runner。首先，你需要获取你的 GitLab 实例的 URL 和注册令牌。你可以在你的 GitLab 项目的 “Settings -> CI/CD -> Runners” 页面找到这些信息。

然后，你可以运行以下命令来注册你的 Runner：

docker run --rm -t -i -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner:latest register \
  --non-interactive \
  --executor "docker" \
  --docker-image alpine:latest \
  --url "https://GITLAB_INSTANCE_URL" \
  --registration-token "PROJECT_REGISTRATION_TOKEN" \
  --description "docker-runner" \
  --tag-list "docker,aws" \
  --run-untagged="true" \
  --locked="false" \
  --access-level="not_protected"

GITLAB_INSTANCE_URL：你的 GitLab 实例的 URL
PROJECT_REGISTRATION_TOKEN：你的 GitLab 项目的注册令牌
docker-runner：Runner 的名称

下图展示了注册 GitLab Runner后的结果