Sync a static React site to s3 with GitLab CI

CI has always been a buzz topic among the 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.