6年かけてこうなった！我々の開発環境の変遷と現在 / phpconokinawa2019

PHPカンファレンス沖縄2019の登壇資料です。
https://phpcon.okinawa.jp/

Transcript

1. #phpconokinawa #track_b 6年かけてこうなった︕ 我々の開発環境の変遷と現在 PHPカンファレンス沖縄2019 2019.10.12 株式会社オウケイウェイヴ ⼤橋 佑太
2. 2 blue_goheimochi ⼤橋 佑太 株式会社オウケイウェイヴ PHP(Laravel),Javascript(Vue.js/Nuxt.js), Laravel JP Conference 2020, PHPerKaigi 2020 … おおはし ゆうた 2013年5⽉〜
3. 3 オウケイウェイヴの事業 ミッション︓ 互い助け合いの 場の創造を通して、 物⼼両⾯の幸福を実現し、 世界の発展に寄与する 多⾔語コールセンター 運営および インバウンドサービス エンタープライズ ソリューション事業部 コンシューマー ソリューション事業部 多⾔語CRM事業 （株式会社BRICKS） 法⼈向け ソリューションの 製造/販売 Q&Aサイト 「OKWAVE」の 運営および広告事業
4. 4 Q&Aサイト「OKWAVE」
5. 5 Q&Aサイト「OKWAVE」 質問者と回答者がやりとりして疑問を解決
6. 6 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 新バッチ バッチ 旧バッチ 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache ※2013年当時
7. 7 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 新バッチ バッチ 旧バッチ 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache 本体サイト OEMサイト アプリ等 WebAPI 内部API 管理画⾯ バッチ ※2013年当時
8. 8 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache 新バッチ バッチ 旧バッチ ※2013年当時
9. 9 というような環境における開発環境の 変遷についてお話ししていきます 開発環境構築ツールの良し悪し話はしません
10. 10 ︖ ︖ 我々の開発環境の変遷 ⼤きく分けると4つの時代に分かれる 2013 2019 2016 2014 2015 2017 2018 ︖ ︖
11. 11 XAMPP期
12. 12 XAMPP期 当時の状況 • 私⾃⾝は2013年5⽉に⼊社 • 「OKWAVE」は2000年1⽉から正式運⽤開始 • 2005年に「OKWeb」から改名 • 13年超の歴史あるサービスにJOIN • 開発機はWindows
13. 13 Double XAMPP
14. 14 XAMPP期 当時の状況 • 私⾃⾝は2013年5⽉に⼊社 • 「OKWAVE」は2000年1⽉から正式運⽤開始 • 2005年に「OKWeb」から改名 • 13年超の歴史あるサービスにJOIN • 開発機はWindows • Dobule XAMPP・・・︖ • プロダクトのPHPのバージョンが2系統(お察しください) • ということで2つのバージョンのXAMPPが共存して存在
15. 15 XAMPP期 当時まだスレてなかったわたし なるほど︕OKWAVEはこのような 開発環境なんですね︕ がんばります︕タスクください︕
16. 16 XAMPP期 問題点 • XAMPPを切り替える場合、⽚⽅を停⽌し、Apacheなどの設定ファイルも⼿ 動で切り替えたり編集する必要があった • 5系のアプリケーションはマイナーバージョン関係なく5系のXAMPPで • XAMPP⾃体のインストールがつらい • バージョン固定なので、社内のファイルサーバのXAMPPのzipを利⽤ • 環境構築だけで1⽇以上かかる • バッチのローカル開発環境は存在しなかった • などなど。。。
17. 17 我々の開発環境の変遷 XAMPP期から・・・ ︖ 2013 2019 2016 2014 2015 2017 2018
18. 18 Vagrant期 (with VirtualBox)
19. 19 Vagrant期 当時の状況 • Double XAMPPの環境が⾟いことに気付きだす • 環境構築が⼿動もつらい・・・ • 当時Infrastructure as Codeがだいぶ流⾏ってきていた • ローカル環境構築をまず⾃動化したいお気持ちがムクムク • 少なからずPHPのバージョンアップをしているのでローカルに必要な環境も 増える • Vagrant + VirtualBoxの環境を構築︕
20. 20 Vagrant期 なにが良くなった︖︖ • 環境構築の⾃動化が進んだ︕ • Vagrant + VirtualBox + Chef • Boxファイルを配布することで、初回の環境構築の簡略化 • かなり初期の環境構築が楽になった • 複数環境の同時起動ができるようになった • 別々の仮想環境を⽴ち上げるかたち • 1つの仮想環境の中に詰め込めば︖という話はあるのですが・・・
21. 21 Multi Vagrant
22. 22 Vagrant期 問題点 ローカルマシン 管理画⾯⽤ 内部API⽤ PCサイト⽤
23. 23 Vagrant期 問題点 • 複数環境⽴ち上げた場合のPCのリソース消費がつらい・・・ • 基本的にそれぞれのプロダクトやアプリケーションの担当者が仮想環境 を構築していた • 複数のBoxファイル、Boxファイル化してないアプリケーションも • OSやパッケージのアップデートなどでプロビジョニングのタイ ミングでエラーになってしまったり • Chef vs Ansibleなど構築ツールも実は様々・・・ • ということで1つの仮想環境にまとめられていなかった
24. 24 Vagrant期 問題点 • 仮想環境の起動が遅い • vagrant up したあとまぁまぁ時間がかかる（環境が複数ありますし） • ⾃動化しきれていない部分がまだまだあった • XAMPPの環境は捨てきれていない・・・・・・・・ • チーム全体で動けていたわけではなかった • 全社で利⽤していたウイルス対策ソフトの相性問題 • 最新のVirtualBoxが利⽤できなかった • などなど。。。
25. 25 我々の開発環境の変遷 Vagrant期から・・・ ︖ 2013 2019 2016 2014 2015 2017 2018
26. 26 第1次 Docker期 (Docker in VirtualBox)
27. 27 第1次 Docker期 当時の状況 • ちゃんとチームで開発環境問題を解決しよう︕という流れになってきた • それでも最初は数⼈の有志メンバーで喧々諤々 • 使うツールも（なるべく）揃えよう︕ • Dockerがよいのでは︖ • この辺は⼿段が⽬的化していたかもしれない。やりたかった。 • VirtualBoxの中にDocker環境を構築︕ • Packerを利⽤して、既存の資産(ChefやAnsible)を⽣かしながらDockerイ メージを作成
28. 28 第1次 Docker期 なにが良くなった︖︖ Private Docker Registry ローカルマシン(Win7)
29. 29 第1次 Docker期 なにが良くなった︖︖ • Dockerを使うことで開発環境が1つでOKになった • Vagrantでたてた仮想環境上にDockerをインストール • docker-compose up -d するだけで環境構築が完了するようになった • コンテナ数は多いですが、⼀気にコンテナを起動し、依存のあるサービ スが⼀度に⽴ち上がる • 残っていた古いPHPのXAMPPの環境もコンテナイメージ化 • Dockerが使えてウキウキ︕ • （全てのコンテナをそろえるのに半年くらいはかかってしまった）
30. 30 だいぶ整ったのでは︖
31. 31 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • 半年後に発覚。たしかに、環境構築をし直すのが⾯倒なのは分かる・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。
32. 32 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • 半年後に発覚。たしかに、環境構築をし直すのが⾯倒なのは分かる・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。
33. 33 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • たしかに、環境構築をし直すのが⾯倒なのは分かる・・・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。 https://speakerdeck.com/blue_goheimochi/phpconsen2019
34. 34 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • たしかに、環境構築をし直すのが⾯倒なのは分かる・・・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。 https://speakerdeck.com/blue_goheimochi/phpconsen2019 フルリプレイスがほぼほぼ完了しています︕ (どこかで報告できたらいいな)
35. 35 ︖ 我々の開発環境の変遷 第1次 Docker期から・・・ 2013 2019 2016 2014 2015 2017 2018
36. 36 第2次 Docker期
37. 37 第2次 Docker期 当時の状況 • Windows・・・つらくない︖ • (≒Docker in VirtualBox・・・つらくない︖) • みんな・・・たのむ・・・開発環境移⾏してくれ・・・・ • よし、みんな、開発環境をMacに移⾏だ︕ • 端末の交換時期とも重なり、メンバー全員のローカルマシンが Mac Book Proにリプレイス
38. 38 第2次 Docker期 なにが良くなった︖︖ Private Docker Registry ローカルマシン(MacBook Pro) Docker for Mac
39. 39 第2次 Docker期 なにが良くなった︖︖ • メンバー全員がMacになりDocker for Macが利⽤可能に • 体感的にはとても速くなった（遅いという話も聞きますが・・） • リモートワーク推奨などの流れもあり、徐々に変えていっている過程 • 強制的に全員が環境構築を再度できた • 少しずつメンバーがコンテナを作ったり修正してくれるような感じに︕ • この辺は本当に継続は⼒なりだなぁ・・と • でもまだまだ全員に触ってもらえているわけではない • この辺りは技術的な課題というよりもチームビルディングに課題感が
40. 40 我々の開発環境の変遷 第2次 Docker期・・・完・・・ 2013 2019 2016 2014 2015 2017 2018
41. 41 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期
42. 42 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期 • 第3次 Docker期︖︖︖
43. 43 第3次 Docker期︖︖︖ 現在の状況 • よりチームメンバーにコンテナを触ってもらいたい︕ • 徐々に機会を増やすようにする • Packer経由でAnsibleなどで構築しているコンテナをDockerfileベース に直していくというようなことを進めています • それ以外にあまり問題点は感じていない • たださらなるステップアップとしてできそうなことはある • 本番環境でのコンテナ運⽤︕ • これができれば本番環境とローカル環境とほぼほぼ同じにできる
44. 44 まさに、現在 チャレンジ中です
45. 45 第3次 Docker期︖︖︖ チャレンジ • クラウド化の実現 • アプリケーションの刷新 • フロントエンド︓ Nuxt.js • バックエンド︓Laravel • 本番環境でのコンテナ運⽤ • インフラチーム（SREチームを新設）とのさらなる連携 • の第1弾を 2019年9⽉にリリース しました︕ • 継続してよりよい環境になるよう頑張っています︕
46. 46 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期 • 第3次 Docker期 ← Now
47. 47 最後に ⼀番伝えたかったこと
48. 48 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now ここまでくるのにほぼ6年半
49. 49 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 速いと思いますか︖ 遅いと思いますか︖
50. 50 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now https://www.slideshare.net/ohashiyuta/5docker 個⼈的にDockerを触り始めたのは2014年
51. 51 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 実践したいができずに ⻭がゆい気持ちはあった
52. 52 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now あそこの会社ではやってるのに・・・
53. 53 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now ただ振り返ってみるとこう思います
54. 54 「変化」を起こすためには 「時間」は必要
55. 55 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now チームの体制や状況に⼤きく関係するが そのチームでできる最速が「最速」である
56. 56 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 常に情報をキャッチアップし準備し 然るべきタイミングで⼒を注ぎ込む
57. 57 この約6年半の チームの取り組みを 我々は誇りに思っています
58. 58 We are hiring !
59. 59 Tech Stack
60. 60 Φ΢έΠ΢ΣΠϰͷ੍౓ ݄༵ޕલӦۀٳ 「オウケイウェイヴ ブルーマンデー 対策」 https://otekomachi.yomiuri.co.jp/news/20181217-OKT8T119021/
61. 61 Φ΢έΠ΢ΣΠϰͷ੍౓ #BS
    εϖʔε 世界のビールが飲み放題（ソフトドリンクもあるよ）
62. 62 ご清聴ありがとうございました