Tweet
Tweet

Slide 1

Slide 1 text

#phpconokinawa #track_b 6年かけてこうなった︕ 我々の開発環境の変遷と現在 PHPカンファレンス沖縄2019 2019.10.12 株式会社オウケイウェイヴ ⼤橋 佑太

Slide 2

Slide 2 text

2 blue_goheimochi ⼤橋 佑太 株式会社オウケイウェイヴ PHP(Laravel),Javascript(Vue.js/Nuxt.js), Laravel JP Conference 2020, PHPerKaigi 2020 … おおはし ゆうた 2013年5⽉〜

Slide 3

Slide 3 text

3 オウケイウェイヴの事業 ミッション︓ 互い助け合いの 場の創造を通して、 物⼼両⾯の幸福を実現し、 世界の発展に寄与する 多⾔語コールセンター 運営および インバウンドサービス エンタープライズ ソリューション事業部 コンシューマー ソリューション事業部 多⾔語CRM事業 （株式会社BRICKS） 法⼈向け ソリューションの 製造/販売 Q&Aサイト 「OKWAVE」の 運営および広告事業

Slide 4

Slide 4 text

4 Q&Aサイト「OKWAVE」

Slide 5

Slide 5 text

5 Q&Aサイト「OKWAVE」 質問者と回答者がやりとりして疑問を解決

Slide 6

Slide 6 text

6 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 新バッチ バッチ 旧バッチ 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache ※2013年当時

Slide 7

Slide 7 text

7 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 新バッチ バッチ 旧バッチ 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache 本体サイト OEMサイト アプリ等 WebAPI 内部API 管理画⾯ バッチ ※2013年当時

Slide 8

Slide 8 text

8 Q&Aサイト「OKWAVE」 PCサイト SPサイト ガラケーサイト OEMサイト1 OEMサイト2 アプリ(iPhone) アプリ(Android) 内部API データベース 管理画⾯⽤ 内部API 管理画⾯ PCサイト SPサイト ガラケーサイト WebAPI Cache Cache 新バッチ バッチ 旧バッチ ※2013年当時

Slide 9

Slide 9 text

9 というような環境における開発環境の 変遷についてお話ししていきます 開発環境構築ツールの良し悪し話はしません

Slide 10

Slide 10 text

10 ︖ ︖ 我々の開発環境の変遷 ⼤きく分けると4つの時代に分かれる 2013 2019 2016 2014 2015 2017 2018 ︖ ︖

Slide 11

Slide 11 text

11 XAMPP期

Slide 12

Slide 12 text

12 XAMPP期 当時の状況 • 私⾃⾝は2013年5⽉に⼊社 • 「OKWAVE」は2000年1⽉から正式運⽤開始 • 2005年に「OKWeb」から改名 • 13年超の歴史あるサービスにJOIN • 開発機はWindows

Slide 13

Slide 13 text

13 Double XAMPP

Slide 14

Slide 14 text

14 XAMPP期 当時の状況 • 私⾃⾝は2013年5⽉に⼊社 • 「OKWAVE」は2000年1⽉から正式運⽤開始 • 2005年に「OKWeb」から改名 • 13年超の歴史あるサービスにJOIN • 開発機はWindows • Dobule XAMPP・・・︖ • プロダクトのPHPのバージョンが2系統(お察しください) • ということで2つのバージョンのXAMPPが共存して存在

Slide 15

Slide 15 text

15 XAMPP期 当時まだスレてなかったわたし なるほど︕OKWAVEはこのような 開発環境なんですね︕ がんばります︕タスクください︕

Slide 16

Slide 16 text

16 XAMPP期 問題点 • XAMPPを切り替える場合、⽚⽅を停⽌し、Apacheなどの設定ファイルも⼿ 動で切り替えたり編集する必要があった • 5系のアプリケーションはマイナーバージョン関係なく5系のXAMPPで • XAMPP⾃体のインストールがつらい • バージョン固定なので、社内のファイルサーバのXAMPPのzipを利⽤ • 環境構築だけで1⽇以上かかる • バッチのローカル開発環境は存在しなかった • などなど。。。

Slide 17

Slide 17 text

17 我々の開発環境の変遷 XAMPP期から・・・ ︖ 2013 2019 2016 2014 2015 2017 2018

Slide 18

Slide 18 text

18 Vagrant期 (with VirtualBox)

Slide 19

Slide 19 text

19 Vagrant期 当時の状況 • Double XAMPPの環境が⾟いことに気付きだす • 環境構築が⼿動もつらい・・・ • 当時Infrastructure as Codeがだいぶ流⾏ってきていた • ローカル環境構築をまず⾃動化したいお気持ちがムクムク • 少なからずPHPのバージョンアップをしているのでローカルに必要な環境も 増える • Vagrant + VirtualBoxの環境を構築︕

Slide 20

Slide 20 text

20 Vagrant期 なにが良くなった︖︖ • 環境構築の⾃動化が進んだ︕ • Vagrant + VirtualBox + Chef • Boxファイルを配布することで、初回の環境構築の簡略化 • かなり初期の環境構築が楽になった • 複数環境の同時起動ができるようになった • 別々の仮想環境を⽴ち上げるかたち • 1つの仮想環境の中に詰め込めば︖という話はあるのですが・・・

Slide 21

Slide 21 text

21 Multi Vagrant

Slide 22

Slide 22 text

22 Vagrant期 問題点 ローカルマシン 管理画⾯⽤ 内部API⽤ PCサイト⽤

Slide 23

Slide 23 text

23 Vagrant期 問題点 • 複数環境⽴ち上げた場合のPCのリソース消費がつらい・・・ • 基本的にそれぞれのプロダクトやアプリケーションの担当者が仮想環境 を構築していた • 複数のBoxファイル、Boxファイル化してないアプリケーションも • OSやパッケージのアップデートなどでプロビジョニングのタイ ミングでエラーになってしまったり • Chef vs Ansibleなど構築ツールも実は様々・・・ • ということで1つの仮想環境にまとめられていなかった

Slide 24

Slide 24 text

24 Vagrant期 問題点 • 仮想環境の起動が遅い • vagrant up したあとまぁまぁ時間がかかる（環境が複数ありますし） • ⾃動化しきれていない部分がまだまだあった • XAMPPの環境は捨てきれていない・・・・・・・・ • チーム全体で動けていたわけではなかった • 全社で利⽤していたウイルス対策ソフトの相性問題 • 最新のVirtualBoxが利⽤できなかった • などなど。。。

Slide 25

Slide 25 text

25 我々の開発環境の変遷 Vagrant期から・・・ ︖ 2013 2019 2016 2014 2015 2017 2018

Slide 26

Slide 26 text

26 第1次 Docker期 (Docker in VirtualBox)

Slide 27

Slide 27 text

27 第1次 Docker期 当時の状況 • ちゃんとチームで開発環境問題を解決しよう︕という流れになってきた • それでも最初は数⼈の有志メンバーで喧々諤々 • 使うツールも（なるべく）揃えよう︕ • Dockerがよいのでは︖ • この辺は⼿段が⽬的化していたかもしれない。やりたかった。 • VirtualBoxの中にDocker環境を構築︕ • Packerを利⽤して、既存の資産(ChefやAnsible)を⽣かしながらDockerイ メージを作成

Slide 28

Slide 28 text

28 第1次 Docker期 なにが良くなった︖︖ Private Docker Registry ローカルマシン(Win7)

Slide 29

Slide 29 text

29 第1次 Docker期 なにが良くなった︖︖ • Dockerを使うことで開発環境が1つでOKになった • Vagrantでたてた仮想環境上にDockerをインストール • docker-compose up -d するだけで環境構築が完了するようになった • コンテナ数は多いですが、⼀気にコンテナを起動し、依存のあるサービ スが⼀度に⽴ち上がる • 残っていた古いPHPのXAMPPの環境もコンテナイメージ化 • Dockerが使えてウキウキ︕ • （全てのコンテナをそろえるのに半年くらいはかかってしまった）

Slide 30

Slide 30 text

30 だいぶ整ったのでは︖

Slide 31

Slide 31 text

31 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • 半年後に発覚。たしかに、環境構築をし直すのが⾯倒なのは分かる・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。

Slide 32

Slide 32 text

32 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • 半年後に発覚。たしかに、環境構築をし直すのが⾯倒なのは分かる・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。

Slide 33

Slide 33 text

33 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • たしかに、環境構築をし直すのが⾯倒なのは分かる・・・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。 https://speakerdeck.com/blue_goheimochi/phpconsen2019

Slide 34

Slide 34 text

34 第1次 Docker期 問題点 • ファイル読み込みが重い • Vagrantの共有フォルダ → コンテナイメージがマウント • Dockerの環境を使ってくれていないチームメンバーが・・・ • たしかに、環境構築をし直すのが⾯倒なのは分かる・・・・ • 古いコンテナのビルドが通らなくなる • CentOS5のコンテナ・・・・yumが・・・・・ • とりあえず作っておいて助かったがメンテナンスはきつい • などなど。。。 https://speakerdeck.com/blue_goheimochi/phpconsen2019 フルリプレイスがほぼほぼ完了しています︕ (どこかで報告できたらいいな)

Slide 35

Slide 35 text

35 ︖ 我々の開発環境の変遷 第1次 Docker期から・・・ 2013 2019 2016 2014 2015 2017 2018

Slide 36

Slide 36 text

36 第2次 Docker期

Slide 37

Slide 37 text

37 第2次 Docker期 当時の状況 • Windows・・・つらくない︖ • (≒Docker in VirtualBox・・・つらくない︖) • みんな・・・たのむ・・・開発環境移⾏してくれ・・・・ • よし、みんな、開発環境をMacに移⾏だ︕ • 端末の交換時期とも重なり、メンバー全員のローカルマシンが Mac Book Proにリプレイス

Slide 38

Slide 38 text

38 第2次 Docker期 なにが良くなった︖︖ Private Docker Registry ローカルマシン(MacBook Pro) Docker for Mac

Slide 39

Slide 39 text

39 第2次 Docker期 なにが良くなった︖︖ • メンバー全員がMacになりDocker for Macが利⽤可能に • 体感的にはとても速くなった（遅いという話も聞きますが・・） • リモートワーク推奨などの流れもあり、徐々に変えていっている過程 • 強制的に全員が環境構築を再度できた • 少しずつメンバーがコンテナを作ったり修正してくれるような感じに︕ • この辺は本当に継続は⼒なりだなぁ・・と • でもまだまだ全員に触ってもらえているわけではない • この辺りは技術的な課題というよりもチームビルディングに課題感が

Slide 40

Slide 40 text

40 我々の開発環境の変遷 第2次 Docker期・・・完・・・ 2013 2019 2016 2014 2015 2017 2018

Slide 41

Slide 41 text

41 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期

Slide 42

Slide 42 text

42 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期 • 第3次 Docker期︖︖︖

Slide 43

Slide 43 text

43 第3次 Docker期︖︖︖ 現在の状況 • よりチームメンバーにコンテナを触ってもらいたい︕ • 徐々に機会を増やすようにする • Packer経由でAnsibleなどで構築しているコンテナをDockerfileベース に直していくというようなことを進めています • それ以外にあまり問題点は感じていない • たださらなるステップアップとしてできそうなことはある • 本番環境でのコンテナ運⽤︕ • これができれば本番環境とローカル環境とほぼほぼ同じにできる

Slide 44

Slide 44 text

44 まさに、現在 チャレンジ中です

Slide 45

Slide 45 text

45 第3次 Docker期︖︖︖ チャレンジ • クラウド化の実現 • アプリケーションの刷新 • フロントエンド︓ Nuxt.js • バックエンド︓Laravel • 本番環境でのコンテナ運⽤ • インフラチーム（SREチームを新設）とのさらなる連携 • の第1弾を 2019年9⽉にリリース しました︕ • 継続してよりよい環境になるよう頑張っています︕

Slide 46

Slide 46 text

46 我々の開発環境の変遷 • XAMPP期 • Vagrant期 • 第1次 Docker期 • 第2次 Docker期 • 第3次 Docker期 ← Now

Slide 47

Slide 47 text

47 最後に ⼀番伝えたかったこと

Slide 48

Slide 48 text

48 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now ここまでくるのにほぼ6年半

Slide 49

Slide 49 text

49 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 速いと思いますか︖ 遅いと思いますか︖

Slide 50

Slide 50 text

50 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now https://www.slideshare.net/ohashiyuta/5docker 個⼈的にDockerを触り始めたのは2014年

Slide 51

Slide 51 text

51 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 実践したいができずに ⻭がゆい気持ちはあった

Slide 52

Slide 52 text

52 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now あそこの会社ではやってるのに・・・

Slide 53

Slide 53 text

53 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now ただ振り返ってみるとこう思います

Slide 54

Slide 54 text

54 「変化」を起こすためには 「時間」は必要

Slide 55

Slide 55 text

55 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now チームの体制や状況に⼤きく関係するが そのチームでできる最速が「最速」である

Slide 56

Slide 56 text

56 我々の開発環境の変遷 第3次 Docker期 ← いまここ 2013 2019 2016 2014 2015 2017 2018 Now 常に情報をキャッチアップし準備し 然るべきタイミングで⼒を注ぎ込む

Slide 57

Slide 57 text

57 この約6年半の チームの取り組みを 我々は誇りに思っています

Slide 58

Slide 58 text

58 We are hiring !

Slide 59

Slide 59 text

59 Tech Stack

Slide 60

Slide 60 text

60 Φ΢έΠ΢ΣΠϰͷ੍౓ ݄༵ޕલӦۀٳ 「オウケイウェイヴ ブルーマンデー 対策」 https://otekomachi.yomiuri.co.jp/news/20181217-OKT8T119021/

Slide 61

Slide 61 text

61 Φ΢έΠ΢ΣΠϰͷ੍౓ #BSεϖʔε 世界のビールが飲み放題（ソフトドリンクもあるよ）

Slide 62

Slide 62 text

62 ご清聴ありがとうございました