Scribd
Upload
2 views

CloudFormation React with ALB

This document provides a simplified CloudFormation YAML template for deploying a web application with a React.js frontend and an API backend using an Application Load Balancer. It includes the creation of a VPC with two public subnets, a security group for the ALB, an Application Load Balancer, an S3 bucket for the frontend, and a CloudFront distribution. Additional backend resources, such as Lambda functions and API Gateway, need to be defined separately.

Uploaded by

saiakkina
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

CloudFormation React with ALB

This document provides a simplified CloudFormation YAML template for deploying a web application with a React.js frontend and an API backend using an Application Load Balancer. It includes the creation of a VPC with two public subnets, a security group for the ALB, an Application Load Balancer, an S3 bucket for the frontend, and a CloudFront distribution. Additional backend resources, such as Lambda functions and API Gateway, need to be defined separately.

Uploaded by

saiakkina
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Sure, I can help you generate a CloudFormation YAML template for a web app with a

React.js frontend and an API backend using an Application Load Balancer. Keep in
mind that this is a simplified template and you might need to adjust it according
to your specific needs.

```yaml
AWSTemplateFormatVersion: '2010-09-09'
Description: CloudFormation template for a web app with React.js frontend and API
backend

Resources:
# Define the VPC
MyVPC:
Type: AWS::EC2::VPC
Properties:
CidrBlock: 10.0.0.0/16
EnableDnsSupport: true
EnableDnsHostnames: true
Tags:
- Key: Name
Value: MyVPC

# Define the subnets


PublicSubnetA:
Type: AWS::EC2::Subnet
Properties:
VpcId: !Ref MyVPC
CidrBlock: 10.0.0.0/24
AvailabilityZone: us-east-1a
MapPublicIpOnLaunch: true
Tags:
- Key: Name
Value: PublicSubnetA

PublicSubnetB:
Type: AWS::EC2::Subnet
Properties:
VpcId: !Ref MyVPC
CidrBlock: 10.0.1.0/24
AvailabilityZone: us-east-1b
MapPublicIpOnLaunch: true
Tags:
- Key: Name
Value: PublicSubnetB

# Define the security group for the ALB


LoadBalancerSecurityGroup:
Type: AWS::EC2::SecurityGroup
Properties:
GroupDescription: Security group for the Application Load Balancer
VpcId: !Ref MyVPC

# Define the Application Load Balancer


MyLoadBalancer:
Type: AWS::ElasticLoadBalancingV2::LoadBalancer
Properties:
Name: MyLoadBalancer
Subnets:
- !Ref PublicSubnetA
- !Ref PublicSubnetB
SecurityGroups:
- !Ref LoadBalancerSecurityGroup

# Define the frontend S3 bucket


FrontendBucket:
Type: AWS::S3::Bucket
Properties:
BucketName: my-frontend-bucket

# Define the frontend distribution


FrontendDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- Id: FrontendOrigin
DomainName: !GetAtt FrontendBucket.DomainName
S3OriginConfig:
OriginAccessIdentity: ''

# Define the backend API resources (e.g., Lambda functions, API Gateway)

Outputs:
FrontendURL:
Description: URL for the frontend app
Value: !GetAtt FrontendDistribution.DomainName
```

This template sets up the following resources:

1. A VPC with two public subnets in different availability zones.


2. A security group for the Application Load Balancer (ALB).
3. An Application Load Balancer spanning the specified subnets.
4. An S3 bucket for the frontend.
5. A CloudFront distribution for serving the frontend from the S3 bucket.
6. You would need to define the resources for the backend (Lambda functions, API
Gateway) separately, as it can be quite involved.

Please note that you will need to fill in more details and specific configurations
depending on your actual setup. Also, make sure to review and adjust the security
settings and configurations according to best practices and your project's
requirements.

You might also like