DEV Community: Yuvraj Thapa Chhetri

Nginx Deployment Made Easy: Using AWS App Runner for Web Apps

Yuvraj Thapa Chhetri — Wed, 04 Dec 2024 09:50:55 +0000

If you are planning to deploy your web application on an Nginx server without using complex infrastructure, this blog is for you.

In this blog, I demonstrate how to deploy your web application in a container on a Nginx server using AWS App Runner. AWS App Runner is a fully managed service that simplifies the process of deploying and scaling containerized web applications. So, I used simple web app or a pre-built container image and App Runner handles the rest. It automatically builds, deploys and sets up load balancing with encryption, while scaling up or down based on the traffic needs of your app- making it easy to manage without deep infrastructure expertise.

Why should we use App Runner?

AWS App Runner is a fully managed solution that makes it easier to deploy APIs and containerized web apps. some key reason to use AWS App Runner

Easy to use: App Runner allows you to launch applications directly from source code or container images with little setup, eliminating the need for advanced DevOps knowledge or complex infrastructure configurations.
Scaling: It help to scales applications up or down automatically based on demand, so you don’t need to manage infrastructure capacity.
Cost-effective: Compared to maintaining dedicated infrastructure, you only pay for the resources used when your application is processing traffic, which can help save money.
Default Secure: App Runner automatically implements SSL termination, encryption for data in transit and at rest, and other security best practices.

Let’s go to demo section.

Step 1: Create a pre-built container image

Go to Terminal on local machine or VS Code Terminal and type

mkdir nginx-web-app
cd nginx-web-app

Now, Open your nginx web app folder in VS code editor or any code editor.

Under Nginx Web App folder create a new file name as index.html and paste it with following code

<!DOCTYPE html>
<html>
<head>
<title>Web Application On Nginx Server</title>
<style>
html { color-scheme: light; }
body { width: 35em; margin: 0 auto;
font-family: Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Congratulation, you are successfully install and configure App runner on AWS cloud. </h1>
<p>If you get this page, the nginx web server is successfully installed and working properly. </p>
<p><em>Thank you for read my blog</em></p>
</body>
</html>

Now, create another file name Dockerfile and paste it with following code

FROM --platform=linux/amd64 nginx:latest
WORKDIR /usr/share/nginx/html
COPY index.html index.html

Now, create container using following command on terminal.

docker build -t nginx-web-app .

Step2: Now, transfer your container image file into Amazon ECR

Open your AWS management console and search ECR service

Click on create repository

Write your repository name
Leave as default setting and click on create button

After create a repository select your repository and click on view push command

Then paste the following command from push command to your terminal to authenticate and push the image to the repository.

Note: If you are not activate your AWS CLI then you have to configure AWS CLI on your local terminal machine or VS code terminal.

Open your terminal and type > aws configure > Paste your credential access key and secret key.

AWS Access Key ID: xxxxxxxxxxxxxxxx
AWS Secret Access Key: xxxxxxxxxxxxx
Default Region: default
Default output format: default

Now, paste the follow the command from view push command.

Step 3: After complete above process now create AWS App Runner Service

create App Runner

For Source and Deployment part leave as default just click on browse

Select your image repository and click on continue

For the deployment part leave as default only select create a new service role under ECR access role

In the service setting part leave as default other setting just change only service name and port then click next

Name: nginx-web-app-service-name
Port:80

Now, in the review and create section just review your setting and click on create and deploy

It will take few minutes you can see logs

When the app is deploying successfully you can copy default domain and paste it browser

Congratulation! Your web application has now been successfully installed on a Nginx server using AWS App Runner. Scaling and managing your app is now easier and more efficient. Now that load balancing and scaling have been integrated, your application is ready to handle incoming traffic and function effectively at different traffic levels.

Step-by-Step Guide to Creating a Serverless Web App on AWS

Yuvraj Thapa Chhetri — Wed, 06 Nov 2024 02:32:05 +0000

Introduction

In today’s digital world, creating flexible and reliable web applications has become a top priority for businesses of all sizes. With the rise of serverless architecture, developers can focus on writing code without worrying about managing servers or infrastructure. AWS provides a powerful set of tools that enable you to efficiently build serverless applications.

In this blog, we will explore the basics of building a serverless web application using AWS. We will walk through setting up your environment and deploying your application, covering key services like AWS Lambda, API Gateway, DynamoDB, and S3. By the end of this guide, you will have a solid understanding of how to leverage AWS serverless technologies to create a scalable and resilient web application that can handle fluctuating traffic while minimizing operational costs.
Let's go to practical part...

Step 1: Create S3 bucket and host a website

Bucket Name: Give a unique bucket name
Object Ownership: ACL Enable
Block all public access: uncheck and check on I acknowledge

Then click on create bucket
Now, Upload your website into your bucket

Go to bucket properties scroll down and search static website hosting and click edit

Static Website hosting: Enable
Index document : index.html

Now, go to bucket object
Select all object
Click on action tab
Click make public using ACL

Now, go back your static website hosting page and copy bucket website endpoint URL and paste it browser ensure that it is working or not

Step 2: Create a AWS Lambda function

Go to lambda and click on create function

Function Name: XXXXXX
Runtime: Python3.12

click on create function
After create a lambda function write some script and save your script from file tab

Now, click on test and configuration test event

Event name: xxxxxxxx
Event JSON: write JSON script given as picture

after save a configuration test script, click on test and see the result.

Step 3: Configure API gateway

Build REST API

Select New API

API Name: xxxxxxxxxxx
API Endpoint type: Edge-Optimize

Create Method

Method type: POST
Integration type: Lambda Function
Lambda Function Name: select your lambda function

After create lambda method you wiil get this kind of dashboard.

click on root (/) then click on Enable CORS and click Save

After enable CORS you will get option in api dashboard

Now click on deploy API

Stage: New Stage
Stage name: dev

After deploy copy and save invoke URL. You will use next step

Now Validate API
Go to resource and click on POST
Click on test
Type JSON script to test

Now click on test, you will get successfully testing report

Step 4: Create a dynamo DB

Click on create table

Table name: xxxxxxxx
Partition Key : ID

Then click on create table

Note: after create table copy table ARN, you will need later.

Now, Create IAM Policy to Lambda function
Go back to lambda function click on permission then click on Role Name link

Click on add permission then create inline policy

Write some script in JSON format

Then type policy name: xxxxxxx and click create

Now, Modify Lambda function to write to dynamo DB table
Go to lambda function code and modify

After change this code click on deploy and run test, after successfully test you can in your dyanamodb table item your name list automatically insert in your table.

Step 5: Now, Interactivity to web app

Go to your index.html change your code

After change your code just upload this index.html file into s3 bucket and run your app

Finally you can check you dynamo DB table item you have successfully add your list .

Finally, You can deploy web application without using any server. AWS serverless web applications provide a scalable and cost-effective solution for developers. By using services like AWS Lambda and API Gateway, you can focus on code rather than infrastructure management. This model reduces operational overhead and allows for rapid innovation, making it ideal for both startups and larger enterprises.

From GitHub to Production: Streamlining Deployment with CI/CD , LB and AS

Yuvraj Thapa Chhetri — Sat, 19 Oct 2024 11:09:34 +0000

Introduction

Recently, I deployed an application to AWS Cloud using GitHub, utilizing an automated CI/CD pipeline on AWS. In this blog, I focused on using AWS Code Pipeline to ensure that whenever a developer pushes code to GitHub, it is automatically deployed to the server. I have outlined the step-by-step process to set this up, making it easier for teams to streamline their deployment workflows.

Here is architecture for deployment application using AWS Code Pipeline

Why You Should Implement Application Deployment in Launch Templates ?
In today's digital landscape, businesses need to deploy applications quickly and seamlessly. Utilizing a CI/CD (Continuous Integration/Continuous Deployment) pipeline allows us to automate the process from development to production. Here are some key benefits:

Speed and Efficiency: CI/CD accelerates the development and deployment process, enabling developers to release code faster.
Quality Assurance: Automated testing helps identify bugs and issues early, improving the overall quality of the application.
Scalability: With auto-scaling features, applications can adjust resources based on demand, optimizing resource utilization and controlling costs.
Reliability: Load balancing efficiently distributes traffic, minimizing downtime and enhancing user experience.
Cost-effectiveness: Automated processes and resource scaling lead to lower operational costs, as you only use resources as needed.

Now, Let's start with practical

First, we have to create Launch Template

Go to launch template under Instances and click on create launch template

Launch Template Name: write your launch template name
Template version description: v1
In OS and Images tab: Click on quick start and select your OS according to your requirement
In instances type: Select Free tire [t2.micro] or you can select your requirement
Key pair: Create your key pair and keep it securely
Network setting: leave as execute
Firewall (Security Groups):Select create security group

---Security Group Name: write security group name
---Description: allow ssh and http (s)
---VPC: you can select your own VPC or leave as execute

Click on add security groups rule and add three security rules:

---Type: ssh / http /https
---Source type: Anywhere

Expand Advance detail In IAM instance profile: Select new IAM Profile and create role

After select create role:

----Select trusted entity: AWS Service
----Use Case: EC2 and then click on Next button
----Add permission tab: search codedeploy and select
AmazonEC2RoleforAWSCodeDeploy

In role detail tab: write role name and description then click on create role.

After create role come back advanced details under launch template and select your role

Scroll down and search for User data and write some script:

NOTE: Change the underline text according to your region

Now, Create launch template

After launch template select Auto scaling Groups

Auto scaling configuration

---Name: write your ASG name
---Launch Template: Select your template

Version: Latest (1)
Click on next
Under Network setting

---Select VPC: select default VPC or select your own VPC
---Availability Zones and subnets: Select minimum two subnets like 1a
and 1b

Click Next
Under Load balancing tab:

Select Attach a new load balancer

---Load balancer type: Network Load Balancer
---Load balancer name: write your LB name
---Load balancer scheme: Internet-facing

Under Listeners and routing:

---Protocol: TCP
---Port: 80
---Default routing (forward to): create a target group
---New target group name: Give your TG name

Under Group Size

---Desired capacity: 0
---Min desired capacity: 0
---Max desired capacity: 0

Select target tracking scaling policy

---Scaling policy name: Target tracking policy
---Metric type: Average CPU utilization
---Target Value: 50

Then click on create button and you can see there is no instances and desired capacity.

Now, go to CodeDeploy

Select Application under deploy tab and create application

Under Application Configuration:

---Application name: write your application name
---Compute platform: Select EC2/On-premises

Now, after create application click on create deployment group

Now, go back IAM dashboard and create role for deployment group

In trusted entity type > select AWS service
In use case > select CodeDeploy

Enter the role name

Select View role

then copy the ARN link of role

Paste your ARN in service role tab under Deployment group

Now Under Environment Configuration tab
Mark on Amazon EC2 Auto scaling Groups
Select your ASG

In Deployment Setting

---Deployment Configuration : Select CodeDeployDefault.OneAtAtTime

In Load Balancer Tab
Mark on Enable Load balancing
Select your target group of Application LB or Network LB
Now, Go to Pipelines under pipelines side nav bar

In pipeline setting

---Pipeline name: write your name
---Pipeline type : Select v2
---Execution mode: select Queued (pipeline type V2 required)
---Service role: Select New service role

Role name automatically appear in your role name box

Under source Tab

---Source Provider: GitHub (Version 2)]

Click on connect to GitHub

Create Connection

---Connection name: Give your connection name

Then click on connect to GitHub button

Click on Install new app

Now, Login github

Mark on Only select repositories
Select your repositories
Then click on install

now, click on connect

ensure your repository name and default Branch is correct

Under Trigger Tab
Select No filter

Skip Build Stage

Now, Configuration Deploy

Deploy provider: AWS CodeDeploy
Region: Asia Pacific (Singapore)
Application name: select your Application name
Deployment group: select your Deployment group

Click on deploy button
Then, your code will be automatically deploying
.
If there will error given as a picture below So, we have to configure auto scaling desired capacity.

Search EC2 > select auto scaling group

select your ASG and change desired capacity value given as a picture below

again, go to CodePipeline and retry stage

After deploy go to load balancer dashboard and copy DNS name and paste it any browser your application will be working.

Your application is ready now

Finally , we successfully deploy application from github to cloud. Deploying applications through a CI/CD pipeline has become an essential practice in today’s competitive market. This approach not only enhances your development process but also provides better service to your end-users.