I assume you already know how to containerize your React app, if not please read this first.
Basically inside ECS:
- Create a cluster
- Create a task definition
- Create a service inside the cluster to run task based on the task definition (so service is like a task runner that runs tasks, where tasks are the running instances of task definitions and task definition is basically where you define your image/container/ports etc. and a cluster is a logical group of services)
Amazon Elastic Container Service (Amazon ECS) is a service provided by AWS to orchestrate containers. In layman's terms, consider it as a service that is specifically tailored to move your containerized applications to production.
Steps are pretty simple:
- Dockerize your app (how-to?)
- Build the container image and push it to ECR
- Create an ECS Cluster
- Create Task within the cluster
- Create Elastic Load Balancer to access the container from web
- Create service within the cluster to run the Task
Amazon Elastic Container Registry (ECR) is a service where you store your container images (like DockerHub). Consider it as npmjs of containers instead of JS packages.
Now we need to use these commands one by one to build, tag and push our container image. But before proceeding make sure you have the latest version of AWS CLI installed.
Use the following command to check that AWS CLI is correctly installed on your system.
Now go back to your terminal and enter the following command
Once aws cli has been configured, now we can run the push commands. Open up the terminal and make sure you are inside your React app's directory. Run each command shown in the popup opened up by clicking the "View push commands" button. Please note that the commands in the screenshot could be different than what you see in your popup and it's totally fine.
Once our container image has been pushed, we are now ready to use ECS and all the awesomeness it has to offer.
Give whatever name you would like (but remember it), select "create vpc", click "create".
*Note: You can also choose an existing VPC.
Now we need to add a container of the image we pushed to ECR earlier. Give a name to container and copy-paste the image URI (can be copied from ECR repositories list). Enter "80" in the port mapping field. Click "Add".
Now we need to create a service to run the task within our container. But before that, we need to create an Elastic Load Balancer.
Give a name to your Load balancer. Select VPC from the dropdown (it should be the one that was created by your ECS cluster earlier). You also have to select both of the subnets within the VPC. Click "Next: Configure Security Settings" and ignore the warning (we will add HTTPS later on) and click "Next: Configure Security Groups".
In "Register Targets" leave everything as it is, click "Next: Review". Review the changes and click "Create". Your ELB is created now. Copy the "DNS Name", as this is going to be the URL to access your container from the browser.
Once the ELB has been created, we can now create "Service" to run the "task" created within our "cluster".
Select "Fargate" as the launch type. Select the task definition we created above (my-app-task in my case), select revision as 1 (latest). Select "LATEST" in platform version, choose the cluster we created in "Cluster". Give a name to your service. Enter "1" in the "Number of tasks" field. Click "Next step".
In "Cluster VPC", select the VPC that was created by our cluster. Select both of the subnets within the VPC. In the Load balancer type, select "Application Load Balancer". Select the ELB we created earlier in the "Load balancer name" field. Select the container we created in "Container to load balance" section and click "Add to load balance"
Once you click on "Add to load balance", the section will be expanded.
From "target group name", select the "target group" we created while creating the ELB earlier and it will fill the rest of the fields for this section.
In "Auto scaling" section leave everything as it is and click "Next step". Review the settings and click "Create service". Once the service is created, you will be taken back to the services list page. Once the service we just created has an "Active" status, you can go to the browser and use the DNS Name of ELB to access the container.
Next: Attach domain to ELB