Sync a static React site to s3 with GitLab CI

Sri Koushik
Oct 30, 2018 · 2 min read

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
- npm install
- CI=false npm run build
- sh
- 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 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.


Write what you feel.

Sri Koushik

Written by |



Write what you feel.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade