mzumi's blog

Docker Compose を使って React (+ Babel + webpack) アプリを動かす

October 10, 2016

以前作成した React のチュートリアルを Docker Compose で動かしてみた。
(対応したリポジトリはこっち

Docker は chef とかのレシピを作成する際に使用したり、
Circle CI などで、serverspec でテストをする際に使用する程度で、本番環境で
動かすことにはあまり気にしていなかった。

しかし、ネット上では、もうプロダクションで使っているのをちらほら見かけるので、
本番環境で動かすのを意識した使い方を調べてみて、実際に動かしてみた。

サーバーの構成

構成としては、Web アプリによくある構成で

という構成にしてみた。

今回は、1コンテナ1プロセスということにして、上記の3つのサーバーを
1つのコンテナではなく、それぞれ3つのコンテナで動かすようにした。

以下のサイトがとても参考になった。

コンテナの作成方法

行っていることは、ほとんど上記のサイトと同じで、

のコンテナを用意する。
永続化したいデータについては datastore コンテナに配置する。
今回の場合では、データベースのデータと、rails のログ、
assets precompile したファイルを datastore に保存する。

assets precompile したファイルについてのデプロイ方法

1コンテナ1プロセスという構成にした際、気になっていたのが assets precompile したものを
どのようにデプロイすれば良いのかという点だ。
普段使用しているサーバーは、nginx と rails が同じホストで動いているので、
precompile したものをそのまま配置しているだけだが、今回は nginx と rails が
別ホスト(別コンテナ)なので、precompile したものをどのように nginx 側に渡すのかが
気になっていた。

上記のサイトでは、datastore のコンテナを使い、そこで precompile したものを
共有するという方法をとっており、なるほどなと思い、同じ方法を採用した。

ディレクトリ構成

ディレクトリ構成については若干変更していて、以下のように
Dockerfile は全部 containers ディレクトリ以下に配置するようにした。

├── app
...
├── containers
│   ├── datastore
│   │   └── Dockerfile
│   ├── nginx
│   │   ├── Dockerfile
│   │   └── nginx.conf
│   └── rails
│       └── Dockerfile
└── docker-compose.yml

また、docker-compose.yml のフォーマットも異なっていて、version 2 のフォーマットに対応させた。
作成した docker-compose.yml は以下のようになった。

また、作成した React Tutorial では、npm を使ったパッケージのインストールと、webpack によるビルドも
行わないといけないので、これらの作業も追加する。

追加した作業を具体的に挙げると

になる。

npm のインストール及び react などのインストールについては、rails の Dockerfile で
行うようにしている。
また、webpack によるビルドは、build_client.rake というファイル名で Rake タスクを
作成し、そのタスクを assets precompile のタスクの前にフックさせることにした。
これで、assets precompile のタスクを行えば、自動で webpack のビルドも行われるようになった。

起動方法

起動方法だが、初回時のみ

の手順が必要となる。

まず、コンテナの作成については、

$ docker-compose build

でコンテナを作成する。

次に、データベースの作成とテーブルの作成を行うため、以下のコマンドを実行する。

$ docker-compose run bundle exec rake db:create
$ docker-compose run bundle exec rake db:migrate

postgresql の起動のタイミングのせいなのか、 db:create に関しては
一回コマンドを打つと失敗するが、もう一度同じコマンドを打つと成功する。

その次に作成した Javascript を precompile する。
上記で説明した通り、このコマンドでは webpack によるビルドも同時に行われる。

$ docker-compose run bundle exec rake asset:precompile

初回では以上のコマンドが必要だが、2回目以降の起動時には不要となる。

で次にコンテナを以下のコマンドで起動し、

$ docker-compose up

http://localhost:8080 にアクセスすれば、React Tutorial の画面が見られるようになる。