Front-End Web & Mobile

Deploy files stored on Amazon S3, Dropbox, or your Desktop to the AWS Amplify Console

This article was written by Nikhil Swaminathan, Sr. Product Manager, AWS.

AWS Amplify recently launched a manual deploy option, providing you with the ability to host a static web app without connecting to a Git repository. You can deploy files stored on your desktop, Amazon S3, or files stored with any cloud provider.

The Amplify Console offers fully managed hosting with features such as instant cache invalidation, atomic deploys, redirects, and custom domain management. You can now use Amplify hosting with your own CI workflows, or to quickly generate a shareable URL to share a prototype.

This post describes how to deploy files manually from several different locations.

Overview

There are three locations from where you can manually deploy files:

  1. Deploy a folder from your desktop.
  2. Deploy files from S3 – upload files to an S3 bucket to push updates to your site automatically.
  3. Any URL – upload files to your Dropbox account to host a site.

Solution

First, if you have an existing app, run the following command to create an output directory (typically named dist or public):

  1. cd my-app OR create-react-app my-app
  2. npm install
  3. npm run build

Deploy a folder from your desktop

The easiest way to host your site is to drag a folder from your desktop:

  1. Log in to the Amplify Console
  2. Choose Deploy without a Git provider
  3. On the following screen, enter your app name and the name of your environment. Every Amplify app can have multiple environments. For example, you can host both a dev and prod version of your site.
  4. Drag and drop the output folder as shown below and choose Save and Deploy
  5. That’s it! Your site should be live at https://environmentname.appid.amplifyapp.com. Try making some code changes and upload a staging version of your site by choosing Add new environment.

Deploy files from Dropbox

  1. Log in to your Dropbox account and upload your build artifacts zip file to Dropbox.
  2. Create a shared link for the uploaded zip file. The link looks like https://www.dropbox.com/s/a1b2c3d4ef5gh6/example.docx?dl=0. Change the query param at the end of the URL to “dl=1” to force the browser to download the link.
  3. From the Amplify Console, choose Deploy without a Git provider and then choose Any URL. Provide the URL and choose Save and deploy. Your site is now live!

Deploy files from Amazon S3

Many developers use S3 for static hosting. You can continue to use S3 to sync your files while also leveraging the hosting features offered by the Amplify Console. For example, you can automatically trigger updates to your site using the Amplify Console, S3, and AWS Lambda.

Set up an S3 bucket

For this example, set up an S3 bucket to automatically trigger deployments to your site on any update:

1. In the S3 console, select an existing bucket or create a new one

2. Build your app locally and upload a zipped version of your build artifacts. For this example, use the AWS CLI to upload your file to S3 (you can also use the S3 console):

cd myawesomeapp
yarn run build
cd public #build directory
zip -r myapp.zip *
aws s3 cp archive.zip s3://bucketname

3. In the Amplify Console, choose Deploy without a Git provider

4. For Method, choose Amazon S3, and for Bucket, choose the bucket you just created. The zip file that you uploaded should automatically appear in the Zip file list.

5. Choose Save and deploy. Your site should be live at https://environmentname.appid.amplifyapp.com.

Set up an S3 trigger

Now, set up an S3 trigger so that your site is updated automatically every time you push a new change. Use the same setup for a continuous delivery service such as AWS CodePipeline, or for GitLab or BitBucket pipelines.

1. In the Lambda console, create a new function with a new role by choosing Author from scratch

2. Copy the following code into the Lambda function editor:

const appId = ENTER YOUR APP ID;
const branchName = ENTER YOUR BRANCH NAME;

const aws = require("aws-sdk");
const amplify = new aws.Amplify();

exports.handler = async function(event, context, callback) {
    const Bucket = event.Records[0].s3.bucket.name;
    const objectKey = event.Records[0].s3.object.key;
    await amplify.startDeployment({
        appId,
        branchName,
        sourceUrl: `s3://${Bucket}/${objectKey}`
    }).promise();
}

3. Give the Lambda function access to S3 and the Amplify Console.

  • Choose Amazon CloudWatch Logs and then choose Manage these permissions. The IAM Console opens up in a new tab.

  • In the IAM console, on the Permissions tab, choose Attach policies. For Policy name, choose Amazon S3FullAccess.

  • To give the function access to deploy to Amplify Console, choose Add inline policy. On the Create policy screen, under Visual editor, select Amplify and then choose Review policy.

  • Choose Actions, Manual actions, and select the All Amplify actions check box. Under Resources, choose All resources and then save the policy. 

4. In the Lambda console, you should see the designer updated with the correct permissions as follows.

5. Now, add an S3 trigger for the bucket so that any updates to the S3 bucket trigger the Lambda function. On the Add trigger screen, configure the trigger with the following values:

  • Bucket: Select the S3 bucket that you used earlier.
  • Event type: Choose All object create events

Test the setup

Test to make sure that your setup works:

  1. In the S3 console (or at the command line), upload a new zip artifact.
  2. Navigate to the Amplify Console. You should see a new deployment, as shown in the following screenshot.

Success! Use this setup to automatically trigger a deployment every time you push to the S3 bucket, either from your desktop or from the continuous delivery pipeline.

Conclusion

This post showed you how to use the new manual deploy option in the Amplify Console. This gives you the ability to use the Amplify Console to host a static web app without connecting to a Git repository. You can now manually deploy files in three different ways: from your desktop, any URL, or S3. Visit the Amplify Console homepage to learn more.