AWS上にDockerアプリケーションを構築する際に、Herokuのようにコマンドラインから簡単に行いたい人には、Elastic Beanstalkを使う方法が良いでしょう。今回は、ReactのDockerアプリケーションをElastic Beanstalkを使ってAWSにデプロイして稼働させる方法を紹介します。
はじめに
AWS上でDockerコンテナを稼働させる方法は現状は以下の4つです。
- EC2上に自前でDockerをインストールする方法(スクラッチ)
- Elastic BeanstalkでDockerを使う方法(Heroku風アプローチ)
- ECSを使う方法(AWSオリジナルのDockerホスティング)
- EKSを使う方法(Kubernetes前提)
今回はこの中で最も簡単な方法であるElastic Beanstalkを使う方法を紹介します。Heroku風にコマンドを入力するだけでDockerアプリケーションをデプロイできるのでアプリケーションエンジニアにとってはとっつきやすいと思います。それでは、簡単なReactのDockerアプリケーション作成するところから始めていきましょう。
前提
以下の準備が完了している必要があります。
- NodeJSがインストールされていること
- Dockerがインストールされていること
- AWSのアカウントがあること
- AWS CLIが使用可能であること(「AWSElasticBeanstalkFullAccess」の権限があるIAMでプロファイルの設定が完了していることを想定しています)
- AWSのキーペアが作成済みであること(この記事内では自前のキーペア「MyKeyPair」を使いますが、ebコマンドでプロジェクトを初期化する際に一緒に作ることも可能です)
細かいバージョンは「環境」を参照してください。
ReactのDockerアプリケーションの準備
まずは、今回稼働させるReactのDockerアプリケーションを作成しましょう。
簡単なReactのアプリケーションの作成
Create-react-appを使ってReactのサンプルアプリケーションを作成します。
$ npm i -g create-react-app
$ create-react-app sample-react-eb-app
$ cd sample-react-eb-app/
$ ls src/
App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js
以下のようにソースコードを少しだけ変更します。
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
React + Docker + Elastic Beanstalk = Awesome!
</p>
</header>
</div>
);
}
}
export default App;
ソースコードの変更が終わったら起動して確認してみましょう。
$ yarn start
ブラウザで「localhost:3000」を開きます。
OKですね。
Docker化する
次に、ReactのアプリケーションをDocker化しましょう。
$ touch Dockerfile
Dockerfileには以下を記載します。ReactをビルドしてNginxに乗せることにします。
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
注意点としてElastic Beanstalkと一緒に使うことを想定している場合は「EXPOSE」は必須です。なぜかというと、Elastic BeanstalkはDockerfile内のEXPOSEを見て自動的にコンテナのポートを判別しているからです。
それでは、Dockerコマンドでイメージをビルドして、起動してみましょう。
$ docker image build -t sample-react-eb-app:latest .
$ docker images | grep sample-react-eb-app
sample-react-eb-app latest 285dc7e2f91e 46 seconds ago 18.2MB
$ docker container run --rm -p 80:80 sample-react-eb-app:latest
ブラウザで「localhost:80」にアクセスします。
ReactがDockerアプリケーションとして動いていることが確認できました。
Gitコミットしておく
ここで一旦コミットしておきましょう。
$ git add .
$ git commit -m 'Dockerize app'
これで今回のアプリケーションの作成は完了です。
Elastic BeanstalkによるDockerコンテナの運用
Elastic Beanstalkをアプリケーションに適用していきましょう。
ebコマンドのインストール
Homebrewからebコマンドをインストールします。
$ brew install aws-elasticbeanstalk
$ eb --version
EB CLI 3.14.6 (Python 2.7.1)
Ebコマンドについては公式ドキュメントを呼んでおくと良いでしょう。
Elastic beanstalkプロジェクトとして初期化する
それではebコマンドを使って先程作ったReactのDockerアプリケーションを初期化し、Gitでコミットしましょう。
$ eb init
Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
6) ap-south-1 : Asia Pacific (Mumbai)
7) ap-southeast-1 : Asia Pacific (Singapore)
8) ap-southeast-2 : Asia Pacific (Sydney)
9) ap-northeast-1 : Asia Pacific (Tokyo)
10) ap-northeast-2 : Asia Pacific (Seoul)
11) sa-east-1 : South America (Sao Paulo)
12) cn-north-1 : China (Beijing)
13) cn-northwest-1 : China (Ningxia)
14) us-east-2 : US East (Ohio)
15) ca-central-1 : Canada (Central)
16) eu-west-2 : EU (London)
17) eu-west-3 : EU (Paris)
(default is 3): 1
Enter Application Name
(default is "sample-react-eb-app"):
Application sample-react-eb-app has been created.
It appears you are using Docker. Is this correct?
(Y/n): Y
Select a platform version.
1) Docker 18.06.1-ce
2) Docker 18.03.1-ce
3) Docker 17.12.1-ce
4) Docker 17.09.1-ce
5) Docker 17.06.2-ce
6) Docker 17.03.2-ce
7) Docker 1.12.6
8) Docker 1.11.2
9) Docker 1.9.1
10) Docker 1.7.1
11) Docker 1.6.2
(default is 1): 1
Note: Elastic Beanstalk now supports AWS CodeCommit; a fully-managed source control service. To learn more, see Docs: https://aws.amazon.com/codecommit/
Do you wish to continue with CodeCommit? (y/N) (default is n): n
Do you want to set up SSH for your instances?
(Y/n): Y
Select a keypair.
1) MyKeyPair
2) [ Create new KeyPair ]
(default is 1): 1
$ git add .
$ git commit -m 'Initialize elastic benastalk'
自動的にDockerプロジェクトであることを判別しています。
AWSコンソールから「Elastic Beanstalk」の画面を見てみましょう。
「All Applications」に新しいプロジェクト(sample-react-eb-app)が追加されています。
これで初期化は完了です。
Elastic Beanstalkの環境(Environments)作成と起動
Elastic Beanstalkのアプリケーションではアプリケーションの実行環境を「環境(Environments)」と言っています。今回のアプリケーション開発向けの実行環境を作りましょう。
$ eb list
$ eb create development-env
-- Events -- (safe to Ctrl+C)
$ eb list
* development-env
$ eb list -v
Region: us-east-1
Application: sample-react-eb-app
Environments: 1
* development-env : ['i-03235638342394379']
$ eb status
Environment details for: development-env
Application name: sample-react-eb-app
Region: us-east-1
Deployed Version: app-45d7-181118_161939
Environment ID: e-smwupmkrma
Platform: arn:aws:elasticbeanstalk:us-east-1::platform/Docker running on 64bit Amazon Linux/2.12.5
Tier: WebServer-Standard-1.0
CNAME: development-env.2dwjz3z3gb.us-east-1.elasticbeanstalk.com
Updated: 2018-11-19 00:24:10.555000+00:00
Status: Ready
Health: Green
この時点で環境にアプリケーションがデプロイされています。
AWSコンソールから確認してみましょう。
新しい実行環境(development-env)が作成されています。クリックします。
「Overview」を見ると正常にDockerアプリケーションが稼働しているようです。右上の「URL」をクリックします。
今回作成したアプリケーションが表示されています。
これで、Elastic BeanstalkでDockerアプリケーションを動かすことができました。
なお、以下のようにEC2インスタンス、ELB、S3バケットが自動的に作成されています。
EC2
ELB
S3
ソースコードの変更とデプロイ
ソースコードの変更が適切に反映されるか確認してみましょう。
「App.css」の「background-color」を明るめに変更してます。
App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
.App-header {
background-color: lightskyblue;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
ソースコードの変更が終わったらコミットして、Elastic Beanstalkにデプロイしてみましょう。
$ git add .
$ git commit -m 'Change background color'
$ eb deploy
$ eb health
development-env Ok 2018-11-18 16:58:58WebServer Docker running on 64bit Amazon Linux/2.12.5 total ok warning degraded severe info pending unknown
1 1 0 0 0 0 0 0
instance-id status cause health
Overall Ok
i-03235638342394379 Ok
instance-id r/sec %2xx %3xx %4xx %5xx p99 p90 p75 p50 p10 requests
Overall 0.0 - - - - - - - - -
i-03235638342394379 0.0 - - - - - - - - -
instance-id type az running load 1 load 5 user % nice % system % idle % iowait % cpu
i-03235638342394379 t2.micro 1c 38 mins 0.0 0.11 0.0 0.0 0.1 99.9 0.0
instance-id status id version ago deployments
i-03235638342394379 Deployed 2 app-17fb-181118_164828 8 mins
AWSコンソールからURLをクリックします。
以下のように背景色が変更されています。デプロイがうまくいきました。
なお、「Application versions」をクリックすると、デプロイしたアプリケーションのバージョンを見ることができます。
Gitのコミットメッセージと紐付いていています。デプロイ時点でメッセージを決めたい場合は「eb deploy -m ‘YOUR MESSAGE’」とすれば付与できます。
Elastic BeanstalkプロジェクトにSSHする
Elastic Beanstalkの実行環境にSSHしてDockerコンテナの状況を見てみましょう。
$ eb ssh
[ec2-user@ip-172-31-45-60 ~]$ sudo docker container ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
3aad113ffbe4 9ca5256ded47 "nginx -g 'daemon of…" 25 minutes ago Up 25 minutes 80/tcp heuristic_keldysh
[ec2-user@ip-172-31-45-60 ~]$ exit
Dockerfileで設定した通りNginxとして80ポートで起動しています。
Elastic Beanstalkプロジェクトの削除
最後に、今回作ったElastic Beanstalkの環境をすべて削除しましょう。
$ eb terminate --all
The application "sample-react-eb-app" and all its resources will be deleted.
This application currently has the following:
Running environments: 1
Configuration templates: 0
Application versions: 2
To confirm, type the application name: sample-react-eb-app
以下のように赤くなり、削除のワークフローがかいしされます。
しばらくすると全ての削除が完了します。
これで今回作ったElastic Beanstalkのプロジェクトはもちろん、自動で生成されたEC2、ELBもすべて削除されました。S3バケットに関しては中身のログファイルは削除されますが、バケット自体は残るので、不要であれば削除してください。
最後に
いかがでしたか？これでReactのDockerアプリケーションをElastic Beanstalkを使って稼働させることができるようになったことでしょう。それでは。
環境
- NodeJS: v11.0.0
- Docker: 18.06.1-ce, build e68fc7a
- create-react-app: 2.1.1
- Homebrew: 1.8.1
- AWS CLI: aws-cli/1.16.40 Python/3.7.0 Darwin/18.2.0 botocore/1.12.30
- eb: EB CLI 3.14.6 (Python 2.7.1)
最新記事 by Keid (全て見る)
- DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編) - 2019年5月20日
- FormikでReactのフォームを華麗に扱う方法 - 2019年4月12日
- React Hooksを試してみよう！(useStateとuseEffect編) - 2019年4月5日
関連記事
y says
2019年4月2日 at 1:31 PM$ brew intall aws-elasticbeanstalk
こちらのコマンドですが、install ではなくintall になっていると思います♀️