Day 008 - 100DaysAWSIaCDevopsChallenge
I recently, on day 007 of my 100 Days of Code challenge, created an infrastructure to deploy a REST API beyand and Api Gateway. Today I am going to create an angular application that will consume the API exposed by API Gateway. The Angular application will be built and deployed in an S3 Bucket
as a static website
.
To achieve this, we will follow the steps below:
- Set up the Angular app: Create or clone the Angular app in a github repository.
- Create and configure the S3 Bucket to hosting website: Set up the S3 Bucket as static website.
- Build angular deployable files: Build the Angular application.
- Upload the bundle files to the S3 Bucket.
Prerequises
- AWS Cloud Developement Kit (CDK)
- S3 Bucket, IAM
- Typescript, Angular
Infrastructure Diagram
Build Angular App
This Angular application provides functionality to create and manage to-do lists. Users can add new tasks, view existing tasks. The app leverages Angular's powerful capabilities for efficient data binding and component-based architecture, ensuring a seamless user experience.
You can explore the complete source code and documentation in my Github repository ↗
npm install -g @angular/cli
git clone https://github.com/nivekalara237/100DaysTerraformAWSDevops.git
cd 100DaysTerraformAWSDevops/apps/todo-app
npm install
ng serve
Create and configure the S3 Bucket to hosting website
import { aws_iam as iam, aws_s3 as s3, Duration, RemovalPolicy, Stack, StackProps } from 'aws-cdk-lib'
import { Construct } from 'constructs'
import { HttpMethods } from 'aws-cdk-lib/aws-s3'
export interface WebsiteStackProps extends StackProps {
bucketName: string
}
export class WebsiteStack extends Stack {
constructor(scope: Construct, id: string, props: WebsiteStackProps) {
super(scope, id, props)
const wsBucket = new s3.Bucket(this, 'WebsiteBucketResource', {
bucketName: props.bucketName,
removalPolicy: RemovalPolicy.DESTROY,
autoDeleteObjects: true,
versioned: true,
eventBridgeEnabled: false,
websiteIndexDocument: 'index.csr.html',
websiteErrorDocument: 'index.csr.html',
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ACLS
})
wsBucket.grantRead(new iam.StarPrincipal(), '*')
wsBucket.addCorsRule({
allowedMethods: [
s3.HttpMethods.GET,
HttpMethods.HEAD, HttpMethods.DELETE,
HttpMethods.PUT, HttpMethods.POST
],
allowedOrigins: ['*'],
maxAge: Duration.minutes(30).toSeconds()
})
}
}
//stacks/website-stack.ts
-
websiteIndexDocument
: a file that should be served as the home page of your website. It specifies the name of the index file (in our case index.csr.html) that S3 should serve when a user requests the root URL of your website or any subdirectory. -
websiteErrorDocument
: It specifies the error page to display when a user encounters an error, such as a 404 Not Found error, while accessing your static website hosted on S3. In our case, we need to redirect all errors to the index file. This is necessary to avoid S3’s default 404 Object Not Found error and to allow Angular to handle routing on its own.
wsBucket.grantRead(new iam.StarPrincipal(), '*')
Allow public read in our Bucket, this line will generate role permission below:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:GetBucket*",
"s3:GetObject*",
"s3:List*"
],
"Resource": [
"arn:aws:s3:::bucket/<BUCKET_NAME>",
"arn:aws:s3:::bucket/<BUCKET_NAME>/*"
],
"Principal": "*"
}
]
}
Then, add a cross-origin access configuration to the Amazon S3 bucket by:
wsBucket.addCorsRule({...})
Deploy the entire infrastructure
cd 100DaysTerraformAWSDevops/day_008
cdk deploy --profile cdk-user --all
It will deploy three stacks Day008CdkStack
, Day008WebsiteBucketStack
and Day008LambdaLayerStack
.
Build angular deployable files
cd 100DaysTerraformAWSDevops/apps/todo-app
ng build --configuration production
The output is located in the dist/todo-app/browser directory.
Upload the bundle files to the S3 Bucket
To upload the bundle files generated previously, we have two options:
Upload files using AWS CLI
To upload files to s3 Bucket we need to install aws cli
[↗] and configure it
[↗]
Open the terminal at project root and run the following commands:
aws s3 cp dist/todo-app/browser s3://${BUCKET_NAME}/ --recursive
Rename BUCKET_NAME
with the name of your S3 bucket
Upload files using Console
- Open the S3 console [↗].
- Select the bucket
BUCKET_NAME
. - Click on the Upload button.
- Add the files or/and folder you want to upload.
- Configure additional settings if required.
- Start the upload process.
- Monitor the upload progress in the console.
- Once the upload is complete, the files will be available in the bucket.
The application is deployed and accessible at:
-
Amazon S3 Console
: Go to Amazon S3 -> Bucket -> BUCKET_NAME -> Properties tab -> Static website hosting. -
Direct URL
: You can also access it directly via http://<BUCKET-NAME>.s3-website-<REGION>.amazonaws.com.
🥳✨
We have reached the end of the article.
Thank you so much 🙂
Your can find the full source code on GitHub Repo
Top comments (0)