Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法

2019年1月7日 By KD コメントを書く

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

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

AWS上にDockerアプリケーションを構築する際に、Herokuのようにコマンドラインから簡単に行いたい人には、Elastic Beanstalkを使う方法が良いでしょう。今回は、ReactのDockerアプリケーションをElastic Beanstalkを使ってAWSにデプロイして稼働させる方法を紹介します。

見出し

  • 1 はじめに
  • 2 前提
  • 3 ReactのDockerアプリケーションの準備
    • 3.1 簡単なReactのアプリケーションの作成
    • 3.2 Docker化する
    • 3.3 Gitコミットしておく
  • 4 Elastic BeanstalkによるDockerコンテナの運用
    • 4.1 ebコマンドのインストール
    • 4.2 Elastic beanstalkプロジェクトとして初期化する
    • 4.3 Elastic Beanstalkの環境(Environments)作成と起動
    • 4.4 EC2
    • 4.5 ELB
    • 4.6 S3
    • 4.7 ソースコードの変更とデプロイ
    • 4.8 Elastic BeanstalkプロジェクトにSSHする
    • 4.9 Elastic Beanstalkプロジェクトの削除
  • 5 最後に
  • 6 環境
    • 6.1 関連記事

はじめに

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」を開きます。

NewImage

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」にアクセスします。

NewImage

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」の画面を見てみましょう。

NewImage

「All Applications」に新しいプロジェクト(sample-react-eb-app)が追加されています。

NewImage

これで初期化は完了です。

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)が作成されています。クリックします。

NewImage

「Overview」を見ると正常にDockerアプリケーションが稼働しているようです。右上の「URL」をクリックします。

NewImage

今回作成したアプリケーションが表示されています。

NewImage

これで、Elastic BeanstalkでDockerアプリケーションを動かすことができました。

なお、以下のようにEC2インスタンス、ELB、S3バケットが自動的に作成されています。

EC2

NewImage

ELB

NewImage

S3

NewImage

ソースコードの変更とデプロイ

ソースコードの変更が適切に反映されるか確認してみましょう。

「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をクリックします。

NewImage

以下のように背景色が変更されています。デプロイがうまくいきました。

NewImage

なお、「Application versions」をクリックすると、デプロイしたアプリケーションのバージョンを見ることができます。

NewImage

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

以下のように赤くなり、削除のワークフローがかいしされます。

NewImage

しばらくすると全ての削除が完了します。

これで今回作った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.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

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

関連記事

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

  • Docker SwarmでDockerコンテナのオーケストレーション入門

    アプリケーションをDockerコンテナとして、本番環境で稼働させるにはオーケストレーションツールは無くてはならないもので…

  • AWS CLIにエイリアス(alias)を設定する方法

    AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。今回はAW…

  • create-react-appで作ったアプリのService Workerを無効化する方法

    create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWA…

  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

    クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのE…

カテゴリ : 技術 Tips & Tutorials タグ : aws, docker, elasticbeanstalk, react

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

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

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

関連記事

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

  • Docker SwarmでDockerコンテナのオーケストレーション入門

    アプリケーションをDockerコンテナとして、本番環境で稼働させるにはオーケストレーションツールは無くてはならないもので…

  • AWS CLIにエイリアス(alias)を設定する方法

    AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。今回はAW…

  • create-react-appで作ったアプリのService Workerを無効化する方法

    create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWA…

  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

    クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのE…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes