Deploy React in Dev, Test, and Prod Using AWS CDK: A Complete Guide
React applications power some of the most dynamic user interfaces in today’s digital world. While developing a React app is relatively straightforward, managing its deployment lifecycle across Dev, Test, and Production environments can be complex. Enter AWS CDK (Cloud Development Kit) — an infrastructure-as-code tool that lets you define cloud resources using familiar programming languages. This guide will explore how to build, package, and deploy your React app across multiple environments using AWS CDK.
Why Use AWS CDK for React Deployments?
AWS CDK allows developers to:
Define reusable infrastructure as code.
Easily manage configurations across environments.
Integrate CI/CD pipelines for automated deployments.
Benefit from high-level abstractions with full access to AWS services.
Architecture Overview
At a high level, the deployment pipeline will:
Build the React app using a build tool like npm or yarn.
Upload the static files to an S3 bucket.
Serve the files via CloudFront for fast and secure delivery.
Use AWS CDK to define and manage environment-specific stacks.
Step-by-Step Deployment Workflow
1. Initialize Your React App
npx create-react-app my-app
cd my-app
npm run build
This produces a build/ directory containing all your static assets.
2. Set Up Your AWS CDK Project
Install CDK globally:
npm install -g aws-cdk
Initialize the CDK app:
mkdir react-cdk-deploy
cd react-cdk-deploy
cdk init app --language typescript
Install dependencies:
npm install @aws-cdk/aws-s3 @aws-cdk/aws-cloudfront @aws-cdk/aws-s3-deployment
3. Define Separate Environments
Structure your CDK app for Dev, Test, and Prod:
bin/
react-cdk-deploy.ts
lib/
dev-stack.ts
test-stack.ts
prod-stack.ts
Each stack file contains infrastructure definitions specific to its environment (bucket name, cache settings, etc.).
4. CDK Stack Example for One Environment
import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cf from 'aws-cdk-lib/aws-cloudfront';
import * as s3Deploy from 'aws-cdk-lib/aws-s3-deployment';
import { Construct } from 'constructs';
export class DevStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
const siteBucket = new s3.Bucket(this, 'DevSiteBucket', {
websiteIndexDocument: 'index.html',
publicReadAccess: true,
removalPolicy: cdk.RemovalPolicy.DESTROY,
});
const distribution = new cf.CloudFrontWebDistribution(this, 'DevDistribution', {
originConfigs: [
{
s3OriginSource: { s3BucketSource: siteBucket },
behaviors: [{ isDefaultBehavior: true }],
},
],
});
new s3Deploy.BucketDeployment(this, 'DeployDevReactApp', {
sources: [s3Deploy.Source.asset('../my-app/build')],
destinationBucket: siteBucket,
distribution,
distributionPaths: ['/*'],
});
new cdk.CfnOutput(this, 'DevSiteURL', {
value: distribution.distributionDomainName,
});
}
}
Repeat similar stack definitions for TestStack and ProdStack with environment-specific logic.
5. Deploy to Each Environment
Bootstrap your environment (if not already):
cdk bootstrap
Deploy:
cdk deploy DevStack
cdk deploy TestStack
cdk deploy ProdStack
Best Practices
Use Context Variables: Manage configuration using cdk.json or CLI context to separate environment logic.
Enable Caching & Compression: Configure CloudFront settings to optimize delivery.
Versioning: Use versioning on your S3 buckets for rollback support.
CI/CD Integration: Integrate with GitHub Actions or AWS CodePipeline to automate deployments.
Conclusion
By leveraging AWS CDK, you can automate and manage React deployments across environments efficiently. This approach enhances scalability and reliability and ensures that your infrastructure is version-controlled, testable, and easy to maintain.
Comments
Post a Comment