Sync a static React site to S3 with GitLab CI

CI has always been a buzz topic among developers. GitLab is an unsung hero who makes the process really simple and also to achieve the need. Here is how we sync a static React site from git to s3 with the help of GitLab CI.

Create a file named .gitlab-ci.yml

deploy to s3:
 type: deploy
 image: srikoushik/aws-cli-node-docker
 script:
  - npm install
  - CI=false npm run build
  - sh sync.sh
 only:
  - dev

Specify the branch from which we want to sync. Here I have used the dev branch.

Tips: We can validate our .yml with the CI Lint tools in the GitLab CI/CD section.

Create a file named sync.sh which uses aws s3 sync command from the base image to sync the file from git to s3.

aws s3 sync build/ s3://{bucket_name} --exclude ".DS_Store/*" --cache-control "max-age=120000" --delete

--exclude(string) Exclude all files or objects from the command that matches the specified pattern.

--delete(boolean) Files that exist in the destination but not in the source are deleted during sync.

Here we are done with the coding part. Also, we need to modify some settings in GitLab. Add variables AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY in the respective repository settings.

Wrapping up:

Alright, we are done with the setup. The pipeline will be triggered whenever we push to the specified branch.

Check out to know how to deploy a static React site to s3.

Refer this for more AWS sync related commands.

Also, check out this to know more about GitLab variables.

Refer this to know more about the docker image which is used.