Deploying a Svelte Application on AWS Elastic Beanstalk with CodePipeline and CloudFormation
Create a Svelte application
Creating an svelte application by this command,
npx degit sveltejs/template svelte-docker-app
cd svelte-docker-app
Our project structure like this,
Dockerizing the Svelte application
FROM node:16-alpine AS build
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build
FROM nginx:latest
COPY — from=build /app/public /usr/share/nginx/html
EXPOSE 80
Building our application and then push to the ECR repository,
docker build -t svelte-app .
Create a ECR repository
Push the svelte image on our ECR repository,
Login the ECR on your terminal,
Replace <account_id> on your AWS account ID
aws ecr get-login-password — region ap-south-1 | docker login — username AWS — password-stdin <account_id>.dkr.ecr.ap-south-1.amazonaws.com
docker tag svelte-app:latest <account_id>.dkr.ecr.ap-south-1.amazonaws.com/svelte-app:latest
docker push <account_id>.dkr.ecr.ap-south-1.amazonaws.com/svelte-app:latest
Our pushed ECR images like on this,
Create a Codecommit Repository
First create a codecommit repository,
Then create a ssh user for this repository in IAM ,
Add these codecommit policies
Then goto the security credentials and create a HTTPS Git credentials for AWS CodeCommit ,
Create buildspec.yml file
version: 0.2
phases:
pre_build:
commands:
- echo Logging in to Amazon ECR…
- aws ecr get-login-password — region ap-south-1 | docker login — username AWS — password-stdin <account_id>.dkr.ecr.ap-south-1.amazonaws.com
build:
commands:
- docker build -t svelte-app .
- docker tag svelte-app:latest <account_id>.dkr.ecr.ap-south-1.amazonaws.com/svelte-app:latest
post_build:
commands:
- echo Pushing the Docker image…
- docker push <account_id>.dkr.ecr.ap-south-1.amazonaws.com/svelte-app:latest
artifacts:
files: ‘**/*’
name: svelte-app
Push code into the codecommit repository,
Create cloudformation stack YAML
AWSTemplateFormatVersion: ‘2010–09–09’
Description: Continuous Deployment Pipeline for Svelte Web Application
Parameters:
CodeCommitRepoName:
Type: String
Description: Name of the AWS CodeCommit repository
CodeCommitBranch:
Type: String
Default: master
Description: AWS CodeCommit branch to trigger the pipeline
Resources:
CodePipelineRole:
Type: AWS::IAM::Role
Properties:
RoleName: CodePipelineRole
AssumeRolePolicyDocument:
Version: ‘2012–10–17’
Statement:
- Effect: Allow
Principal:
Service:
- codepipeline.amazonaws.com
Action:
- sts:AssumeRole
ManagedPolicyArns:
- arn:aws:iam::aws:policy/AWSCodePipeline_FullAccess
- arn:aws:iam::aws:policy/AWSCodeBuildAdminAccess
- arn:aws:iam::aws:policy/AWSCodeCommitFullAccess
- arn:aws:iam::aws:policy/AmazonS3FullAccess
- arn:aws:iam::aws:policy/AdministratorAccess-AWSElasticBeanstalk
- arn:aws:iam::aws:policy/AWSCodeDeployFullAccess
CodeBuildRole:
Type: AWS::IAM::Role
Properties:
RoleName: CodeBuildRole
AssumeRolePolicyDocument:
Version: ‘2012–10–17’
Statement:
- Effect: Allow
Principal:
Service:
- codebuild.amazonaws.com
Action:
- sts:AssumeRole
ManagedPolicyArns:
- arn:aws:iam::aws:policy/AWSCodeBuildAdminAccess
- arn:aws:iam::aws:policy/AmazonS3FullAccess
- arn:aws:iam::aws:policy/CloudWatchFullAccess
- arn:aws:iam::aws:policy/AmazonEC2ContainerRegistryFullAccess
# Corrected indentation for CodeBuildProject
CodeBuildProject:
Type: AWS::CodeBuild::Project
Properties:
Name: MySvelteAppCodeBuild
Description: AWS CodeBuild project for building and Dockerizing the Svelte web application
ServiceRole: !GetAtt CodeBuildRole.Arn
Artifacts:
Type: CODEPIPELINE
Environment:
Type: LINUX_CONTAINER
ComputeType: BUILD_GENERAL1_SMALL
Image: aws/codebuild/standard:5.0
PrivilegedMode: true
Source:
Type: CODEPIPELINE
Cache:
Type: NO_CACHE
S3Bucket:
Type: AWS::S3::Bucket
Properties:
BucketName: !Sub “${AWS::StackName}-artifacts”
Pipeline:
Type: AWS::CodePipeline::Pipeline
Properties:
Name: sveltewebapppipeline
RoleArn: !GetAtt CodePipelineRole.Arn
ArtifactStore:
Type: S3
Location: !Ref S3Bucket
Stages:
- Name: Source
Actions:
- Name: SourceAction
ActionTypeId:
Category: Source
Owner: AWS
Version: 1
Provider: CodeCommit
Configuration:
RepositoryName: !Ref CodeCommitRepoName
BranchName: !Ref CodeCommitBranch
OutputArtifacts:
- Name: SourceOutput
- Name: Build
Actions:
- Name: BuildAction
ActionTypeId:
Category: Build
Owner: AWS
Version: 1
Provider: CodeBuild
Configuration:
ProjectName: !Ref CodeBuildProject
InputArtifacts:
- Name: SourceOutput
OutputArtifacts:
- Name: BuildOutput
- Name: Deploy
Actions:
- Name: DeployAction
ActionTypeId:
Category: Deploy
Owner: AWS
Version: 1
Provider: ElasticBeanstalk
Configuration:
ApplicationName: MySvelteApp
EnvironmentName: development
InputArtifacts:
- Name: BuildOutput
Create s3 bucket
Then create a s3 bucket to store the cloud formation YAML file,
And then upload your YAML file to s3 bucket,
Create Pipeline and these IAM roles,
We need to create a codebuild project, codebuild role, codepipeline role, CodePipeline and s3 bucket this s3 bucket it stores the building artifacts by using this aws CLI command,
Replace STACK_NAME,BUCKET_NAME,CODECOMMIT_REPO_NAME your AWS resources names.
aws cloudformation create-stack — stack-name <STACK_NAME> — template-url https://<BUCKKET_NAME>.s3.ap-south-1.amazonaws.com/code_commit.yml — capabilities CAPABILITY_NAMED_IAM — parameters ParameterKey=CodeCommitRepoName,ParameterValue=<CODECOMMIT_REPO_NAME>
Once you run this command in terminal then go to the AWS console and open cloudformation stack, you will see the created resources,
Create a AWS Beanstalk
Then we create a AWS beanstalk to hosting our application,
Create application,
Then create a environment,
Then you can see the your code was uploaded into the development environment,
Then go to the CodePipeline
Check the pipeline was running correctly,
Then hit the elastic beanstalk URL you will get a screen like,
Finally our application was deployed in AWS beanstalk using CodeCommit, CodeBuild,CodePipeline.
