With Blazor, we can develop web apps using C# only and Visual Studio has Docker option now. Docker and ECS Fargate makes running web apps really easy and we do not have to worry about servers and infrastructure!
Developing web apps by C# are getting more and more interesting these days, but if you have not deployed to ECS yet, there are still difficult parts such as building an image, setting up task definitions, VPC, etc. It took me a while to figure it out, so I would like to share what I learned to deploy Blazor app in ECS with Load Balancer and SSL.
Here are steps we are covering. At step 5, we have a running containerized Blazor app.
- Build Docker Image
- Push image to ECR
- Create Cluster in ECS
- Create Task Definition in ECS
- Create Service in ECS
we cover until 5 here.
6, 7, and 8 are covered in next article - Create SSL Certificate in ACM (next article)
- Create Subnets (next article)
- Create Load Balance in EC2 (next article)
- Configure ECS Service with Load Balancer (next article)
Let’s start!!!
1. Build Docker Image
I’m creating a Blazor app using Visual Studio 2022. One thing to keep in mind here is to check Enable Docker option so that the project will be created in docker ready.
Visual studio now creates Dockerfile and it is ready to run in docker. Let’s go over what it does first.
1st section is to get the .NET image in /app directory, which will be used to copy publish files later.
2nd section is to get the .NET SDK image in /src directory. It restores dependencies, copy all the files, and then build the project. Dependencies are restored before coping files so that docker can skip restoring dependencies next time it is built.
3rd section is to publish the project.
4th section is to copy the published file onto the image pulled in 1st section and create an entry point to run the app.
Now, let ‘s build the docker image for this blazor app. One thing to note is that this Dockerfile is expected to run from the solution directory. In other word, docker build needs to be ran from /EcsBlazor directory, not /EcsBlazor/Web. This means Dockerfile is not found in current directory, so we need to specify the path for Dockerfile.
D:\>cd D:\repo\kagawa\EcsBlazorD:\repo\kagawa\EcsBlazor>docker build -t ecsblazor.web -f Web/Dockerfile .
2. Push docker image to ECR
The container image is built and ready to be pushed to ECR. First, let’s create a repository in ECR.
ECR gives us helpful commands to push your container image. Click “View push commands” and we just need to follow these commands. Depending on your file structure, docker build command needs to be modified, but since we already built image, it should be straightforward.
Once your image has been pushed, it looks like this.
3. Create Cluster in ECS
Before getting deep into ECS, let’s briefly cover ECS terminologies.
- Cluster is a group where your container apps run
- Task is a containerized app
- Task Definition is a configuration/instruction about how to create a Task, such as what image to use, how much memory & CPU, environment variable, etc.
- Service defines rules about how tasks can be accessed (Roles, VPC, Load Balancer, etc.) and how many tasks should be running, auto scaling, etc.
Blazor container image is ready. Let’s create a cluster where our container will run.
We choose “Networking only” option. This way, we can run our container in Fargate and we do not have to worry about managing servers.
Enter cluster name. Optionally, you can create VPC and subnets here. When we configure a load balancer, we will create private and public subnets though.
4. Create Task Definition
Ok, cluster has been created. What’s next is Task Definition, but what is Task Definition?
Task Definition describes what ECS needs to know about your app to run container. Since we do not have environment variables, here are what we are configuring now.
- Select FARGATE in launch type.
- Set Task memory & vCPU
- Add container
- Enter ECR image URL
- Pose port 80 in Port mappings
Select “FARGATE” for a launch type.
Setting Task memory and CPU here.
Add container. Since our image is from ECR, we copy image url from the image we pushed to ECR.
5. Create Service
We are almost there. After Service is created, we can see a running container Blazor web app!
For “Launch Type”, select FARGATE. Select the task definition we just created and enter “Service Name”
To configure Network, since this is a public facing web app, we need to use subnets with internet route.
I’m using two subnets from a different availability zone. When we set up Load Balancer, at least two Availability Zone from one subnet, so it is a good idea to create at least two subnets from a different Availability Zone. Here is the great article to create subnets. Highly recommended if you are not familiar to VPC, Subnets, etc.
Select or create a security group, which allows HTTP.
Choosing “None” for Load balancer for now to see our app runs first. Then we come back here to configure Load Balancer.
After Service is created, ECS will create the number of tasks you specified. If you see status “Active”, it succeeded to create a service.
If you go to Task Details, you can see Public IP and you can view your Blazor app now!
What’s Next?
In this article, we build a container image, pushed it to ECR and created task in ECS Fargate. Our containerized app is up and running now in ECS. Here are a few things we can improve this, and they are covered in this article!
- Spin up more tasks and configure Load Balancer to be able to handle high volume of requests.
- Apply SSL to Load Balancer so that our web app will be secure.
