Dockerで即実行できる、社内・自宅向けオープンソースWebアプリ

デスクトップアプリケーションに比べるとWebアプリケーションの導入は面倒だが、DockerやVagrantの登場によって敷居が低くなっている。誰かがDockerHubへ使いやすいイメージを公開してくれたり、Webアプリの開発元がDockerfileを公式に提供しているケースが増えてきているためだ。

この記事では、筆者が実際に使用したことのあるWebアプリの一覧と、docker-composeの設定ファイル(またはDockerfile)をまとめる。既にDocker環境が整備されている状態であれば、YAMLファイルやDockerfileをコピペして`docker-compose up -d`するだけで自動的にWebアプリケーションが起動する。(もし動かなかったらスミマセン)

* セキュリティとかは考えていないので、LAN内のみでの使用を想定
* 記載の設定では、永続化データはDockerが動作しているマシン内に溜まっていく

# CodeBox

![CodeBoxのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/185d2621-8130-e794-7f3d-a3dba5a52ce6.png)
Git対応のIDE。複数人で同時にファイルの編集が可能。

* **複数人数で同一ファイルの編集が可能**
* GUIからgitのクローン・コミット・プッシュ・プルが可能
* 多くの言語に対応し、そこそこの入力補完機能あり
* 直接サーバのターミナルを開き、gitをCLIから叩いたり、ビルドを走らせたりできる

#### 使用例

* ペアプログラミングに使う
* デザイナー同士でコーディングを共同作業
* Markdownをみんなで共同執筆

#### リンク

* [公式サイト](https://www.codebox.io/)
* [GitHubページ](https://github.com/CodeboxIDE/codebox)
* [Codebox - オンライン/オフライン対応のクラウドIDE MOONGIFT](http://www.moongift.jp/2014/01/%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AE%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89ide%E3%80%81codebox%E3%82%92%E8%A9%A6%E3%81%99/)

#### 構成例

* データボリュームコンテナ + javierprovecho/docker-codebox
* ポート8000でアクセス

```yaml:docker-compose.yml
data00codebox:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/codebox:/workspace
codebox:
  image: 'javierprovecho/docker-codebox'
  ports:
    - 8000:8000
  volumes_from:
    - data00codebox
```

# cute-files

![スクリーンショット 2016-03-13 20.37.48.png](https://qiita-image-store.s3.amazonaws.com/0/48238/51c0f456-c718-507b-d4e3-5bc3bf7c807a.png)

軽快に動作するシンプルなnode.js製ファイルビューア。[Cute File Browser with jQuery and PHP | Tutorialzine](http://tutorialzine.com/2014/09/cute-file-browser-jquery-ajax-php/)をベースに、作者がnodejsで実装したもの。

* FTPと違い、Webからアクセスできて手軽
* アップロード機能・認証機能はついてない
* サムネイル画像を作る機能もついてない

#### 使用例

* 自炊した電子書籍をLAN内で手軽に共有

#### リンク

* [npm作者ページ](https://www.npmjs.com/package/cute-files2)
* [GitHub作者ページ](https://github.com/almazzi/cute-files)
* [元バージョンのライブデモ](http://demo.tutorialzine.com/2014/09/cute-file-browser-jquery-ajax-php/)

#### 構成例

* データボリュームコンテナ + node
* ポート3000でアクセス
* ホストの`/data/cutefiles`内に、誰でも読み取り可能なアクセス権でファイルとフォルダをあらかじめ設置してください

```docker-compose.yml
data-cutefiles:
  image: busybox:buildroot-2014.02
  volumes:
      - /data/cutefiles:/cutefiles
cutefiles:
  build: cutefiles
  volumes_from:
    - data-cutefiles
  ports:
    - "3000:3000"
```
```Docker:cutefiles/Dockerfile
FROM node:4.4
RUN npm install -g cute-files2@1.0.3
# httpsでも動くための改造
RUN sed -i 's/http:\/\//\/\//g' \
        /usr/local/lib/node_modules/cute-files2/frontend/index.html
WORKDIR /cutefiles
EXPOSE 3000
CMD ["/usr/local/bin/cute-files"]
```

# EtherCalc

![EtherCalcのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/1b9d8738-347c-19ae-2766-feb4bea52054.png)

エクセルに似た多くの機能をWebブラウザで使えるだけでなく、リアルタイムコラボレーションが可能。

* **複数人数で1つのブックを同時に編集可能**
* 多くのエクセル関数に対応
* グラフも作れる
* XSLX形式の読み込み・書き出しに対応し、エクセルとの連携も簡単
  * ただし書式の読み書きには非対応
* 認証機能はなし

#### 使用例

* 結合テストの一覧へ、テスト結果をリアルタイムで入力しながらみんなで編集
* エクセルのライセンス料をケチる

#### リンク

* [オンラインデモ](https://ethercalc.org)
* [作者ページ](https://ethercalc.net)
* [GitHubページ](https://github.com/audreyt/ethercalc)
* [EtherCalc - リアルタイムコラボレーションできるWebベースの表計算 MOONGIFT](http://www.moongift.jp/2014/08/ethercalc-%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%B3%E3%83%A9%E3%83%9C%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%8D%E3%82%8Bweb%E3%83%99%E3%83%BC%E3%82%B9/)

#### 構成例

* データボリュームコンテナ + redis + audreyt/ethercalc
* ポート8000でアクセス

```yaml:docker-compose.yml
data00redis:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/redis:/data
redis:
  image: redis:3.0.3
  volumes_from:
    - data00redis
  command: redis-server --appendonly yes
ethercalc:
  image: audreyt/ethercalc
  ports:
    - "8000:8000"
  links:
    - redis:redis
  command: ["sh", "-c", "REDIS_HOST=$$REDIS_PORT_6379_TCP_ADDR REDIS_PORT=$$REDIS_PORT_6379_TCP_PORT pm2 start -x `which ethercalc` -- --cors && pm2 logs"]
```

# Etherpad-lite

![スクリーンショット 2016-03-13 21.16.51.png](https://qiita-image-store.s3.amazonaws.com/0/48238/54dd1c65-144b-a5e6-399d-21210fa3e0bd.png)

複数人でリアルタイムに編集できるWebノートパッド。

![スクリーンショット 2016-03-13 21.16.36.png](https://qiita-image-store.s3.amazonaws.com/0/48238/a53c63ce-3c9b-004e-2697-814b6c8ad4d6.png)

テキストの変更は自動的に履歴化して保存されるので、いつでも内容をロールバックすることも可能。

* iframeで埋め込み可能
* 認証機能なし

#### 使用例

* 顧客に送るメールを誰かにレビューしてもらいながら添削
* みんなが書き込めるちょっとした連絡場所・リンクの共有場所にする

#### リンク

* [GitHubページ: ether/etherpad-lite: Etherpad: Really real-time collaborative document editing](https://github.com/ether/etherpad-lite)
* [みんなでノートをとったりできる同時編集対応のメモツールをいくつか紹介 - Qiita](http://qiita.com/ayokura/items/87fc2609e3abdf8227fe)

#### 構成例

* mysql + tvelocity/etherpad-lite
* 永続化データは`/data/mysql`に保存
* 初期化時に空のデータベースを作る為のSQLも添付
  * 初回起動時に`/mysql/create_database.sql`が自動実行される
 
```docker-compose.yml
data-mysql:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/mysql:/var/lib/mysql
    - ./mysql/:/docker-entrypoint-initdb.d
mysql:
  image: mysql:5.6.28
  environment:
    MYSQL_ROOT_PASSWORD: your_root_password
  volumes_from:
    - data-mysql
  ports:
    - "3306:3306"
etherpad:
  image: tvelocity/etherpad-lite
  links:
    - mysql:mysql
  environment:
    ETHERPAD_ADMIN_PASSWORD: your_admin_pass
```
```sql:mysql/create_database.sql
CREATE DATABASE etherpad DEFAULT CHARACTER SET utf8;
```

# Wekan (Libreboard)

![Libreboardのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/eef6373a-b03a-776f-74d7-3e2cbf53b088.png)


オープンソースの[Trello](https://trello.com/)クローン。カード型のToDoをドラッグ&ドロップでリストからリストに移動できる。

* リアルタイムに複数人で同じ一覧を閲覧・編集可能
* どう見てもTrelloです。本当に(ry
* 名前が Libreboard → Wekanに変わった
* dockerイメージがlibreboard時代のもの

#### 使用例

* リストをステータスに見たててカンバンとして使う
* リストを人に見たてて、みんなに自分のToDoリストを共有してもらう
* 個人でGTDに使う
* [仕事以外でも使える「Trello」のユニークな10の利用法 ｜ ライフハッカー［日本版］](http://www.lifehacker.jp/2015/08/150809trello_tips.html)

#### リンク

* [公式GitLab](http://git.libreboard.com/libreboard/libreboard/)
* [オンラインデモ](http://libreboard.com/)
* [Libreboard – シンプルで簡単に使えるカンバン MOONGIFT](http://www.moongift.jp/2015/02/libreboard-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%AB%E3%83%B3%E3%83%90%E3%83%B3/)

#### 構成例

* データボリュームコンテナ + mongo + miurahr/libreboard
* ポート5555でアクセス

```yaml:docker-compose.yml
data00mongo:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/mongo:/data/db
mongo:
  image: mongo:3.1.5
  volumes_from:
    - data00mongo
  command: mongod --smallfiles
libreboard:
  image: miurahr/libreboard:20150503
  environment:
    MONGO_URL: mongodb://mongo:27017/libreboard
    ROOT_URL: http://example.com
  links:
    - mongo:mongo
  ports:
    - "5555:5555"
```

# manet

![manet-ui.png](https://qiita-image-store.s3.amazonaws.com/0/48238/cd2c5b62-5eb4-d3c2-403b-18d8af52e80c.png)

APIで受け取ったアドレスのスクリーンショットを作成してくれるアプリケーション。

* APIのパラメータで、画像形式やUA、Viewportを細かく指定できる
* 中ではPhantomJSが動いている
* 日本語フォントもインストール済(当然ヒラギノとかではない)
* 最近UIが付いた

#### 使用例

* Redmineと連携して、Wikiやチケットにスクリーンショットを貼る

```
h3. Qiita

スクショ貼っておきます。

!http://(docker-host):8891/?url=http://qiita.com!
```

#### リンク

* [GitHubページ (パラメータの説明有)](https://github.com/earlyclaim/docker-Manet)
* [Manet - 指定URLのスクリーンショット作成サービス MOONGIFT](MOONGIFThttp://www.moongift.jp/2014/12/manet-%E6%8C%87%E5%AE%9Aurl%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9/)

#### 構成例

* earlyclaim/docker-manet
* ポート8891でアクセス
* データは永続化しない(再起動の度に消去)

```yaml:docker-compose.yml
manet:
  image: earlyclaim/docker-manet
  ports:
    - "8891:8891"
```

# Gitbucket

![Gitbucketのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/7b560e85-dc68-40b2-936c-1cbe2000c587.png)

完成度が高い国産のGitHubクローン。

* GUIでリポジトリの初期化が可能
* 鍵の登録も簡単
* LDAP認証に対応
* かなりGitHubっぽい
* データボリュームコンテナをredmineコンテナから参照すれば連携も簡単

#### 使用例

* redmineだけだとリポジトリの初期化ができないので、これを使ってGUIから作る
* 個人／社内のGitリポジトリを集約して管理

#### リンク

* [作者ブログ](http://takezoe.hatenablog.com/archive/category/GitBucket)
* [デモサイト](https://github.com/takezoe/gitbucket)
* [GitHubページ](https://github.com/takezoe/gitbucket)
* [GitHubのようなサイトを独自に運用できる「GitLab」や「GitBucket」を使ってみよう - さくらのナレッジ](http://knowledge.sakura.ad.jp/tech/3005/)


#### 構成例

* データボリュームコンテナ + f99aq8ove/gitbucket
* ポート8080でWebへアクセス
* ポート29418でSSHにアクセス

```yaml:docker-compose.yml
data00gitbucket:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/gitbucket:/gitbucket
gitbucket:
  image: f99aq8ove/gitbucket
  ports:
    - "29418:29418"
    - "8080:8080"
  volumes_from:
    - data00gitbucket
  command: java -jar /opt/gitbucket.war
```

# Redmine

![Redmineのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/4276062e-b00a-b01a-68f5-21b186f1f1ac.png)


人気のIssueトラッキングシステム。プロジェクト管理、タスク管理、グループウェアとして汎用的に使用可能。

* Gmailと連携してメール送信等が可能
* Git, SVNリポジトリとの連携が可能
* LDAP認証に対応

#### 使用例

* プロジェクト管理に使用
* ナレッジベースとして情報を集約する

#### リンク

* [DockerHubページ(詳しい使い方について記載あり)](https://github.com/sameersbn/docker-redmine)

#### 構成例

* データボリュームコンテナx2 + mysql + sameersbn/redmine:2.6.3

```yaml:docker-compose.yml
data00mysql:
  image: busybox:buildroot-2014.02
  volumes:
    - /data/mysql:/var/lib/mysql
data00redmine:
  image: busybox:buildroot-2014.02
  volumes:
    # 添付ファイル保存先
    - /data/redmine/files:/home/redmine/data/files
    # プラグイン
    - /data/redmine/plugins:/home/redmine/data/plugins
    # テーマ
    - /data/redmine/themes:/home/redmine/data/themes
mysql:
  image: mysql:5.6.24
  environment:
    MYSQL_ROOT_PASSWORD: password
  volumes_from:
    - data00mysql
  ports:
    - "3306:3306"
redmine:
  image: sameersbn/redmine:2.6.3
  volumes_from:
    - data00redmine
    # - data00gitbucket
  links:
    - mysql:mysql
  ports:
    - "80:80"
  environment:
    # REDMINE_HTTPS: true
    # REDMINE_RELATIVE_URL_ROOT: /redmine
    DB_USER: root
    DB_NAME: redmine
    DB_PASS: password
    # SMTP_USER: google@gmail.com
    # SMTP_PASS: password
```

# Reichat

![Reichatのスクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/48238/fe064edd-c37f-3eff-da37-44f8e3c46dcc.png)

ワコムのペンタブレットに対応した国産のおえかきチャット。

* **ワコムのブラウザ用ペンタブレットプラグインに対応**
* 複数人で同じ画面に絵を描くことが可能
* フリーハンドしか描けないので製図的なものには不向き
* 認証はなし

#### 使用例

* デザイナーのラフスケッチに

#### リンク

* [誕生日なので思いつきで開発中のお絵描きチャットOSSを公開しました](https://r2.ag/reichat-preview/)
* [デモサイト](https://reichat-dev.azurewebsites.net)
* [GitHubページ](https://github.com/kanreisa/reichat)

#### 構成例

* node
* ポート10133でアクセス
* データは永続化しない(再起動の度に消去)

```docker:Dockerfile
FROM node:0.12.2
RUN npm install -g reichat
EXPOSE 10133
CMD reichat
```
```yaml:docker-compose.yml
reichat:
  build: reichat
  ports:
    - "10133:10133"
```

# docker-composeで作る自宅サーバ

こういった色々なWebアプリケーションを1つのサーバに同居させようとすると、ポート番号の重複を避けるためのリバースプロキシが必要になってくる。また、本格的にサーバとして運用するにはdocker-toolboxの仮想マシン内に永続化データを溜めるのも厳しいものがある。

こういった問題を解決し、イミュータブルな構成の自宅サーバを立ちあげた話を下の記事にまとめた。

[Vagrant・CoreOS・Dockerでインフラ素人が自宅サーバを立てた話 - Qiita](http://qiita.com/y_hokkey/items/3dd0d8f20f9daadbbf0b)

デモ：
[hokkey/vagrant-coreos-docker-demo: Vagrant and Docker profiles for small web application server](https://github.com/hokkey/vagrant-coreos-docker-demo)