Casual Developers Note

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

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブ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にデプロイして稼働させる方法を紹介します。

はじめに

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)

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

2018年12月10日 By KD コメントを書く

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

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

クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのECRとECSがあります。今回はECRとECSの入門として、ReactのDockerアプリケーションをAWS上で稼働させる方法を紹介します。

はじめに

アプリケーションをDocker化するのが主流となっている昨今において、Dockerイメージの管理やDockerコンテナの運用をクラウド上で完結させることが求められています。AWSではそのためのサービスとして、Dockerイメージ管理のためのECR、Dockerコンテナ運用のためのECSが提供されています。

今回はReactのDockerアプリケーションを対象として、AWSのECRとECSを使って、AWS上でDockerコンテナを稼働させてみましょう。

前提

以下の準備が完了している必要があります。

  • NodeJSがインストールされていること
  • Dockerがインストールされていること
  • AWS CLIがインストールされ、適切なIAMのユーザが作成済みで、プロファイルに設定されていること(AWS CLIでECSをすべて操作するにはIAMのユーザ「AmazonEC2ContainerServiceFullAccess」のロールを割り当てる必要があります)
  • AWS上にテスト用のVPCとパブリックなサブネットが構築済みであること(今回はデフォルトをそのまま使います)
  • AWS上にテスト用のセキュリティグループが構築済みであること(今回はデフォルトのセキュリティグループに、自分のIP向けにSSHポート22、HTTPポート80、TCPポート「32768–61000」を公開する設定を追加したものを使います)
  • AWSのEC2インスタンスにSSHするためのキーペアが作成済みであること(今回は「MyKeyPair」という名前で作成したものを使います)

上記のAWSの設定の意味が理解できない場合は、この記事の内容に取り組む前にIAM、EC2、VPC、AWS CLIの基礎を学んだ方が良いでしょう。

細かいバージョンは「環境」を参照してください。

ECRとは?

ECR(Elastic Container Registry)とは、AWSが提供しているDocker向けのレジストリーサービスです。Dockerのレジストリーサービスと言えばDocker社が提供しているDockerHubですが、そのAWS版です。詳しい説明は公式ドキュメントを参照してください。

ECSとは?

ECS(Elastic Container Service)とは、AWSが提供しているDocker向けのコンテナオーケストレーションサービスです。簡単に言えばAWS上でDockerコンテナを稼働させる環境と、そのコンテナをスケールするための機能が主に提供されています。使用イメージとしては、開発したDockerアプリケーションをビルドしてイメージにし、そのイメージをECRにPushして管理し、そのイメージを使ってECSでDockerコンテナを起動して運用するような感じになります。こちらも詳しくは公式ドキュメントを参照してください。

ReactのDockerアプリケーションの作成

今回の主題ではありませんが、ECRとECSを使うためにDockerアプリケーションが必要なのでReactで簡単に作成します。

ベースを作る

create-react-appでReactのサンプルアプリケーションを作り、Docker化しましょう。

$ 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

Dockerファイルの作成

ReactアプリケーションをNginxに乗せる構成にしましょう。

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 .
$ docker images | grep sample-react-ecs-app
sample-react-ecs-app   latest              1416916c000b        17 seconds ago      18.2MB
$ docker container run --rm -p 80:80 sample-react-ecs-app:latest

起動した状態でブラウザで「localhost:80」を開きます。

NewImage

OKですね。

ECRのリポジトリ作成とDockerイメージの管理

それではAWSのECRでDockerリポジトリを作っていきましょう。

ECRでリポジトリを作成する

AWSコンソールにログインし、「ECS」をクリックします。

NewImage

「Repositories」を選択し、「Get started」をクリックします。

NewImage

「Repository name」に任意のリポジトリ名(今回は「sample-react-ecs-app」)を入力し、「Next step」をクリックします。

NewImage

「Done」をクリックして完了です。

NewImage

新しいリポジトリが作成されました。

NewImage

DockerイメージをECRにPushする

リポジトリ画面の「View Push Commands」をクリックます。

NewImage

すると以下のようにPushする手順が出てきます。

NewImage

それでは、この手順通りにPushしてみましょう。(すでにDockerイメージはビルド済みですが、手順通りにビルドもしています)

$ $(aws ecr get-login --no-include-email --region us-east-1)
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
Login Succeeded
$ docker build -t sample-react-ecs-app .
$ docker tag sample-react-ecs-app:latest XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app:latest
$ docker push XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app:latest
The push refers to repository [XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app]
61b57277474b: Pushed
7f875a1274be: Pushed
42538a727f9c: Pushed
5abab21bd32e: Pushed
df64d3292fd6: Pushed
latest: digest: sha256:b6477ba3dfc6932f2d4ce911fe5b53033b31dbe57254ecb057634b9500a232a2 size: 1363

画面を確認してみましょう。

NewImage

ECRにDockerイメージがPushされていることが確認できました。

ECSによるDockerコンテナの運用

次にDockerイメージをECSで稼働させましょう。

ECSクラスターの作成

「Clusters」を選択し、「Create Cluster」をクリックします。

NewImage

「EC2 Linux + Networking」を選択し、「Next step」をクリックします。

NewImage

今回はクラスターに前半に以下を設定します。

  • Cluster name: 「sample-react-ecs-app-cluster」
  • Provisioning Model: On-Demand Instance
  • EC2 Instance type: t2.micro
  • Number of Instance: 2 (今回は2つのEC2を使います)
  • Key pair: MyKeyPair

NewImage

クラスターの後半には以下を設定します。

  • VPC: 今回のテスト用に準備したVPC
  • Subnet: 今回のテスト用に準備したパブリックなサブネットを2つ
  • Security group: 今回のテスト用に準備したセキュリティグループ
  • Container Instance IAM role: ecsInstanceRole (自動で作成される)

NewImage

「Create」をクリックします。

すると以下のようにクラスターが作成されます。作成が完了したら「View Cluster」をクリックします。

NewImage

「Registered container instances」が「2」になり、「ECS Instances」のタグをクリックすると2つのインスタンスが「ACTIVE」になっていることが確認できます。

NewImage

また、「EC2 Dashboard」を見ると、EC2インスタンスが自動的に2つ起動しています。

NewImage

これでクラスターの作成が完了しました。

ECSタスクの作成

「Task Definitions」を選択し、「Create new Task Definition」をクリックします。

NewImage

「EC2」を選択し、「Next step」をクリックします。

NewImage

「Configure task and container definitions」の前半に以下を設定します。

  • Task Definition Name: 「sample-react-ecs-app-task」
  • Network Mode: Bridge

「Container Definition」の「Add container」をクリックしてコンテナ情報を設定します。

NewImage

コンテナ情報には以下を設定します。

  • Container name: sample-react-ecs-app
  • Image: (ECRに作成したリポジトリの「Repository URI」)
  • Memory Limits: Hard limit, 128
  • Port mappings: 0:80 (Host portを「0」にすると動的ポートマッピング(dynamic host port mapping)が有効になり、同一インスタンス内に複数のDockerコンテナを起動できる)

入力が終わったら「Add」をクリックします。

NewImage

コンテナ情報が追加できたので、「Create」をクリックします。

NewImage

タスクの作成が完了しました。

NewImage

ECSタスクの実行

ECSのタスクとは、Dockerコンテナの起動コマンドです。

「Action」から「Run Task」をクリックします。

NewImage

以下を設定して、「Run Task」をクリックします。

  • Launch type: EC2
  • Cluster: sample-react-ecs-app-cluster
  • Number of tasks: 2 (Dockerコンテナの数を2つにする)
  • Placement: AZ Balanced Spread

NewImage

「Tasks」タブを選ぶと、2つのタスクが実行されています。

NewImage

タスクの「Last status」が「PENDING」から「RUNNING」になればDockerコンテナの起動が完了しています。

NewImage

試しに、1つのインスタンス内のDockerコンテナでの状況を確認してみましょう。

「EC2 Dashboard」からECSで起動したインスタンスを1つ選択して、パブリックIPアドレスを確認します。

NewImage

SSHでアクセスします。

$ ssh -i ~/.ssh/MyKeyPair.pem ec2-user@18.208.224.98
[ec2-user@ip-172-31-29-65 ~]$ docker container ls
CONTAINER ID        IMAGE                                                               COMMAND                  CREATED             STATUS              PORTS                   NAMES
ce7d4889d153        XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app   "nginx -g 'daemon of…"   6 minutes ago       Up 6 minutes        0.0.0.0:32768->80/tcp   ecs-sample-react-ecs-app-task-1-sample-react-ecs-app-fec3f4b4e9bfce947d00
91909553a102        amazon/amazon-ecs-agent:latest                                      "/agent"                 7 minutes ago       Up 7 minutes                                ecs-agent
[ec2-user@ip-172-31-29-65 ~]$ exit

以下の2つのDockerコンテナが起動しています。

  • amazon-ecs-agent: ECSエージェント(AWSのECSの機能を使うためのクライアントのプロセス)
  • sample-react-ecs-app: 今回作成したDockerアプリケーション(32768ポートで公開されている)

公開されているポートでブラウザにアクセスしてみます。

NewImage

正しく表示されました。

ここでDockerコンテナの公開ポートがECSによって自動的に決定されていることに注意してください。これは「動的ポートマッピング(dynamic host port mapping)」によるものです。

動的ポートマッピングが有効になっている場合、Dockerコンテナのホスト側のポートは「32768–61000」の範囲で設定されます。詳しくは公式ドキュメントを参照してください。

ALBによるロードバランシングの設定

ALB(Application Load Balancer)を使用することで、動的ポートマッピングされ、インスタンス内のDockerコンテナにロードバランスすることができます。

「Load Balancers」を選択し、「Create Load Balancer」をクリックします。

NewImage

「Application Load Balancer」の「Create」をクリックします。

NewImage

以下を設定し、「Next: Configure Security Settings」をクリックします。

  • Name: sample-react-ecs-app-alb
  • Scheme: internet-facing

NewImage

インスタンスを配置したVPCとサブネットを選択し、「Next: Configure Security Settings」をクリックします。

NewImage

今回はテストなのでセキュリティ設定はせずに「Next: Configure Security Groups」をクリックします。

NewImage

今回のテスト用のセキュリティグループを選択し、「Next: Configure Routing」をクリックします。

NewImage

以下を設定し、「Next: Register Targets」をクリックします。

  • Target group -> Name: sample-react-ecs-app-target-1
  • Target group -> Target type: Instance
  • Health checks -> Path: 「/index.html」

NewImage

後でECSサービスを使ってインスタンスを登録するので、ここではインスタンスを選択せずに「Next: Review」をクリックします。

NewImage

「Create」をクリックします。

NewImage

「Close」をクリックして完了です。

NewImage

ESCサービスの作成

ここまではECS上のDockerコンテナを起動するためにタスクを手動で実行してきましたが、サービスを使うことでそれを自動化できます。

対象のクラスタで「Services」タブを選択し、「Create」をクリックします。

NewImage

以下を設定し、「Next step」をクリックします。

  • Launch type: EC2
  • Task Definition: sample-react-ecs-app-task
  • Service name: sample-react-ecs-app-service
  • Number of tasks: 2
  • Placement Template: AZ Balanced Spread

NewImage

以下を設定し、「Next step」をクリックします。

  • Load balancer type: Application Load Balancer
  • Load balancer name: sample-react-ecs-app-alb
  • Target group name: sample-react-es-app-target-1

NewImage

以下を設定し、「Next step」をクリックします。

  • Service Auto Scaling: Configure Service Auto Scaling to adjust your service’s desired count
  • Minimum number of tasks: 2
  • Desired number of tasks: 2 (コンテナ2つにしてみます)
  • Maximum number of tasks: 4
  • Automatic task scaling policies -> Policy name: sample-react-ecs-scaling-policy

NewImage

「Create Service」をクリックします。

NewImage

サービスが作成されました。「View Service」をクリックします。

NewImage

タスクが2つ実行されています。

NewImage

「Events」タブを選択すると自動で実行されたイベントが確認できます。ALBのターゲットに自動的にインスタンスが登録さていることが確認できます。

NewImage

アプリケーションの稼働確認

最後にALB経由でDockerコンテナのアプリケーションの稼働を確認してみましょう。

「Load Balancers」から、今回作成したALB(sample-react-ecs-app-alb)を選択し、DNS名をコピーします。

NewImage

ブラウザにDNS名を入力すると、Reactアプリケーションの画面が表示されました。

NewImage

これでAWS上で稼働したReactのDockerアプリケーションをALBを使って公開できることが確認できました。

最後に

いかがでしたか?これでECRとECSを使って、AWS上でDockerのイメージ管理やコンテナ運用ができるようになりましたね。Dockerアプリケーションをクラウド上でどんどん運用していきましょう。それでは。

環境

  • NodeJS: v11.0.0
  • create-react-app: 2.1.1
  • Docker: 18.06.1-ce, build e68fc7a
  • AWS CLI: aws-cli/1.16.40 Python/3.7.0 Darwin/18.2.0 botocore/1.12.30

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

2018年12月3日 By KD コメントを書く

爆速でJenkinsをマスターしよう(Docker編) ~ JenkinsコンテナへのDockerインストール方法からJob DSL、Jenkins Pipelineまで ~

爆速でJenkinsをマスターしよう(Docker編) ~ JenkinsコンテナへのDockerインストール方法からJob DSL、Jenkins Pipelineまで ~

Docker上でアプリケーション開発から運用まで完結させる開発スタイルは今まさに求められています。今回はDocker前提としてDevOpsのCI/CDを実現させるために、JenkinsにDockerをインストールしてパイプラインで自動ビルドする方法を紹介します。

はじめに

以前の記事「爆速でJenkinsをマスターしよう(NodeJS編)」では、Jenkinsの基本的なインストール方法から始まり、Job DSLによる新しいジョブの作成方法、NodeJSアプリケーションの自動テスト方法、GitHubのコミットをトリガーにした自動ビルド方法を爆速で紹介しました。

今回は、JenkinsにDockerをインストールして、Jod DSLでパイプラインジョブを追加し、Jenkins Pipelineで自動ビルドする方法を紹介します。

前提

以下の準備が完了している必要があります。

  • Dockerがインストールされていること
  • GitHubのアカウントがあること
  • DockerHubのアカウントがあること

詳しいバージョンは「環境」を参照してください。

Docker入りのJenkinsのセットアップ

まずはDockerコマンドを使えるようにしたJenkinsをセットアップしましょう。

ベースを作る

必要なフォルダとファイルを作りましょう。

$ mkdir devops_jenkins_docker
$ cd devops_jenkins_docker
$ touch Dockerfile
$ touch docker-compose.yml

Dockerファイルを作る

Dockerfile

以下のようにDocker CEをJenkins内にインストールするようにします。

FROM jenkins

USER root

RUN apt-get update \
  && apt-get install -y \
  apt-utils \
  apt-transport-https \
  ca-certificates \
  curl \
  software-properties-common \
  && curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add - \
  && apt-key fingerprint 0EBFCD88 \
  && add-apt-repository \
  "deb [arch=amd64] https://download.docker.com/linux/ubuntu xenial stable" \
  && apt-get update \
  && apt-get install -y docker-ce \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists/* \
  && usermod -aG docker jenkins

RUN cd tmp/ \
  && wget https://updates.jenkins-ci.org/latest/jenkins.war \
  && mv ./jenkins.war /usr/share/jenkins/

USER jenkins

docker-compose.yml

Dockerコンテナ上でDockerコマンドを実行するために「/var/run/docker.sock」のボリュームを設定します。

version: "3"

services:
  jenkins:
    build: .
    ports:
      - 8080:8080
    volumes:
      - ./jenkins_home:/var/jenkins_home
      - /var/run/docker.sock:/var/run/docker.sock

Jenkinsの起動

それではDockerからJenkinsを起動しましょう。「/var/run/docker.sock」の権限変更を忘れずに行いましょう。

$ docker-compose up --build -d
$ docker-compose ps
             Name                            Command               State                 Ports
------------------------------------------------------------------------------------------------------------
devops_jenkins_docker_jenkins_1   /bin/tini -- /usr/local/bi ...   Up      50000/tcp, 0.0.0.0:8080->8080/tcp
$ docker-compose exec -u root jenkins chmod 666 /var/run/docker.sock
$ docker-compose logs -f jenkins
...
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  |
jenkins_1  | Jenkins initial setup is required. An admin user has been created and a password generated.
jenkins_1  | Please use the following password to proceed to installation:
jenkins_1  |
jenkins_1  | c834fdf8220943fab0454f1f0ff823ea
jenkins_1  |
jenkins_1  | This may also be found at: /var/jenkins_home/secrets/initialAdminPassword
jenkins_1  |
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
jenkins_1  | *************************************************************
...

初期化キーとして「c834fdf8220943fab0454f1f0ff823ea」をメモしておきます。

Jenkinsのセットアップ

ブラウザで「localhost:8080」にアクセスして、セットアップを完了します。

NewImage

NewImage

NewImage

NewImage

NewImage

NewImage

NewImage

Jenkinsのインストールが完了しました。

Dockerの動作確認

JenkinsからDockerが実行できるかテストしましょう。

ホーム画面から「新しいジョブ」をクリックします。

NewImage

任意のジョブ名(今回は「test_docker」)を入力し、「パイプライン」を選択し、「OK」をクリックします。

NewImage

「パイプライン」から「Pipeline script」を選択し、以下の「Script」を入力し、「保存」をクリックします。

node {
  docker.image('alpine:latest').inside {
    sh 'echo Hello Docker!'
  }
}

NewImage

「ビルド実行」をクリックしてテストを実行します。

NewImage

ビルドが成功しました。

NewImage

これでDockerがJenkinsから実行されていることを確認できました。

DockerHub用の認証情報の追加

今回は最終的にビルドしたDockerイメージをDockerHub上にPushするので、DockerHubのアカウント情報をJenkinsに追加する必要があります。

ホーム画面から「認証情報」をクリックします。

NewImage

「Jenkins」をクリックします。

NewImage

「グローバルドメイン」から「Add credentials」をクリックします。

NewImage

「ユーザー名とパスワード」を選択し、DockerHubのアカウントのユーザ名とパスワードを入力し、任意のID(今回は「dockerhub-credentials」)を付けて、「保存」をクリックします。

NewImage

追加した認証情報が表示されています。

NewImage

Job DSL用のプラグインを追加

後でJob DSLを使うので、プラグインをインストールします。

NewImage

Jenkinsの再起動が完了すればOKです。

サンプルDockerアプリケーションの作成

ベースの作成

以前の記事「爆速でJenkinsをマスターしよう(NodeJS編)」で作成したNodeJSアプリケーションをそのままDocker化して使いましょう。

$ git clone https://github.com/{your-github-account}/devops_sample_nodejs.git
$ cd devops_sample_nodejs
$ touch Dockerfile

NodeJSアプリケーションのDocker化

Docker化して動作確認をしましょう。

Dockerfile

Dockerfileを以下のように書きます。

FROM node:11-alpine

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
RUN npm install

COPY ./ ./

CMD npm start

ビルドと実行

Dockerとしてビルドができ、Docker上でコマンドが実行できることを確認しましょう。

$ docker image build -t devops_sample_nodejs:latest .
$ docker container run devops_sample_nodejs:latest
...
Next year is 2019.
2 years until Tokyo Olympic.
The tax of 100 yen is 10 yen if the tax rate is 10%.
I baked 10 cookies. There're 5 people here so you can eat 2.
$ docker container run devops_sample_nodejs:latest npm test
...
PASS test/utis.spec.js
  utils test
    math test
      ✓ should be 3 when adding 1 and 2 (7ms)
      ✓ should be -1 when subtracting 2 from 1
      ✓ should be 12 when multipying 3 by 4 (1ms)
      ✓ should be 4 when dividing 8 by 4

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.718s
Ran all test suites.
$ git add .
$ git commit -m 'Dockerize app'
$ git push origin master

OKですね。これをGitHubにPushしておきましょう。

Jenkins PipelineのためのJenkinsfileの作成

ベースを作る

パイプライン用のファイルを準備します。

$ mkdir misc
$ touch misc/Jenkinsfile

Jenkinsfileにパイプラインの設定を書く

Jenkinsfile

パイプライン上で、GitHubからのクローン、Dockerイメージのビルド、Docker内でのテスト、DockerHubへのイメージのPush、を実行するようにします。

node {
  def app

  stage('Clone repository') {
    checkout scm
  }

  stage('Build image') {
    app = docker.build('{your-dockerhub-account}/devops_sample_nodejs')
  }

  stage('Test') {
    app.inside {
      sh 'npm install --only=dev'
      sh 'npm test'
    }
  }

  stage('Push image') {
    docker.withRegistry('https://registry.hub.docker.com', 'dockerhub-credentials') {
      app.push("latest")
    }
  }
}

「{your-dockerhub-account}」は自分のDockerHubのアカウント名を置き換えてください。

Job DSLによるパイプラインジョブの追加

ベースを作る

Job DSL用のファイルを作成します。

$ touch pipeline.groovy

Job DSLの設定ファイルを書く

pipeline.groovy

Job DSLには以下のように、5分単位のポーリング、パイプライン用のJenkinsfileのパス指定、を設定します。

pipelineJob('Pipeline Basic Job') {

  def repo = 'https://github.com/{your-github-account}/devops_sample_nodejs.git'

  description("Pipeline for $repo")

  triggers {
    scm('H/5 * * * *')
  }

  definition {
    cpsScm {
      scm {
        git {
          remote { url(repo) }
          branches('master')
          scriptPath('misc/Jenkinsfile')
          extensions { }
        }
      }
    }
  }
}

「{your-github-account}」は自分のGitHubのアカウント名に置き換えてください。

GitHubにPushする

パイプライン用に作成したファイルをGitHubにPushしておきます。

$ git add .
$ git commit -m 'Add pipeline'
$ git push origin master

Job DSLから新しいJenkins Pipelineのジョブを追加する

ホーム画面から「新規ジョブ作成」から、任意の名前(今回は「seed_job」)を入力し、「フリースタイル・プロジェクトのビルド」を選択し、「OK」をクリックします。

NewImage

「ソースコード管理」の「Git」を選択し、「リポジトリURL」を入力します。

NewImage

「ビルド」の「Process Job DSLs」をクリックします。

NewImage

「DSL Scripts」にDSLファイル名を入力し、「保存」をクリックします。

NewImage

「In-process Script Approval」をクリックします。

NewImage

「Approve」をクリックします。

NewImage

これでDSLが承認されました。

NewImage

プロジェクト画面に戻って、「ビルド実行」をクリックします。

NewImage

ビルドが成功し、新しいジョブが作成されました。

NewImage

自動作成されたジョブ内容の確認

DSLで自動作成されてパイプラインジョブの設定を確認しましょう。

NewImage

「設定」をクリックします。

NewImage

「説明」が正しく設定されています。

NewImage

「スケジュール」が正しく設定されています。

NewImage

「リポジトリURL」が正しく設定されています。

NewImage

これでパイプラインジョブの設定が完了です。

CIの動作確認

最後に、Jenkins上でDockerを動かし、自動ビルドしてみましょう。

パイプラインによる自動ビルドの実行

「ビルド実行」をクリックします。(キャプチャでは、パイプラインが見やすいように予め複数回ビルドを実行してあります。)

NewImage

ビルドが成功しました。

NewImage

自動的にテストが実行されています。

NewImage

自動的にDockerイメージがDockerHubにPushされています。

NewImage

ジョブの画面に戻ると、パイプラインで実行したステージが確認できます。

NewImage

DockerHubの画面も確認してみましょう。

NewImage

正しくDockerHubにイメージがPushされています。

これで完了です。

最後に

いかがでしたか?これでDockerアプリケーションをJenkinsでビルドする方法やパイプラインの使い方をマスターできたことでしょう。今回はNodeJSベースのDockerアプリケーションですが、当然他の言語でも動きます。JenkinsとDockerを使いこなしてCI/CDを開発現場で実施していきましょう。それでは。

環境

  • Docker: 18.06.1-ce, build e68fc7a
  • Jenkins: 2.151

カテゴリ : 技術 Tips & Tutorials タグ : cicd, devops, docker, jenkins, jenkins-job-dsl, jenkins-pipeline

  • « 前のページ
  • 1
  • 2
  • 3
  • 4
  • 5
  • …
  • 7
  • 次のページ »

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

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.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 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寄付について知りたい方はこちらの記事へ

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

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

Copyright © 2023 KD - Casual Developers Notes