Sync Files to S3 Bucket Via AWS CLI
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.
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 configureto 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.
- 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
--deleteflag 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.
In this article, we discussed using the AWS CLI to programmatically synchronize files from a local directory to an AWS S3 bucket.
If you're interested in learning more about Amazon Web Services, check out The Most Complete Guide to Amazon Web Services from Beginner to Advanced Level.
We hope you enjoyed this post! Feel free to shoot me an email at firstname.lastname@example.org with any questions or comments.