Getting started with Amplify Hosting
To help you understand how Amplify Hosting works, this tutorial walks you through building and deploying a Next.js application from a Git repository.
Topics
Prerequisites
Before you begin this tutorial, complete the following prerequisites.
- Sign up for an AWS account
-
If you are not already an AWS customer, you need to create an AWS account
by following the online instructions. Signing up enables you to access Amplify and other AWS services that you can use with your application. - Create an application
Create a basic Next.js application to use for this tutorial, using the create-next-app
instructions in the Next.js documentation. - Create a Git repository
-
Amplify supports GitHub, Bitbucket, GitLab, and AWS CodeCommit. Push your
create-next-app
application to your Git repository.
Step 1: Connect a Git repository
In this step, you connect your Next.js application in a Git repository to Amplify Hosting.
To connect an app in a Git repository
-
Open the Amplify console
. -
If you are deploying your first app in the current Region, by default you will start from the AWS Amplify deployment page.
-
Choose Get Started at the top of the page.
-
At the bottom of the page, locate the Amplify Hosting section, and choose Get started.
-
-
On the Get started with Amplify Hosting page, choose your Git repository provider, then choose Continue.
For GitHub repositories, Amplify uses the GitHub Apps feature to authorize Amplify access. For more information about installing and authorizing the GitHub App, see Setting up Amplify access to GitHub repositories.
Note
After you authorize the Amplify console with Bitbucket, GitLab, or AWS CodeCommit, Amplify fetches an access token from the repository provider, but it doesn’t store the token on the AWS servers. Amplify accesses your repository using deploy keys installed in a specific repository only.
-
On the Add repository branch page do the following:
-
In the Recently updated repositories list, select the name of the repository to connect.
-
In the Branch list, select the name of the repository branch to connect.
-
Choose Next.
-
Step 2: Confirm the build settings
Amplify automatically detects the sequence of build commands to run for the branch you are deploying. In this step you review and confirm your build settings.
To confirm the build settings for an app
-
On the Build settings page, verify that the build commands are correct.
-
Verify that the build output directory is correct. For this Next.js example app, the
baseDirectory
is set to.next
. -
The procedure for adding a service role varies depending on whether you want to use an existing role or create a new one.
-
To use an existing role:
Choose Use an existing role.
-
In the service role list, select the role to use.
-
To create a new role:
-
Choose Create and use a new service role.
-
-
-
Choose Next.
Step 3: Deploy the application
In this step you deploy your app to the AWS global content delivery network (CDN).
To save and deploy an app
-
On the Review page, confirm that your repository details and app settings are correct.
-
Choose Save and deploy. Your front end build typically takes 1 to 2 minutes, but can vary based on the size of the app.
-
When the deployment is complete, you can view your app using the link to the
amplifyapp.com
default domain.
Note
To augment the security of your Amplify applications, the
amplifyapp.com domain is registered in the Public Suffix List (PSL)__Host-
prefix if you
ever need to set sensitive cookies in the default domain name for your Amplify
applications. This practice will help to defend your domain against cross-site request
forgery attempts (CSRF). For more information see the Set-Cookie
Step 4: (Optional) clean up resources
If you no longer need the app you deployed for the tutorial, you can delete it. This step helps ensure that you aren't charged for resources that you aren't using.
To delete an app
-
From the Actions menu on the upper right, choose Delete app.
-
In the Delete your app confirmation window, enter
delete
. Then choose Delete.
Add features to your app
Now that you have an app deployed to Amplify, you can explore some of the following features that are available to your hosted application.
- Environment variables
Applications often need configuration information at runtime. These configurations can be database connection details, API keys, or parameters. Environment variables provide a way to expose these configurations at build time. For more information, see Environment variables.
- Custom domains
In this tutorial, Amplify hosts your app for you on the default
amplifyapp.com
domain with a URL such ashttps://branch-name.d1m7bkiki6tdw1.amplifyapp.com
. When you connect your app to a custom domain, users see that your app is hosted on a custom URL, such ashttps://www.example.com
. For more information, see Setting up custom domains.- Pull request previews
Web pull request previews offer teams a way to preview changes from pull requests (PRs) before merging code to a production or integration branch. For more information, see Web previews for pull requests.
- Manage multiple environments
To learn how Amplify works with feature branches and GitFlow workflows to support multiple deployments, see Feature branch deployments and team workflows.