ネタ募集箱を支える技術

2016.01.26嶋田大輔

@cimadai (しまだい)

嶋田 大輔

自己紹介

https://bitbucket.org/daisuke-shimada

八王子 高尾山

https://github.com/cimadai

lネットワークとその周辺分野が得意lRTP / RTSP使って監視カメラの録画とかlWinny方面の技術とかl独自プロトコルで高速にデータを送る技術とか

自己紹介l最近興味を持っていること

l 機械学習 (ディープラーニング)l ブロックチェーン

l言語は複数触っていますが、好きなのはこんな感じ

l JSの本を2冊書いてます。

八王子 高尾山

l OpenCV 3.xl IoT などなど

本日の主題

ネタ募集箱

http://blog.cybozu.io/entry/8305

http://blog.cybozu.io/entry/8305

ピコーン

ネタ募集箱作ってみた

https://github.com/cimadai/neta-­‐inbox

Fork,  Pull  Request,  Issue登録歓迎です！

今日はこのネタ募集箱を作る中で使った技術をご紹介します

開発環境編

動作環境編

開発言語編

開発環境編

動作環境編

開発言語編

開発環境

Docker HubEC2

WerckerCodecov

全体としてはこんな構成で開発を進めています。

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

開発環境

Docker HubEC2

WerckerCodecov

全体としてはこんな構成で開発を進めています。

普段はIntelliJ IDEAで開発しつつgitでGitHubにcommit & push。

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

開発環境

Docker HubEC2

WerckerCodecov

全体としてはこんな構成で開発を進めています。

普段はIntelliJ IDEAで開発しつつgitでGitHubにcommit & push。

Wercker CLIを使ってLocalでもWebと同じCIを実行します。

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

開発環境

Docker HubEC2

WerckerCodecov

全体としてはこんな構成で開発を進めています。

普段はIntelliJ IDEAで開発しつつgitでGitHubにcommit & push。

Wercker CLIを使ってLocalでもWebと同じCIを実行します。

WerckerでCI & CDを行い、テストカバレッジはCodecovに流す。

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

開発環境

Docker HubEC2

WerckerCodecov

全体としてはこんな構成で開発を進めています。

普段はIntelliJ IDEAで開発しつつgitでGitHubにcommit & push。

Wercker CLIを使ってLocalでもWebと同じCIを実行します。

WerckerでCI & CDを行い、テストカバレッジはCodecovに流す。

できたDocker ImageはDocker Hubでホストしています。

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

もう少し詳しく

開発環境

DockerHub

WerckerCodecov

GitHubのIssueやPull Requestを使いつつ日々のコーディングを進めていきます。

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

開発環境

DockerHub

WerckerCodecov

GitHubのIssueやPull Requestを使いつつ日々のコーディングを進めていきます。

ZenHubと組み合わせるとGitHubにBoardというカンバン機能が付与されるのでとても使いやすいです。

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

ZenHub?

BoardsとBurndownが増える

Backlog To  Do Doing Done Close

Backlog To  Do Doing Done Close

カンバン便利(Boards = カンバン)

開発環境

DockerHub

WerckerCodecov

Wercker CLIを利用することで、手元のDocker環境でWerckerによるCIを実施することができます。

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Wercker?

TravisCICircleCICodeship

みたいなCI/CDサービス

Why Wercker?

Why Wercker?Bitbucketでも使える！

無料で使える！

設定ファイル(wercker.yml)でビルドの設定ができる！

任意のコンテナでCIできる！

１

2

3

4

各リポジトリ対応状況

http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64より引用

１

料金比較2

http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64より引用

設定ファイルがYAML3

http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64より引用

wercker.ymlの例

実行しているステップの結果がリアルタイムに見ることができる

Dockerベースのシステム4

wercker.ymlの例

wercker.ymlの例

好きなDocker  container上でCIができる！

wercker.ymlの例

好きなDocker  container上でCIができる！

手元でも同じ環境でテストできる！

wercker.ymlの例

好きなDocker  container上でCIができる！

手元でも同じ環境でテストできる！

本番にも同じ環境でデプロイできる！

Dockerベースすごい

Wercker CLI?

ローカルのDocker環境で使えるWercker

システム

% wercker build ¥--working-dir=wercker_work ¥--direct-mount

手元で実行する例

※neta-­‐inboxのwercker.ymlでは、~/.zshrcにwerckerのaliasとして以下と、git  configでcodecovのトークンを設定しています。

# Wercker# with local git owner and repository namealias wercker=’

export X_WERCKER_GIT_OWNER=`git config remote.origin.url | sed -E "s/.*:(.*)¥/(.*).git/¥1/g"` && ¥export X_WERCKER_GIT_REPOSITORY=`git config remote.origin.url | sed -E "s/.*:(.*)¥/(.*).git/¥2/g"` && ¥export X_CODECOV_TOKEN=`git config codecov.token` && ¥wercker'

git config codecov.token <Your codecov token>

実行結果

Dockerベースすごい（再）

開発環境

Wercker

featureブランチがpushされるとWerckerでCIが動き始め、テストが実行されます。

Codecov

DockerHubEC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

CIが始まるとすぐにコメントをくれます。

Pull Request出してもコメントがつかずに寂しい思いをしていた人ももう安心。

開発環境

Wercker

テストのカバレッジはCodecovに保存し、結果をPull RequestコメントとしてGitHubに通知します。

DockerHub

Codecov

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

カバレッジが登録されると教えてくれます。

CI結果はこんな感じでわかるので便利！

このPRはテストが通ってないからだめだ！みたいなチェックが簡単にできる。

もちろんPull  Requestsの一覧でもわかりやすい

開発環境

Wercker

CIが成功したら、現在のブランチに応じてデプロイを実施します。

ネタ募集箱の場合はDocker imageを作成し、Docker Hubにpushしています。

Codecov

DockerHubEC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

デプロイされたDocker  image

featureブランチとdevelopブランチはdevelopタグでpush

masterブランチはリリース時のバージョンタグとlatestタグでpush

他のimageもご紹介

用意しているのは全部で３つ

ビルド時に必要な環境が入った

ビルド環境用image

ビルド環境用Dockerfile

アプリケーションを含むデプロイimage

デプロイ用Dockerfile

デプロイするimageの元となるベースimage

ベース用Dockerfile

あとは使いたい環境でdocker runするなり

docker-compose upするなりdockerの話もそのうちするナリ！>

オープンソースで開発しているのでここまで

全部無料！

無料 最高!!

オープンソース最高!!

まとめ• GitHub使うならZenHub便利でいいよ！• BitbucketならJIRA使っておけばOKじゃないかな。• Wercker使うとローカルCIもクラウドCIもできるよ！• WerckerはDockerコンテナでCIできるから柔軟性も抜群！

• テストカバレッジも出すといいよ。Codecov便利。• 開発もテストも本番も全てDockerでやろうぜ。• 今回は無料だったけど、必要ならばお金を出して楽をしよう！

参考URL• ZenHub– https://www.zenhub.io/

• Wercker (Web)– http://wercker.com/

• Wercker CLI– http://wercker.com/downloads/

• Docker Hub– https://hub.docker.com/

• みんなで技術ネタを持ち寄ってワイワイするには– http://blog.cybozu.io/entry/8305