ネタ募集箱というちょっとしたプロジェクトを作るなかでいろいろな技術を使ってみたのでまとめてみました。

1. ネタ募集箱を
支える技術
2016.01.26
嶋田大輔

2. @cimadai (しまだい)
嶋田 大輔
自己紹介
https://bitbucket.org/daisuke-shimada
八王子 高尾山
https://github.com/cimadai
l ネットワークとその周辺分野が得意
l RTP / RTSP使って監視カメラの録画とか
l Winny方面の技術とか
l 独自プロトコルで高速にデータを送る技術とか

3. 自己紹介
l 最近興味を持っていること
l 機械学習 (ディープラーニング)
l ブロックチェーン
l 言語は複数触っていますが、好きなのはこんな感じ
l JSの本を2冊書いてます。
八王子 高尾山
l OpenCV 3.x
l IoT などなど

4. 本日の主題

5. ネタ募集箱

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

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

9. ピコーン

11. ネタ募集箱
作ってみた
https://github.com/cimadai/neta-­‐inbox
Fork,
Pull
Request,
Issue登録歓迎です！

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

13. 開発環境編
動作環境編
開発言語編

14. 開発環境編
動作環境編
開発言語編

15. 開発環境
Docker HubEC2
WerckerCodecov
全体としてはこんな構成で開
発を進めています。
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

16. 開発環境
Docker HubEC2
WerckerCodecov
全体としてはこんな構成で開
発を進めています。
普段はIntelliJ IDEAで開発し
つつgitでGitHubにcommit &
push。
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

17. 開発環境
Docker HubEC2
WerckerCodecov
全体としてはこんな構成で開
発を進めています。
普段はIntelliJ IDEAで開発し
つつgitでGitHubにcommit &
push。
Wercker CLIを使ってLocal
でもWebと同じCIを実行しま
す。
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

18. 開発環境
Docker HubEC2
WerckerCodecov
全体としてはこんな構成で開
発を進めています。
普段はIntelliJ IDEAで開発し
つつgitでGitHubにcommit &
push。
Wercker CLIを使ってLocal
でもWebと同じCIを実行しま
す。
WerckerでCI & CDを行い、
テストカバレッジはCodecov
に流す。
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

19. 開発環境
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

20. もう少し詳しく

21. 開発環境
DockerHub
WerckerCodecov
GitHubのIssueや
Pull Requestを使いつつ
日々のコーディングを
進めていきます。
EC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

22. 開発環境
DockerHub
WerckerCodecov
GitHubのIssueや
Pull Requestを使いつつ
日々のコーディングを
進めていきます。
ZenHubと組み合わせると
GitHubにBoardというカンバ
ン機能が付与されるのでとて
も使いやすいです。
EC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

23. ZenHub?

25. BoardsとBurndownが増える

26. Backlog To
Do Doing Done Close

27. Backlog To
Do Doing Done Close
カンバン便利
(Boards = カンバン)

28. 開発環境
DockerHub
WerckerCodecov
Wercker CLIを利用すること
で、手元のDocker環境で
WerckerによるCIを実施する
ことができます。
EC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

29. Wercker?

31. TravisCI
CircleCI
Codeship
みたいなCI/CDサービス

32. Why Wercker?

33. Why Wercker?
Bitbucketでも使える！
無料で使える！
設定ファイル(wercker.yml)で
ビルドの設定ができる！
任意のコンテナでCIできる！
１
2
3
4

34. 各リポジトリ対応状況
http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64
より引用
１

35. 料金比較2
http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64
より引用

36. 設定ファイルがYAML3
http://qiita.com/hiro_koba/items/282e3b2e534f4bc22d64
より引用

37. wercker.ymlの例

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

39. Dockerベースのシステム4

40. wercker.ymlの例

41. wercker.ymlの例
好きなDocker
container上
でCIができる！

42. wercker.ymlの例
好きなDocker
container上
でCIができる！
手元でも同じ環境でテスト
できる！

43. wercker.ymlの例
好きなDocker
container上
でCIができる！
手元でも同じ環境でテスト
できる！
本番にも同じ環境で
デプロイできる！

44. Dockerベース
すごい

45. Wercker CLI?

47. ローカルの
Docker環境で
使えるWercker
システム

48. % 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 name
alias 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>

49. 実行結果

50. Dockerベース
すごい（再）

51. 開発環境
Wercker
featureブランチがpush
されるとWerckerでCIが
動き始め、テストが実行
されます。
Codecov
DockerHubEC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

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

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

54. 開発環境
Wercker
テストのカバレッジは
Codecovに保存し、結果
をPull Requestコメント
としてGitHubに通知しま
す。
DockerHub
Codecov
EC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

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

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

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

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

59. 開発環境
Wercker
CIが成功したら、現在の
ブランチに応じてデプロ
イを実施します。
ネタ募集箱の場合は
Docker imageを作成し、
Docker Hubにpushして
います。
Codecov
DockerHubEC2
GitHubIntelliJ IDEA
Wercker CLI
Local Cloud

60. デプロイされたDocker
image

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

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

63. 他のimageもご紹介

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

65. ビルド時に必要な
環境が入った
ビルド環境用image

66. ビルド環境用Dockerfile

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

68. デプロイ用Dockerfile

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

70. ベース用Dockerfile

71. あとは使いたい環境で
docker runするなり
docker-compose upするなり
dockerの話もそのうちするナリ！ >

72. オープンソースで開発
しているのでここまで
全部無料！

73. 無料 最高!!

74. オープンソース
最高!!

75. まとめ
• GitHub使うならZenHub便利でいいよ！
• BitbucketならJIRA使っておけばOKじゃないかな。
• Wercker使うとローカルCIもクラウドCIもできるよ！
• WerckerはDockerコンテナでCIできるから柔軟性も
抜群！
• テストカバレッジも出すといいよ。Codecov便利。
• 開発もテストも本番も全てDockerでやろうぜ。
• 今回は無料だったけど、必要ならばお金を出して楽を
しよう！

76. 参考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