ネタ募集箱を支える技術 開発環境編

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

Transcript of ネタ募集箱を支える技術 開発環境編

Page 1: ネタ募集箱を支える技術 開発環境編

ネタ募集箱を支える技術

2016.01.26嶋田大輔

Page 2: ネタ募集箱を支える技術 開発環境編

@cimadai (しまだい)

嶋田 大輔

自己紹介

https://bitbucket.org/daisuke-shimada

八王子 高尾山

https://github.com/cimadai

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

Page 3: ネタ募集箱を支える技術 開発環境編

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

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

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

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

八王子 高尾山

l OpenCV 3.xl IoT などなど

Page 4: ネタ募集箱を支える技術 開発環境編

本日の主題

Page 5: ネタ募集箱を支える技術 開発環境編

ネタ募集箱

Page 6: ネタ募集箱を支える技術 開発環境編

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

Page 7: ネタ募集箱を支える技術 開発環境編

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

Page 8: ネタ募集箱を支える技術 開発環境編
Page 9: ネタ募集箱を支える技術 開発環境編

ピコーン

Page 10: ネタ募集箱を支える技術 開発環境編
Page 11: ネタ募集箱を支える技術 開発環境編

ネタ募集箱作ってみた

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

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

Page 12: ネタ募集箱を支える技術 開発環境編

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

Page 13: ネタ募集箱を支える技術 開発環境編

開発環境編

動作環境編

開発言語編

Page 14: ネタ募集箱を支える技術 開発環境編

開発環境編

動作環境編

開発言語編

Page 15: ネタ募集箱を支える技術 開発環境編

開発環境

Docker HubEC2

WerckerCodecov

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

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 16: ネタ募集箱を支える技術 開発環境編

開発環境

Docker HubEC2

WerckerCodecov

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

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

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 17: ネタ募集箱を支える技術 開発環境編

開発環境

Docker HubEC2

WerckerCodecov

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

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

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

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 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

Page 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

Page 20: ネタ募集箱を支える技術 開発環境編

もう少し詳しく

Page 21: ネタ募集箱を支える技術 開発環境編

開発環境

DockerHub

WerckerCodecov

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

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 22: ネタ募集箱を支える技術 開発環境編

開発環境

DockerHub

WerckerCodecov

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

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

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 23: ネタ募集箱を支える技術 開発環境編

ZenHub?

Page 24: ネタ募集箱を支える技術 開発環境編
Page 25: ネタ募集箱を支える技術 開発環境編

BoardsとBurndownが増える

Page 26: ネタ募集箱を支える技術 開発環境編

Backlog To  Do Doing Done Close

Page 27: ネタ募集箱を支える技術 開発環境編

Backlog To  Do Doing Done Close

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

Page 28: ネタ募集箱を支える技術 開発環境編

開発環境

DockerHub

WerckerCodecov

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

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 29: ネタ募集箱を支える技術 開発環境編

Wercker?

Page 30: ネタ募集箱を支える技術 開発環境編
Page 31: ネタ募集箱を支える技術 開発環境編

TravisCICircleCICodeship

みたいなCI/CDサービス

Page 32: ネタ募集箱を支える技術 開発環境編

Why Wercker?

Page 33: ネタ募集箱を支える技術 開発環境編

Why Wercker?Bitbucketでも使える!

無料で使える!

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

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

2

3

4

Page 34: ネタ募集箱を支える技術 開発環境編

各リポジトリ対応状況

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

Page 35: ネタ募集箱を支える技術 開発環境編

料金比較2

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

Page 36: ネタ募集箱を支える技術 開発環境編

設定ファイルがYAML3

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

Page 37: ネタ募集箱を支える技術 開発環境編

wercker.ymlの例

Page 38: ネタ募集箱を支える技術 開発環境編

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

Page 39: ネタ募集箱を支える技術 開発環境編

Dockerベースのシステム4

Page 40: ネタ募集箱を支える技術 開発環境編

wercker.ymlの例

Page 41: ネタ募集箱を支える技術 開発環境編

wercker.ymlの例

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

Page 42: ネタ募集箱を支える技術 開発環境編

wercker.ymlの例

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

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

Page 43: ネタ募集箱を支える技術 開発環境編

wercker.ymlの例

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

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

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

Page 44: ネタ募集箱を支える技術 開発環境編

Dockerベースすごい

Page 45: ネタ募集箱を支える技術 開発環境編

Wercker CLI?

Page 46: ネタ募集箱を支える技術 開発環境編
Page 47: ネタ募集箱を支える技術 開発環境編

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

システム

Page 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 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>

Page 49: ネタ募集箱を支える技術 開発環境編

実行結果

Page 50: ネタ募集箱を支える技術 開発環境編

Dockerベースすごい(再)

Page 51: ネタ募集箱を支える技術 開発環境編

開発環境

Wercker

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

Codecov

DockerHubEC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 52: ネタ募集箱を支える技術 開発環境編

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

Page 53: ネタ募集箱を支える技術 開発環境編

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

Page 54: ネタ募集箱を支える技術 開発環境編

開発環境

Wercker

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

DockerHub

Codecov

EC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 55: ネタ募集箱を支える技術 開発環境編

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

Page 56: ネタ募集箱を支える技術 開発環境編

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

Page 57: ネタ募集箱を支える技術 開発環境編

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

Page 58: ネタ募集箱を支える技術 開発環境編

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

Page 59: ネタ募集箱を支える技術 開発環境編

開発環境

Wercker

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

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

Codecov

DockerHubEC2

GitHubIntelliJ IDEA

Wercker CLI

Local Cloud

Page 60: ネタ募集箱を支える技術 開発環境編

デプロイされたDocker  image

Page 61: ネタ募集箱を支える技術 開発環境編

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

Page 62: ネタ募集箱を支える技術 開発環境編

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

Page 63: ネタ募集箱を支える技術 開発環境編

他のimageもご紹介

Page 64: ネタ募集箱を支える技術 開発環境編

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

Page 65: ネタ募集箱を支える技術 開発環境編

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

ビルド環境用image

Page 66: ネタ募集箱を支える技術 開発環境編

ビルド環境用Dockerfile

Page 67: ネタ募集箱を支える技術 開発環境編

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

Page 68: ネタ募集箱を支える技術 開発環境編

デプロイ用Dockerfile

Page 69: ネタ募集箱を支える技術 開発環境編

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

Page 70: ネタ募集箱を支える技術 開発環境編

ベース用Dockerfile

Page 71: ネタ募集箱を支える技術 開発環境編

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

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

Page 72: ネタ募集箱を支える技術 開発環境編

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

全部無料!

Page 73: ネタ募集箱を支える技術 開発環境編

無料 最高!!

Page 74: ネタ募集箱を支える技術 開発環境編

オープンソース最高!!

Page 75: ネタ募集箱を支える技術 開発環境編

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

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

Page 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

Page 77: ネタ募集箱を支える技術 開発環境編