Deploying a Sample React App to ECS
Tags: docker, aws, react
Published: 2020-09-20 07:33:02

## Objective

To create & deploy a sample react application.

## Prerequisites

- MacOS Catalina
- Have the necessary modules for react installed
- Have docker installed
- Have `awscli` installed

## Creating the react app

Create a react app in terminal.

```
$ create-react-app sample-react-ecs-app
// if not working, try $ npx create-react-app sample-react-ecs-app
$ cd sample-react-ecs-app/
$ touch Dockerfile
$ tree -I node_modules
.
├── Dockerfile
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock
```

The contents of Dockerfile is as below:

```
// Dockerfile
FROM node:11-alpine as builder
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
COPY . .
RUN yarn build

FROM nginx:1.15-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
```

Build the image.

```
$ docker image build -t sample-react-ecs-app:latest .
Sending build context to Docker daemon  181.6MB
Step 1/10 : FROM node:11-alpine as builder
...
...
...
Successfully built 9a110f83b860
Successfully tagged sample-react-ecs-app:latest
```

Check the image.

```
$ docker images | grep sample-react-ecs-app
sample-react-ecs-app                  latest              9a110f83b860        5 minutes ago       16.6MB
```

Run the server, and in `localhost:80`, you should be able to access the following page.

```
$ docker container run --rm -p 80:80 sample-react-ecs-app:latest
172.17.0.1 - - [20/Sep/2020:06:23:55 +0000] "GET / HTTP/1.1" 200 2247 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36" "-"
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00bj8ylbl4xtij54itnx.png)

## Configurations in ECS

Open the ECS in your AWS console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1845bzqpwx7hgzx98rhj.png)

Create a new repository.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/trrbrovixbh72x67hizr.png)

We will name the repository `sample-react-ecs-app`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dtbwelzjrd345k3bvp2g.png)

Open the repository page and click `view push commands`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oq9dnrrpvff3zwoqf9dx.png)

```
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin xxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com
Login Succeeded
$ docker tag sample-react-ecs-app:latest xxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/sample-react-ecs-app:latest
$ docker push xxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/sample-react-ecs-app:latest
The push refers to repository [xxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/sample-react-ecs-app]
83f5a6793760: Pushed
a521e1bbddf5: Pushed
bf381a670956: Pushed
a61993362baf: Pushed
f1b5933fe4b5: Pushed
latest: digest: sha256:eca276a688f71fbf03d0044354ab5d693cd9090d2497b9e0c3d37ef2bd25ca2b size: 1363
```

You should see your own container in the ECS repository.

Next, we will create the cluster.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6uz6kyaor4spialoz9u3.png)

We will select the EC2 Linux + Network version.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/viewvep11f73ll6a9w8d.png)

We will name the cluster `sample-react-ecs-app-cluster`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/etq6s7tuli5lfeeycgnk.png)

We can see the cluster newly created in the AWS console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e763de0yf217ai9h1ff2.png)

The situation of the clusters can be found in the cluster page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kw32z7e6eyqiu9cd7yt8.png)

Now we will click on the `task definitions`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/469x2v50vlhzye1wfg70.png)

We will add the task as below, called `sample-react-ecs-app-task`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v20t3s4cnque608wtifq.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/net6r88rbss0k1mvhy2n.png)

Now we will run the tasks on our cluster.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/adt803ubcsv8w3y25243.png)

Now the tasks are running on the cluster.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/shn5hkxj5zekbyr2g2oi.png)

And our sample website is running on the port 32768.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sqt5dxi82xl7hx4cg84j.png)

I skipped on some parts, and I hope to update this article as much as possible.

## References

Sorry, only Japanese available.

[AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~](https://casualdevelopers.com/tech-tips/how-to-deploy-dockerized-react-application-to-aws-with-ecr-and-ecs-ec2/#i-2)