Sync Files to S3 Bucket Via AWS CLI

Introduction
1. Install and configure the AWS CLI
2. Sync files using the AWS CLI
Conclusion

Introduction

AWS S3 is a useful resource for hosting static files, such as documents, videos, and images. One of the most popular uses for S3 is to host static websites, such as those generated by React, Vue, and Angular projects. However, manually logging into the S3 console and uploading project files can be tedious, especially if many small changes need to be made consecutively.

The AWS command-line interface (CLI) solves this problem by allowing developers to programmatically synchronize files from a local directory to an S3 bucket directly from the terminal or command-line. This can be used to deploy websites from a developer’s computer, or as part of a larger continuous deployment pipeline.

In this post, we'll discuss how to set up and use the AWS D3 sync command.

1. Install and configure the AWS CLI

If you have already downloaded and configured access keys for the AWS CLI, you can skip this step.

Follow Amazon’s documentation to install AWS CLI version 2 for your operating system. It is strongly recommended to use version 2; while the original version does receive updates, it does not support many new features.
In order to use the AWS CLI, you will need to generate access keys for your account. This gives your CLI installation programmatic access to your AWS account. In the AWS console, click on your username in the top-right and select My Security Credentials.
Select Access keys (access key ID and secret access key), then click Create New Access Key.
Select Download Key File and store the file somewhere safe. This file contains your access key ID and secret access key, which we will use in the next step. You will not be able to retrieve this file again from AWS after exiting the popup, so make sure to keep your local copy safe.
Open the command-line and run the command aws configure to set up your CLI installation. You will need the following information:

AWS Access Key ID: This is stored in the first line of the access key file you downloaded earlier.
AWS Secret Access Key: This is stored in the second line of the access key file you downloaded earlier.
Default region name: This is used when creating new AWS resources from the CLI (e.g. creating a new S3 bucket). You can set this to your preferred AWS region, or leave it blank if you do not intend to create resources from the command line.
Default output format: This sets the output format of command results. You can choose json, yaml, yaml-stream, text, or table. We recommend json for programmatic consumption or table for human-readability.

2. Sync files using the AWS CLI

Now that AWS CLI is configured in the local environment, let's see how to sync files with an S3 bucket directly from the command line.

In your terminal, navigate to your project’s output directory. This will be the root directory for a plain HTML/CSS/JS website (such as the one made in our S3 static site tutorial), build/ for a React project, or dist/ for a Vue project.
Run the following command: aws s3 sync . s3://<your-bucket-name>/ This will sync all files from the current directory to your bucket’s root directory, uploading any that are outdated or missing in the bucket.

Sync local directory with S3 bucket via AWS CLI

The previous command does not delete any files that are present in the S3 bucket but not in your local directory. This prevents accidental file deletion but requires you to manually delete files from your bucket to free up space. Adding the --delete flag to the command disables this behavior; all files missing in the local directory but present in the S3 bucket will be deleted.

Congratulations! Your S3 bucket contents should now be synced with your local directory. Be sure your updates are reflected on your static site by viewing the site in your browser. You may need to clear your browser caches to new static content to show up. If you are using AWS Cloudfront as a content delivery network (CDN), you may need to expire the caches in your Cloudfront distribution for the changes to show up on your site.