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

開発環境を準備する

まずは、Hello World ウェブアプリの開発環境を準備しましょう。

必要環境

Hello World ウェブアプリの開発には、次の環境が必要になります。

この Getting Started では、開発に必要な環境をそろえた Docker イメージ(以降 Worker 開発環境)を用意しています。Docker の環境さえあれば、すぐに開発が始められます。

ここでは、この Worker 開発環境を使用する前提で解説します。このため、Worker 開発環境を使用するにあたって必要となる次の環境準備についてのみ解説します。

Worker 開発環境を使用しない場合は、Node.js および express-generator をリンク先の情報を参考にして、準備してください。

Docker

MAGELLAN で動くアプリは、Docker コンテナとして動きます。このため、MAGELLAN で動くアプリは、 Docker イメージ化しなければなりません。したがって、MAGELLAN のアプリ開発では、Docker 環境が必要となります。

Worker の動作イメージ図

OS X および Windows 環境の場合は、Docker Toolbox をインストールしてください。Docker Toolbox のインストールについては、Learning の「Docker Toolbox の使い方 」で解説しています。こちら を参考にして、Docker 環境を準備してください。

Linux 環境の場合は、公式ドキュメント を参考にして、Docker 環境を準備してください。

Docker Hub アカウント

また、上図のとおり MAGELLAN では、Docker Hub を使用します。Docker Hub に、Docker イメージを登録するためには、Docker Hub のアカウントが必要です。

Docker Hub のページからサインアップをしてください。サインアップは無料です。

Worker 開発環境の準備

Docker 環境が整えば、Worker 開発環境を使用して、ウェブアプリの開発をすぐに始められます。ここでは、この Worker 開発環境を準備をします。

Worker 開発環境の使用イメージ

Worker 開発環境は、magellan/development-env-express という名称で、Docker Hub に登録しています。この Worker 開発環境を使用する大まかな手順は次のとおりです。

  1. docker run コマンドで、Worker 開発環境仮想マシン(Docker コンテナ)を起動
  2. docker exec コマンドで、Worker 開発環境 Docker コンテナに接続
    この接続したターミナル上で Worker を開発します。

この手順の内、Worker 開発環境の準備は、1 の部分になります。ここからは、ターミナル(Windows の場合は、コマンドプロンプト)での作業となります。

Worker 開発環境コンテナの起動の様子 (↑クリックで拡大表示)

作業用ディレクトリの準備

まず、作業用ディレクトリを準備します。

Docker コンテナ内で作成したファイルやディレクトリは、Docker コンテナが消えるとなくなります。作成したファイルやディレクトリは残したいため、Docker のボリューム機能を使って、この作業用ディレクトリを Docker コンテナのファイルシステムと共有します。ウェブアプリ用のファイルやディレクトリは、この共有した作業用ディレクトリに作成することで、Docker コンテナが消えた後もウェブアプリ用のファイルやディレクトリを残します。

ここでは、次のディレクトリ構造で、作業用ディレクトリを用意します。~ は、ホームディレクトリです。ディレクトリ構造は、自由に決めて構いません。これはあくまでも一例です。

~
└── workspace
    └── learning-magellan

mkdir -p コマンドで、作業用ディレクトリを作成します。その後、cd コマンドで、その作業用ディレクトリに移動します。

mkdir -p ~/workspace/learning-magellan
cd ~/workspace/learning-magellan

Worker 開発環境仮想マシンの起動

続いて、docker run コマンドで、Worker 開発環境仮想マシンを起動します。

docker run --privileged --name worker-devenv -v $(pwd):/workspace -p 3000:3000 -d magellan/development-env-express

-v $(pwd):/workspace の部分が、ディレクトリ共有の指定です。作業用ディレクトリを Docker コンテナ内の /workspace ディレクトリにマウントしています。

Docker のボリューム機能使用例図解

Docker コンテナ内の /workspace ディレクトリ以下にアクセスすると、ホスト PC の ~/workspace/learning-magellan ディレクトリ以下にアクセスすることになります。

docker run コマンドが終了したら、docker ps コマンドで、Worker 開発環境が起動しているか確認します。

docker ps

次のように、IMAGE 欄が magellan/development-env-express の行が表示されていることを確認します。表示されていない場合は、docker run コマンドで指定したオプションに間違いがないかをよく確認してください。

CONTAINER ID        IMAGE                              COMMAND             CREATED             STATUS              PORTS                    NAMES
95b5d7b2bdfa        magellan/development-env-express   "startup"           3 seconds ago       Up 3 seconds        0.0.0.0:3000->3000/tcp   worker-devenv

これで、Worker 開発環境を使って、Hello World ウェブアプリを開発する準備が整いました。「ウェブアプリを実装する」へ進みましょう。