ECS에 샘플 React 앱 배포

목적

샘플 반응 애플리케이션을 만들고 배포합니다.

전제 조건

맥OS 카탈리나

반응에 필요한 모듈을 설치하십시오

도커가 설치되어 있어야 함

awscli가 설치됨

반응 앱 만들기

터미널에서 반응 앱을 만듭니다.

$ 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

Dockerfile의 내용은 아래와 같습니다.

// 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

이미지를 빌드합니다.

$ 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

이미지를 확인하세요.

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

서버를 실행하고 localhost:80에서 다음 페이지에 액세스할 수 있어야 합니다.

$ 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" "-"

ECS의 구성

AWS 콘솔에서 ECS를 엽니다.

새 리포지토리를 만듭니다.

리포지토리의 이름을 sample-react-ecs-app로 지정합니다.

저장소 페이지를 열고 view push commands를 클릭합니다.

$ 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

ECS 리포지토리에 자체 컨테이너가 표시되어야 합니다.

다음으로 클러스터를 생성합니다.