$30 off During Our Annual Pro Sale. View Details »

Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所

 Webエンジニアがスタートダッシュをキメるためのローカル開発環境の勘所

Yu Watanabe

July 04, 2017
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

  1. Webエンジニアが
    スタートダッシュをキメるための
    ローカル開発環境の勘所
    Webエンジニア勉強会#1 at 新橋
    2017-6-2 Fri
    @nabedge

    View Slide

  2. Who ?
    2
    ● わたなべ
    ● (株)ビズリーチ
    ● twitter: @nabedge
    ● github: nabedge
    ● http://www.slideshare.net/nabedg
    e/presentations

    View Slide

  3. Webサービスのコードを
    どこで
    どうやって
    書くのか?
    レベル0〜レベル4
    3

    View Slide

  4. レベル0
    4
    本番サーバ
    コード
    ※データセンター建物内にて

    View Slide

  5. レベル1
    5
    ● エディタ
    ● SCPクライアント
    本番サーバ
    コード

    View Slide

  6. レベル2
    6
    ● エディタ
    ● ローカルなサーバ
    ○ XAMP, MAMP, etc
    ● SCPクライアント
    本番サーバ
    コード

    View Slide

  7. レベル3
    7
    ● エディタ
    ● ローカルなサーバ
    ○ XAMP, MAMP, etc
    ● SCPクライアント
    本番サーバ
    コード
    検証サーバ
    コード

    View Slide

  8. レベル4
    8
    本番サーバ コード 検証サーバ コード
    CI VCS
    MySQL,
    Redis,...
    MySQL,
    Redis,...

    View Slide

  9. ローカル開発環境で何ができるべきなのか
    ● コードをサクサク書ける
    ● 書いたコードが動くことを自分のPCで
    確認できる
    ○ ↑コードが動くための
    バックエンドサーバが必要
    9
    ここが面倒

    View Slide

  10. 10
    ● エディタ(補完機能つき)
    ● ビルドツール連携
    ○ gradle, mvn, npm...
    ● VCS連携
    ● ミドルウェア群
    ○ MySQL, PostgreSQL
    ○ Memcached
    ○ fakes3...
    ?

    View Slide

  11. 長大な「ローカル開発環境構築手順書」
    1. PostgreSQLのインストーラをダウンロードして
    ダブルクリック
    2. Redisを...
    3. C;¥Windows¥system32¥drivers¥etc¥hosts
    ファイルを編集...
    4. …以下すんごく長い
    11

    View Slide

  12. 半年も経つと
    ● 手順書が長すぎてうっかり抜け漏れ
    ● 「memcached ? それもうRedisに変えたんだけど、
    手順書直すの忘れてましたテヘヘ」
    ● 他チームから助っ人として来たら、
    他のWebサービスの開発環境とバッティングして
    うまくインストールできない
    12

    View Slide

  13. NOT 手順書 & PCに直接インストール
    BUT 仮想OS & 自動化スクリプト
    13

    View Slide

  14. ポイント
    1. ローカル開発環境で必要な
    ミドルウェア群を仮想OS上に構築する
    2. それを実現するための
    OracleVitrutalBox or VMWare,
    Vagrant , Docker
    14

    View Slide

  15. 15
    MacOS / Windows
    OracleVBox / VMWare
    CoreOS / Ubuntu
    Docker
    (MySQL)
    Docker
    (Redis)
    CoreOS / Ubuntu
    Docker
    (PgSQL)
    Docker
    (fakes3)
    Aサービスの
    コード
    Bサービスの
    コード

    View Slide

  16. 16
    MacOS / Windows
    OracleVBox / VMWare
    CoreOS / Ubuntu
    Docker
    (MySQL)
    Docker
    (Redis)
    CoreOS / Ubuntu
    Docker
    (PgSQL)
    Docker
    (fakes3)
    Aサービスの
    コード
    Bサービスの
    コード
    $ vagrant up
    $ vagrant ssh -c \
    "sh /vagrant/docker/docker-compose-up.sh"
    2コマンドで構築完了

    View Slide

  17. 複数の仮想OSテクノロジーをなぜ併用する?
    ● ホスト型仮想OS環境 = Oracle VBox
    ● コンテナ型仮想OS環境 = Docker
    17

    View Slide

  18. 18
    Docker OracleVBox +
    Vagrant
    起動速度、プロビ
    ジョニング速度
    軽い 重い
    複数の開発環境
    の共存によるバッ
    ティング
    ポート番号
    かぶり問題
    仮想OSの
    IPアドレスを
    ずらせば解決

    View Slide

  19. ローカル開発環境4原則
    1. 自動化
    2. アプリの変化に合わせて
    誰でも環境を変更して配布可能
    3. 他のサービスの開発環境と干渉しない
    4. 金の弾丸
    19

    View Slide

  20. 原則1 サルでもやれるくらいの自動化
    ● git clone foo-pj
    ● cd foo-pj/local-env
    ● vagrant up
    ● vagrant ssh -c \
    “cd /vagrant/docker; docker-compose up”
    20

    View Slide

  21. 原則2 誰でも環境を変更して配布可能
    ● vi Vagrantfile
    ● vi Dockerfile
    ● vi docker-compose.yml
    ● git commit, push
    21

    View Slide

  22. 原則3: 他の開発環境と干渉しない
    22
    OracleVBox / VMWare
    CoreOS / Ubuntu
    Docker
    (MySQL)
    Docker
    (Redis)
    CoreOS / Ubuntu
    Docker
    (PgSQL)
    Docker
    (fakes3)
    Aサービスの
    コード
    Bサービスの
    コード
    192.168.1.1 192.168.2.2

    View Slide

  23. 原則4 金の弾丸
    23
    Mac Book Pro
    3GHz Core i7
    16GB memory
    250GB SSD
    Jet Brains
    All Products Pack
    ※2015年春時点スペック

    View Slide

  24. スタートダッシュをキメたいエンジニア募集!
    https://www.bizreach.co.jp/recruit/
    24

    View Slide