ウェブアプリを作ってみよう

Docker イメージを作る

Worker は、Docker コンテナとして動くため、先ほど実装した Worker の Docker イメージを作りましょう。

Docker イメージを作成する

Docker イメージ作成の様子 (↑クリックで拡大表示)

テキストエディタで、Dockerfile というファイル名のファイルを新規に作成します。内容は、次のとおりです。

FROM magellan/node:onbuild

docker build コマンドで、Docker イメージを作成します。username の部分は、Docker Hub に登録したアカウントのユーザー名に読み替えてください。

docker build -t username/node-helloworld .

docker build コマンドが終了したら、docker images コマンドで、作成された Docker イメージを確認しておきましょう。

docker images

docker build コマンドで作成した Docker イメージ(username/node-helloworld)と、Dockerfile の FROM 行で指定した magellan/node Docker イメージが、次のようにリスト表示されます(REPOSITORY と TAG 欄以外の値は、異なります)。

REPOSITORY                   TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
username/node-helloworld     latest              498f6d048b97        2 minutes ago       53.27 MB
magellan/node                onbuild             26186196966d        About an hour ago   35.87 MB

Docker コンテナでの動作を確認する

Docker コンテナの動作を確認する様子 (↑クリックで拡大表示)

作成した Docker イメージを使って、Worker の Docker コンテナ上での動作を確認しておきましょう。

docker run コマンドを次のように実行します。

docker run --name hello-world -p 3000:3000 -d username/node-helloworld

Docker コンテナが起動しているかどうかを docker ps コマンドで確認します。

docker ps

次のように、IMAGE 欄が username/node-helloworld の行が表示されているかを確認します。CONTAINER ID、CREATED および STATUS の欄は、値が異なっていても問題ありません。

CONTAINER ID        IMAGE                        COMMAND             CREATED             STATUS              PORTS                    NAMES
fc796e27a53c        username/node-helloworld     "npm start"         5 seconds ago       Up 4 seconds        0.0.0.0:3000->3000/tcp   hello-world

それでは、Worker にアクセスしてみましょう。今回は、curl コマンドを使います。

curl http://localhost:3000/

次のような HTML が表示されます。My name is fc796e27a53c.fc796e27a53c は、docker ps コマンド実行結果の CONTAINER ID 欄の値と同じ値が出力されます。

<!DOCTYPE html><html><head><title>Hello World</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body><div class="content clearfix"><div class="balloon"><h1>Hello World</h1><p>My name is fc796e27a53c.</p></div><p class="robo"><img src="/images/magellan_robo.png" alt="MAGELLAN Robot" width="300" height="340"></p></div></body></html>

これで、Worker の Docker コンテナ上での動作が確認できました。この Docker コンテナは不要なため終了し破棄します。次のコマンドを実行します。

docker stop hello-world && docker rm hello-world

停止と破棄ができたかどうかを、docker ps -a コマンドで確認します。

docker ps -a

次のように、先ほどの docker ps コマンドで確認した Docker コンテナの行が表示されていなければ成功です。

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

magellan-proxy を使って Docker イメージを作成する

Docker イメージを再作成する様子 (↑クリックで拡大表示)

ウェブブラウザーから Worker へのアクセス(リクエスト)は、MAGELLAN を経由します。この経由先の MAGELLAN と Worker 間の通信プロトコルは、MAGELLAN 独自プロトコルとなっています。

ウェブブラウザー - Worker 間の通信仕様

このため、Worker(ウェブアプリ)は、MAGELLAN 独自プロトコルに対応しなければ、ウェブブラウザーからのリクエストを受け付けできません。

そこで、MAGELLAN では、ウェブアプリ側で、MAGELLAN 独自プロトコルに対応しなくても良いように、magellan-proxy というツールを用意しています。magellan-proxy は、HTTP/HTTPS - MAGELLAN 独自プロトコル間の通信プロトコルを相互変換します。

この magellan-proxy は、下図のように、MAGELLAN とウェブアプリの間に、挟み込んで使用します。また、magellan-proxy とウェブアプリは、1 つの Worker として組み立てます。

magellan-proxy の使用例

それでは、上図の構成となるように、Worker 用の Docker イメージを作りましょう。

Dockerfile の内容を次のように変更してください(2 行目以降を追加)。

FROM magellan/node:onbuild

ENV MAGELLAN_PROXY_VERSION=0.1.4

ADD https://github.com/groovenauts/magellan-proxy/releases/download/v${MAGELLAN_PROXY_VERSION}/magellan-proxy-${MAGELLAN_PROXY_VERSION}_linux-amd64 /usr/local/bin/magellan-proxy
RUN chmod +x /usr/local/bin/magellan-proxy

CMD ["/usr/local/bin/magellan-proxy", "--port", "3000", "npm", "start"]

magellan-proxy については、「MAGELLAN 用ウェブアプリケーションの作り方 」で詳しく解説しています。magellan-proxy を使った Dockerfile の内容についても、詳しくはそちらを参照してください。

docker build コマンドで、Docker イメージを再作成します。

docker build -t username/node-helloworld .

docker build コマンドが終了したら、先ほどと同様に、docker images コマンドで、再作成した Docker イメージを確認しておきましょう。

docker images

再作成した Docker イメージの IMAGE ID と VIRTUAL SIZE の欄が大きく異なっているはずです。

REPOSITORY                   TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
username/node-helloworld     latest              634a19399806        28 minutes ago      80.53 MB

magellan-proxy を組み込んだ Docker イメージは、MAGELLAN の実行環境を前提とするためローカル環境では動きません。

作成した Docker イメージを MAGELLAN で動かすために、Docker Hub へ登録します。Docker イメージの Docker Hub への登録には、docker login コマンドで、Docker Hub にログインしておく必要があります。

docker login

Docker Hub へのログインでは、ユーザー名、パスワードおよびメールアドレスの入力を順次促されます。Docker Hub に登録したアカウント情報を入力してください。なお、パスワード入力は、画面にエコーバックしません。

Username: username
Password:
Email: username@example.jp

ログインに成功したら、docker push コマンドで、再作成した Docker イメージを Docker Hub に登録します。

docker push username/node-helloworld

これで Hello World ウェブアプリを MAGELLAN にデプロイする準備が整いました。最後の「デプロイをする」へ進みましょう。