Building and Deploying a SignalR Chat Application – Part 3

Introduction

In previous few posts, We’ve been building a simple chat application and today we’ll see how to deploy it so people can start using it.

Previous posts can be accessed from the following links

• Real-Time Web using SignalR (.NET6, Browser-Client and NodeJS)
• Building and Deploying a SignalR Chat Application – Part 1
• Building and Deploying a SignalR Chat Application – Part 2

All the source code is available from GitHub repository (signalrchat branch).

Now there are many different hosting solutions available for us. Based on your expertise and/or requirement, these may differ, so feel free to use a different hosting mechanism as per your situation.

In this post, we will first create a docker image for our application. This will already give us a lot of flexibility as there are many different cloud service providers, offering managed services, to run container workloads.

Once we have a docker image for our application, we’ll deploy it to AWS LightSail container service.

Hosting Solution

The following diagram shows different components involved hosting our solution into cloud:

Docker Containers

Without going into any details of docker images and containers, check below the docker file for our application:

now we can build an image with following command

docker image build -t signalrbasicsetup .

and run a container as follows

docker run -d --rm --name signalrbasicsetup -p 5000:5000 signalrbasicsetup

here is docker image for our application:

That’s it for the docker part.

AWS Lightsail

Launched in 2016, AWS Lightsail is a virtual private server (VPS), designed for customers, developers, small business or startups to get quickly started in the AWS as it reduces the learning curve in the beginning.

It also works great with container workloads. We’ll be using it to deploy our SignalR application container.

Now, I will not go into much details of AWS LightSail, you can check my earlier post Amazon LightSail – Virtual Cloud Server for more information.

Deploying to Lightsail

First, we’ll create a container service in Lightsail.

Next, we’ll push our application’s container image to above created container service using following command

aws lightsail push-container-image --region eu-central-1 --service-name signalrbasicsetup --label signalrbasicsetup --image signalrbasicsetup

here we can see that image is being uploaded to light-sail

following picture shows that docker images area of container service which has our application image:

Notice that a public domain is also setup for our container service. Our SignalR application will be available on this endpoint.

Next, we can create a deployment for the image and we can also set the port and health-check configurations as shown below:

once done, we can click Save and Deploy, it will take few minutes and our application will be deployed and available on service’s public endpoint. All there is left it to use that URL on frontend SignalR connection configuration.

Hosting Frontend Application to S3

If you are following my posts, I have covered hosting to S3 steps in earlier post and using the same process I’ve created a bucket on S3 as shown below

Application frontend code can be bundled up with npm run build command as follows:

npm run build

This will output to a dist directory and from there I used S3 sync command to push the directory content to S3 bucket as shown below

aws s3 sync . s3://signalrchat.awsclouddemos.com --acl public-read

CloudFront Distribution

Last but not least, I’ve setup a CloudFront distribution for the S3 bucket as shown below

For more info about cloud front, check this post.

and with that application is available on https://signalrchat.awsclouddemos.com/

Summary

In this post, we saw the a very simple deployment setup for our SignalR based chat application.

We setup a docker container which gives application a great portability, the we used AWS Lightsail container service to run the container. With that our application also get a public endpoint for connectivity, which we used in our frontend application SignalR connection configuration.

Frontend application is hosted by utilizing S3 bucket static hosting capability, which is wired-up with Route53 and CloudFront distribution.

Application source code is available from GitHub repository (signalrchat branch).

you can also check the deployed application on https://signalrchat.awsclouddemos.com/

Let me know if you have some questions or comments. Till next time, Happy Coding.