AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法

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)

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。

最新記事 by Keid (全て見る)

• 2020年JS周辺のバックエンド寄りの注目技術！ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
• 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
• ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日