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

シンプルな Web API を Worker に実装する

まずは、hello, world メッセージを返すだけのシンプルな Web API を実装し、MAGELLAN で動かしてみましょう。

Worker 開発環境へ接続

Worker 開発環境に接続する様子 (↑クリックで拡大表示)

開発を始める前に、まず、先ほど起動した Worker 開発環境仮想マシンに、docker exec コマンドで接続します。Worker 開発環境では、開発用に magellan というユーザーアカウントを用意しています。接続時に、su コマンドで、magellan ユーザーアカウントに切り替えます。

docker exec -it worker-devenv su magellan

cd コマンドで、/workspace ディレクトリに移動します。

cd /workspace

Web API の仕様

HTTP(S) の GET メソッドで、/hello にアクセスすると、JSON 形式の固定データ {"message":"hello, world"} を返します。

Web API 戻り値
GET /hello
{“message”:“hello, world”}

ステップ 1 Worker の動作イメージ画像

Web API の実装

Web API 実装の様子

(↑クリックで拡大表示)

rails new コマンドで、Rails プロジェクトを作成します。最終的に、シンプルな Todo ウェブアプリを作るため、mini-todo というアプリケーション(以降アプリ)名にしています。

rails new mini-todo

以降は、いま作成した Rails プロジェクトのディレクトリ mini-todo で作業をします。cd コマンドで、mini-todo ディレクトリに移動します。

cd mini-todo

アプリ実行時に必要となる therubyracer1 の gem をインストールするために、ファイル Gemfile を修正します。

therubyracer は、ファイル Gemfile の中ほどに記述されています。コメントアウトされているので、コメントアウトを外します。

source 'https://rubygems.org'

  :
(中略)
  :

# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

  :
(以下略)

bundle install コマンドで、therubyracer の gem をインストールします。

bundle install

これで、Rails プロジェクトの準備ができました。

それでは、プログラムを実装していきます。以下のコントローラとビューを作成します。

  • GET /hello リクエストを処理するコントローラ
  • JSON 形式のメッセージ hello, world を返すビュー

コントローラは、rails generate controller コマンドで、テンプレートを生成します。コントローラ名は、hello, world メッセージを返すため、Hello コントローラとしています。

bundle exec rails generate controller hello

生成された Hello コントローラのファイル app/controllers/hello_controller.rb を次のように編集します。

class HelloController < ApplicationController
  def index
    @message = 'hello, world'
  end
end

ビューは、JSON 形式のデータを返すように、ファイル app/views/hello/index.json.jbuilder を作成します。

json.message @message

ファイル config/routes.rb を編集して、ルーティングを設定します。

Rails.application.routes.draw do
  get 'hello' => 'hello#index', defaults: { format: 'json' }
end

これで、hello, world メッセージを返す Web API ができました。

ローカルでの動作確認

ローカルでの動作確認の様子

(↑クリックで拡大表示)

デプロイをする前に、ローカルで動作を確認をします。

rails server コマンドでウェブサーバーを起動します。ホスト PC からもアクセスできるように、--binding オプションで 0.0.0.0 を指定します。

bundle exec rails server --binding=0.0.0.0

続いて、別ターミナルの Worker 開発環境から Web API にリクエストを送り、その動作を確認します。

別ターミナルから docker exec コマンドで、Worker 開発環境仮想マシンに接続します。

docker exec -it worker-devenv su magellan

Worker 開発環境にログイン後、curl コマンドで、Web API にリクエストを送ります。

curl http://localhost:3000/hello
{"message":"hello, world"}magellan@37c67f65d726:/$

上記のように {"message":"hello, world"} が表示されれば成功です。上記実行例の @37c67f65d726 の部分は、Worker 開発環境のコンテナ ID ですので、この表示と異なっていても問題ありません。

ここで使用した別ターミナルは、このあとの動作確認でも使用します。このまま終わらせずに、残しておきましょう。

rails server コマンドを実行しているターミナルに戻り、Ctrl + C(コントロールキーと c キーを同時に押します)で、ウェブサーバーを終了させます。

Docker イメージの作成

Docker イメージ作成の様子

(↑クリックで拡大表示)

続いて、作成した Rails アプリの 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 の使用例

magellan-proxy の詳細は、「MAGELLAN 用ウェブアプリケーションの作り方 」で解説しています。

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

Rails プロジェクトのルートディレクトリに、Dockerfile という名前で、ファイルを作成します。

mini-todo
├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── README.rdoc
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── public
├── test
├── tmp
└── vendor

ファイル Dockerfile には、次の内容を入力してください。

FROM ruby:2.3

ENV RAILS_ENV=production

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY Gemfile /usr/src/app/
COPY Gemfile.lock /usr/src/app/
RUN bundle install --system --without development test && rm /usr/local/lib/ruby/gems/2.3.0/cache/*.gem && rm /usr/local/bundle/cache/*.gem

COPY . /usr/src/app
RUN bundle exec rake assets:precompile

# Use magellan-proxy
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", "bundle", "exec", "rails", "server"]

# Use magellan-proxy の行以降が、magellan-proxy を Docker イメージに含める記述例です。それ以外は、MAGELLAN に関係なく、Rails アプリを Docker イメージ化する記述例です。

Dockerfile を作成したら、docker build コマンドで、Docker イメージを作成します。username の部分は、Docker Hub に登録したユーザー名に読み替えてください(以降同様)。

docker build -t username/mini-todo:1.0.0 .

作成した 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/mini-todo:1.0.0

これで、Worker 用 Docker イメージの準備ができました。

デプロイ

デプロイの様子

(↑クリックで拡大表示)

Worker 用 Docker イメージの準備ができたので、Worker を MAGELLAN にデプロイします。

MAGELLAN のデプロイでは、組織プロジェクト およびステージ と呼ばれるものが必要です。これらは、下図のような階層構造の形をとり、Worker を管理します。

組織、プロジェクトおよびステージの階層構造図

また、この他にもクライアントバージョン と呼ばれるものが必要です。

MAGELLAN アカウントを登録すると、下図の構成で組織、プロジェクトおよびステージが用意されます。

デフォルトの組織、プロジェクトおよびステージの階層構造図

この他にも、DefaultStage1 という名称のクライアントバージョン や、Owners という名称のチーム などが用意されます。これらデプロイ環境の詳しいことは、「デプロイ環境 」で解説しています。

Getting Started の「試してみよう 」や「ウェブアプリを作ってみよう 」では、この環境に Worker を配置していました。

HelloWorld Worker をデプロイをした様子

今回もこの用意された環境に、MiniTodo という名称で、Worker を配置します。

今回の Worker をデプロイをした様子

それでは、デプロイしましょう。ウェブブラウザーからコンソール にログインします。すでに、ログイン済みの場合は、ログイン画面は表示されません。そのまま次へ進んでください。

コンソールログイン画面

DefaultStage1 のリンクをクリックして、ステージ DefaultStage1 の画面に切り替えます。次表の内容に沿って、Worker 情報を入力します。

項目名
Name
MiniTodo
Image Name
username/mini-todo:1.0.0
Container Num
1
Migration Command 1 (入力しない)
Migration Command 2 (入力しない)
Environment Variables
SECRET_KEY_BASE: ****
RAILS_ENV: production
RAILS_SERVE_STATIC_FILES: true

tips用アイコン

「Environment Variables」の SECRET_KEY_BASE*** 部分は、Worker 開発環境のターミナルで、rake secret コマンドを実行した結果に置き換えてください。なお、rake secret コマンドは、Rails プロジェクトのトップディレクトリ(/workspace/mini-todo)で実行してください。

bundle exec rake secret
e9b0636975 ... (中略) ... a4b56ec99c

入力した内容に間違いがないことをよく確認して、Save ボタン画像 をクリックします。入力した内容が保存されます。

Worker 情報の保存が完了したら Worker を起動します。コンテナの起動ボタン画像 をクリックします。

これで、下図の構成で、Worker が起動しました。

今回の Worker をデプロイをした様子

ウェブブラウザーは、閉じずにそのままとしてください。このあとのステップでも使用します。

動作確認

動作確認の様子

(↑クリックで拡大表示)

Worker へのアクセスは、認証(2-legged OAuth による署名の検証)が必要です(MAGELLAN 標準設定の場合)。一般のウェブブラウザーは、認証アクセスができないため、Worker にアクセスはできません。このため、Worker へのアクセスには、認証アクセスができる MAGELLAN 専用のクライアントが必要となります。

MAGELLAN 標準設定を変更することで、認証なしアクセスが可能となります。これにより、ウェブブラウザーからでも Worker にアクセスが可能となります。これについては、「Worker にウェブビューを実装する」で実践します。

ここでは、MAGELLAN が提供する magellan-cli コマンドラインツールを使って Worker にアクセスし、Worker の動作を確認します。

magellan-cli http コマンドを使うと、認証つきの HTTP リクエストを Worker に送信できます。送信できるメソッドは、GET / POST / PUT / PATCH / DELETE の 5 種類です。

認証つきアクセスの説明画像

tips用アイコン

magellan-cli の使用にあたっては、magellan-cli login コマンドを使って、MAGELLAN にログインする必要があります。

magellan-cli を使った MAGELLAN へのログイン方法は、MAGELLAN コンソールの Authentication Tokens 画面の「How To Use」に記載されています。ターミナルに、コピー & ペーストして実行してください。

magellan-cli login -e <メールアドレス> -t <認証トークン>

また、デプロイ先の組織、プロジェクト、ステージ、クライアントバージョンが適切に選択されている必要があります。次のコマンドを順次実行してください。なお、MyOrg は今回使用している組織名に読み替えてください。

magellan-cli organization select MyOrg
magellan-cli project select DefaultProject1
magellan-cli stage select DefaultStage1
magellan-cli client_version select DefaultStage1

magellan-cli コマンドの詳細については、「magellan-cli のリファレンス 」や「デプロイ環境 」で、解説しています。

今回の GET /hello Web API をテストする場合は、magellan-cli http コマンドを次のように実行します。

magellan-cli http get /hello
{"message":"hello, world"}

これで、Worker の動作確認が、できました。

このステップのまとめ

このステップで学んだことを簡単にまとめます。

  • Worker(ウェブアプリ)の開発は、MAGELLAN を気にせずできる
  • Worker へのリクエストは、MAGELLAN を経由する
  • MAGELLAN と Worker 間の通信は独自プロトコル
  • magellan-proxy を使用すると独自プロトコルのことは気にせずに済む
    • magellan-proxy の使用は、Docker イメージを作成するときに Dockerfile で指定するだけ
  • MAGELLAN へのデプロイには、組織、プロジェクトおよびステージなどが必要
  • Worker へのアクセスは、認証(2-legged OAuth による署名の検証)が必要
    • magellan-cli コマンドラインツールを使うと認証を使ったアクセスができる
    • MAGELLAN 標準設定のままでは、ウェブブラウザーから Worker へはアクセスできない

続いて、「Worker をバージョンアップし、データベースを使用する」へ進みましょう。


  1. therubyracer は、Google が開発しているオープンソース JavaScript エンジン V8 を Ruby で使えるようにするライブラリです。 [return]