AWS First Steps
LanguageEnglish
Mobile Development

Getting Started with Full-Stack Web App Development on AWS Amplify - Git-Integrated Deployment and Backend Construction

Build an automatic deployment environment for each branch through GitHub integration, and define authentication / API / storage in TypeScript with Backend Gen 2. It also supports Next.js SSR.

About 7 min read

Overview of Amplify

Amplify is a service that integrates the building and hosting of full-stack web / mobile applications. Amplify Hosting provides CI/CD integrated with Git repositories and global CDN hosting, and Amplify Backend (Gen 2) defines / deploys backend resources such as authentication, APIs, and storage with TypeScript and CDK. One of the differences compared with Vercel or Netlify is native integration with AWS services (Cognito, AppSync, DynamoDB). It supports major frameworks such as React, Next.js, Vue, Nuxt, and Angular, and supports both SSR and SSG.

Hosting and Backend

When you connect a GitHub repository to Amplify Hosting, an automatic deployment environment is prepared for each branch. You can operate the main branch as the production environment and the develop branch as the staging environment. Amplify Backend defines backend resources in TypeScript. A Cognito User Pool is built automatically for authentication, AppSync (GraphQL) or API Gateway (REST) for APIs, and S3 buckets for storage. With the npx ampx sandbox command, you can launch an independent backend environment for each developer, which prevents environment conflicts in team development.

Custom Domains and SSR

Amplify Hosting provides custom domain configuration and automatic issuance of SSL certificates. When you connect a Route 53 domain, the DNS settings are configured automatically. SSR (Server-Side Rendering) is supported for Next.js and Nuxt. On branches with previews enabled, a preview environment is created for each pull request, and when you merge after review, it is automatically deployed to the production environment. Environment variables can be set for each branch, so you can use different API endpoints for development / staging / production.

Amplify Pricing

Amplify Hosting build charges are about $0.01 per minute, hosting is about $0.023 per GB per month, and SSR requests are about $0.30 per 1 million requests (as of October 2026). For SSR, in addition to the number of requests, processing time (GB-hours) is also charged. The scope covered by the AWS Free Tier varies depending on when the account was created and the type of tier. For Amplify Backend (Gen 2), the individual charges of the AWS services you use (AppSync, DynamoDB, Cognito, S3) apply. Using the build cache shortens build times and helps keep build charges down.

Typical Use Cases

Amplify is especially well suited to cases where you want to launch the frontend and backend together quickly. For publishing React or Next.js SPA / Jamstack sites with just a push to Git, you get CDN delivery and CI/CD as a set. For full-stack apps such as members-only sites with authentication or dashboards, you can build Cognito authentication and an AppSync GraphQL API from TypeScript definitions. It is also an easy-to-use option in situations where you want to keep down the effort of building infrastructure, such as MVP development at startups or quickly building internal tools.

The Backend Gen 2 Development Style

Backend Gen 2 declares backend resources as TypeScript code. When you define resources with functions such as defineAuth, defineData, and defineStorage, they are converted to CDK internally and deployed. Because you can extend parts that the standard features do not cover by writing CDK constructs directly, it becomes easier to combine the ease of Amplify with the flexibility of CDK. When you launch npx ampx sandbox, an isolated cloud environment is prepared for each developer, and local code changes are reflected in the cloud resources. You can verify with a configuration close to production while avoiding environment conflicts in team development.

Best Practices for Builds and Branch Strategy

Amplify build steps are defined declaratively in amplify.yml. You specify commands for each of the preBuild / build / postBuild phases, and can build in the installation of dependency packages and test runs. For branch strategy, one approach is to separate the production branch and the staging branch, and review in the pull request preview environment before merging into the production branch. You set environment variables per branch and switch API endpoints and feature flags for each environment. In a monorepo configuration, you specify the app's root directory to narrow down the target, and enabling the build cache lets you avoid re-fetching dependency packages and shorten build times.

Choosing Between Amplify and Other Hosting Methods

Even within AWS, there are multiple options for web hosting. For static sites or simple SPAs where you do not mind building CI/CD yourself, a configuration of S3 and CloudFront makes it easier to keep costs down and also gives fine-grained control. On the other hand, if you want to keep an API server that runs in containers running at all times, ECS, or App Runner (no longer accepting new customers) if you already use it, are candidates, and these are outside the scope of Amplify's responsibilities. Amplify fits cases where you want to handle frontend deployment automation and code-based backend definition in one place. It is reasonable to choose according to the nature of the app: S3 and CloudFront if the requirement is only static delivery, Lambda if server-side logic is central, and App Runner too if you already use it.

Summary

Amplify is a service that integrates frontend hosting and backend construction for web applications. Through integration with Git repositories, it builds an automatic deployment environment for each branch, and it also supports Next.js SSR. With Backend Gen 2, you can define the backend in code, which helps improve productivity in full-stack development.

References (Official AWS Resources)

The primary sources for this page are the official AWS website and documentation. Check the official pages below for the latest specifications and pricing.

If this page and the official documentation disagree, treat the official documentation as authoritative.

Share

Related Services

AWS Amplify PopularA service that provides full-stack web and mobile application development and hostingAmazon CloudFront EssentialA CDN service that delivers content at high speed from edge locations around the worldAmazon Cognito PopularA service that provides authentication, authorization, and user management for web and mobile applications

Related Articles

Building a WordPress Site with Amazon Lightsail - From SSL Setup to CDN DeliveryBuild a WordPress site on Lightsail, configure SSL with Let's Encrypt, and publish it globally via CDN. This article also covers backup strategies.Accelerating Full-Stack Development - Building Cloud-Native Applications with AmplifyLearn full-stack development techniques with AWS Amplify, including frontend hosting, backend construction, and rapid application development through authentication and storage integration.Automating SSL/TLS Certificate Management with AWS Certificate Manager - From Issuance to RotationThis article explains free issuance of public certificates with ACM, DNS validation, automatic renewal, and deployment to ALB / CloudFront.

More on This Topic

Building Real-Time GraphQL APIs with AWS AppSync - Subscriptions and Resolver DesignThis article introduces design patterns that deliver real-time notifications with WebSocket-based subscriptions and integrate multiple data sources with DynamoDB / Lambda pipeline resolvers.Unifying Microservice GraphQL with AWS AppSync Merged API - Distributed Team Development in PracticeThis article explains how to merge GraphQL APIs that multiple teams develop / deploy independently into a single endpoint. It also introduces ways to avoid schema conflicts and how to design an authentication strategy.Accelerating Full-Stack Development - Building Cloud-Native Applications with AmplifyLearn full-stack development techniques with AWS Amplify, including frontend hosting, backend construction, and rapid application development through authentication and storage integration.Geolocation and Mapping - Building Geospatial Applications with Amazon Location Service and AmplifyLearn how to build geolocation and mapping applications using Amazon Location Service and AWS Amplify.GraphQL Real-Time API - Building Data-Driven Applications with AWS AppSyncLearn how to build GraphQL APIs using AWS AppSync.Live Streaming Platform - Building Low-Latency Live Streaming with Amazon IVSThis article explains how to build low-latency live streaming with Amazon Interactive Video Service (IVS). It introduces the managed infrastructure, chat integration, the real-time stage feature, and how to choose between IVS and MediaLive.Building Location-Based Applications with Amazon Location Service - Maps, Geocoding, and TrackingExplore implementation patterns for building location-based applications using four core features: map display, geocoding, route calculation, and device tracking.

Similar Articles and Services

AWS AmplifyA full-stack development platform that enables frontend developers to build and deploy backend features like authentication, APIs, and storage with minimal codeAccelerating Full-Stack Development - Building Cloud-Native Applications with AmplifyLearn full-stack development techniques with AWS Amplify, including frontend hosting, backend construction, and rapid application development through authentication and storage integration.AWS Amplify HostingA fully managed hosting service that integrates with Git repositories to automate CI/CD and global CDN delivery for frontend applicationsGraphQL Real-Time API - Building Data-Driven Applications with AWS AppSyncLearn how to build GraphQL APIs using AWS AppSync.