Github Codespace で始めるリモート開発

1. GitHub Codespaces で始めるリモート開発
 株式会社 DROBE
 CTO 都筑友昭

2. 2 自己紹介 名前　　: 都筑 友昭 出身地　: 千葉県 趣味　　: 広く浅く色んな事が好き 他　　　: 2児の父 新卒で半導体の会社に就職 ソーシャルゲームの開発やコンサルティング会社を経て 2019 年より株式会社 DROBE の CTO
3. みなさん、リモート開発していますか？

4. 私はめちゃくちゃしています! (笑)

5. リモート開発、快適ですが
 困りごともあるんじゃないでしょうか？

6. リモート開発の困りごと • ⏳ 開発環境のセットアップに時間が掛かる • 🤓 新しく参加される方がセットアップにハマった際に、サポートの負荷が割と高い • 📑 セットアップのドキュメントを整備していくコストが高い ◦ もし windowns なら XXX をしてください、など環境などに合わせた注釈が必要になってくる • 󰠁 リモートであるがゆえに席に来てもらって開発中の画面を触ってもらう、が出来ない ◦ 例えばアニメーションの確認 ◦ 例えばローカル環境の構築でハマっている時に一緒に見る
7. リモート開発の困りごと • ⏳ 開発環境のセットアップに時間が掛かる • 🤓 新しく参加される方がセットアップにハマった際に、サポートの負荷が割と高い • 📑 セットアップのドキュメントを整備していくコストが高い ◦ もし windowns なら XXX をしてください、など環境などに合わせた注釈が必要になってくる • 󰠁 リモートであるがゆえに席に来てもらって開発中の画面を触ってもらう、が出来ない ◦ 例えばアニメーションの確認 ◦ 例えばローカル環境の構築でハマっている時に一緒に見る
8. リモート開発の困りごと • ⏳ 開発環境のセットアップに時間が掛かる • 🤓 新しく参加される方がセットアップにハマった際に、サポートの負荷が割と高い • 📑 セットアップのドキュメントを整備していくコストが高い ◦ もし windowns なら, もし M1 mac なら、など環境などに合わせた注釈が必要になってくる • 󰠁 リモートであるがゆえに席に来てもらって開発中の画面を触ってもらう、が出来ない ◦ 例えばアニメーションの確認 ◦ 例えばローカル環境の構築でハマっている時に一緒に見る
9. リモート開発の困りごと • ⏳ 開発環境のセットアップに時間が掛かる • 🤓 新しく参加される方がセットアップにハマった際に、サポートの負荷が割と高い • 📑 セットアップのドキュメントを整備していくコストが高い ◦ もし windowns なら, M1 mac なら、など環境などに合わせた注釈が必要になってくる • 󰠁 リモートであるがゆえに席に来てもらって開発中の画面を触ってもらう、が出来ない ◦ 例えばアニメーションの確認 ◦ 例えばローカル環境の構築でハマっている時に一緒に見る
10. 本日は、そんな困りごとを解決できる
 GitHub Codespaces を紹介します!

11. お品書き
 • GitHub Codespaces とは • Codespaces のセットアップ • 画面の共有 / Port forwarding • Laravel に特有の設定 • Codespaces を使う事による開発体験の変化

12. Disclaimer (免責事項)
 皆様におかれましては PhpStorm をお使いの方も多いのではと思っておりますが、現時点では Codespace を PhpStorm で使う方法を把握しておりません IDE は VSCode を使う事を前提としたセッションとなりますのでご注意ください
13. GitHub Codespaces とは？

14. GitHub Codespaces とは？
 GitHub Codespaces はクラウド開 発環境です
 
 今まで Mac や Windows で行って いたような開発を全てクラウドで行 う事が出来るようになります 
 https://docs.github.com/en/codespaces/overview
15. GitHub Codespaces の特徴
 クラウドで実行
 開発に必要なマシンのスペックを簡単に変更出来る 
 
 2022年8月現在、最大で 32-core 64GB メモリのマシン を従量課金で利用可能 
 https://github.co.jp/features/codespaces
16. GitHub Codespaces の特徴
 ブラウザでプレビュー可能 
 
 VSCode で動かしている場合は Port Forward によって localhost で開発中のページにアクセス可能 
 
 開発中のサービスを公開、もしくはチーム内に公開する も可能で、その場合は個別の url が発行される 
 https://github.co.jp/features/codespaces
17. GitHub Codespaces の特徴
 複数の Codespaces 環境を同時に立ち上げる事も簡単 に出来る
 複数の repo の codespaces 環境を同時に保持できる 同時に実行する事ももちろん可能
18. GitHub Codespaces の特徴
 ツールや環境をパーソナライズできる 
 github で公開している repo を設定 install.sh install bootstrap.sh bootstrap script/bootstrap setup.sh setup script/setup repo の中に以下のファイルがあると codespaces の立ち上げ時に実行される
19. GitHub Codespaces の特徴
 アクティブな状態とインアクティブな状態がある 
 
 課金はアクティブ状態のインスタンスの CPU 時間と、全 ての Codespace のストレージ使用量に対して行われる 
 
 インスタンスで作業していた内容はインアクティブになっ ても消える事はなく、保持される 

20. GitHub Codespaces の特徴
 Prebuild という機能を使う事で、開発環境のセットアップ に必要なコマンドなどがあらかじめ実行された状態で開 始出来る

21. GitHub Codespaces を立ち上げてみる
 弊社環境ではだいたい 2 分くらいで立ち上げが終わります
22. 立ち上がった Codespaces はどういう状態かと言うと
 $ git submoudle update –init $ docker-compose build $ docker-compose up -d $ docker-compose exec app-container-name composer install $ docker-compose exec app-container-name php artisan key:generate $ docker-compose exec app-container-name npm ci # Frontend を Laravel mix で build する $ docker-compose exec app-container-name npm run dev $ docker-compose exec app-container-name php artisan migrate $ docker-compose exec app-container-name php artisan db:seed # 開発に便利なデータを入れる独自コマンド $ docker-compose exec app-container-name php artisan dev:setup-user 以下のようなコマンドが全て実行済みの状態になります
23. GitHub Codespaces を立ち上げてみる
 数分で確実に誰でも (GitHub で repository に対する権限さえあれば) すぐに開発出来る環境が整います
24. Codespaces のセットアップ

25. devcontainer のセットアップのしかた
 repository の root に .devcontainer/devcontainer.json を作ります
26. devcontainer のセットアップのしかた
 devcontainer.json は Codespacess の設定ファイル devcontainer.json で指定された Dockerfile を使って build したコンテナが開発環境となります { ... "build": { "dockerfile": "Dockerfile" }, ... } https://docs.github.com/ja/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers 最もシンプルな devcontainer.json
27. devcontainer の内容
 devcontainer.json Feature の定義 ここに書いた feature はDockerfile には書か なくても devcontainer で使える VSCode の settings.json に書く内容をここに 記載しておける VSCode で使う extension の設定 prebuild 時に叩くコマンドの定義
28. php8.1 を使った devcontainer の例
 devcontainer.json Dockerfile
29. devcontainer と docker-in-docker
 devcontainer は container なので、特別な設定を入れないと docker-compose などは 使えない
30. devcontainer と docker-in-docker

31. devcontainer devcontainer と docker-in-docker
 docker-in-docker が必要
32. devcontainer と docker-in-docker
 devcontainer で docker-in-docker を使うにはいくつか方法がある - Microsoft が提供する Development Container Scripts を使う - Dev Container Features を使う DROBE では Development Container Script を使っていますが、Dev Container Features を使う方がお手軽かもしれません devcontainer の定義の詳しい設定についてはブログを書いたのでそちらを参照してください ! (https://info.drobe.co.jp/blog/engineering/github-codespaces)
33. devcontainer の内容
 devcontainer.json Feature の定義 ここに書いた feature はDockerfile には書か なくても devcontainer で使える
34. codespaces を起動
 緑色の「 <> Code ∨」ボタンを押し、モーダル内の「Codespaces」タブを選択し、ボタンのプルダウンから「Configure and create codespace」を選択してボタンをクリック
35. codespaces を起動
 ブランチとマシンタイプを選択
36. codespaces を起動
 起動を待つ
37. codespaces を起動
 起動完了 ターミナルが使えます
38. ここまでで、codespace を使えるようになるが、前述の prebuild を使うとさらに便利になります 通常 Laravel などの開発環境だと git clone 後に php artisan migarte などを叩くと思い ますが、そういったセットアップ系のコマンドが全て完了した状態で codespaces を起動出来るよう になります
39. prebuild の設定

40. 画面の共有 / Port forwarding

41. Codespaces では http://localhost:PORT or http://127.0.0.1:PORT のような localhost で起動している port は自動的に forward されます Port forwarding とは

42. localhost:80 127.0.0.1:59091 local machine の port が forward されて Codespace の localhost:80 に接続出来るようになる forward される port は再起動する度に変わるので注意が必要 codespaces に繋いだ VSCode によって port forward される
43. codespace の localhost で動いている全ての port が forward されている local マシンのこの port を叩くと codespace に繋がる この例では codespace の port 80 に繋ぎたければ local machine の 127.0.0.1:59091 を見に行けば良い
44. チームで URL を共有する場合
 Visibiliy を Private to Organization にすると、同じ GitHub organization に属しているユーザーに codespace で動いている port をシェア出来るようになる Local Address に url が発行され、port forwarding していない環境からでも接続可能になる
45. localhost:80 https://n-org-repo-hash-80.gith ubpreview.dev/ https://n-org-repo-hash-80.gith ubpreview.dev/ URL が発行されるので、Github の権限さえあれば port forwading して いないマシンからでも接続が出来る 開発者のマシン
46. localhost:80 https://n-org-repo-hash-80.gith ubpreview.dev/ https://n-org-repo-hash-80.gith ubpreview.dev/ 開発者のマシン localhost:8080 例えば docker-compose で phpmyadmin などをセットアップしておけ ば、開発者の環境の DB を覗いたりも出来る https://n-org-repo-hash-8080.git hubpreview.dev/
47. Laravel に特有の設定

48. Laravel 固有の設定として気をつけないといけない事
 Laravel の helper 関数で絶対 URL を返すようなメソッドには気をつける必要がある
49. Laravel 固有の設定として気をつけないといけない事
 // こんな感じで定義されたルートを Route::get('/welcome', 'WelcomeController@welcome')->name('welcome'); // こんな感じで呼び出す route(‘welcome’); https://localhost/welcome 上記コードの出力結果 https://n-org-repo-hash-80.githubpreview.dev/welcome Private to Organization にしている場合はこうなって欲しい
50. ではどうするか？

51. Laravel 固有の設定として気をつけないといけない事
 route 以外にも asset や url などいくつか同じような挙動をする関数がある 使っている関数によって自作の wrapper を入れる
52. Codespaces を使う事による開発体験の変化

53. 新入社員、業務委託、副業などのオンボーディング
 まず間違いなく動くので、契約形態を問わず誰でも初日から開発を開始してもらえる ここで、開発マシンの OS やスペックなどは一切気にしなくても大丈夫
54. PR のレビュー
 たとえば composer.json に diff があった際などに、実際に意図した動きになっているかを確認 するのは手間だったりする // 場合によっては stash などする git stash // checkout する git checkout -b feature/hogehoge remotes/origin/faeture/hogehoge // composer install して動作確認 composer install // 確認がおわったらブランチを元にもどして composer install しなおす git checkout -b feature/foobar composer install
55. PR のレビュー
 Codespaces であれば数分でクリーンな環境が立ち上がるので、そこで動作確認をしながらレビュー を行い、終わったら環境毎削除、などが本当に簡単に出来る
56. 開発中の機能の画面をチームで共有
 開発した画面のアニメーションをデザイナーに見てもらう、などリモートじゃなければ当たり前に出来て いた事が Codespaces を使うとリモートでも当たり前に出来るようになる 開発中の機能 エンジニア、デザイナー、PM などチー ム全員が誰かが開発している途中の画 面を閲覧して触る事が出来る
57. まとめ

58. まとめ 本日はGitHub Codespaces のご紹介をしました! とても便利で、リモート開発に関連した悩みが解決する可能性があるので、是非試してみてください!
59. We are hiring!!
 59 採用情報 https://info.drobe.co.jp/jobs エンジニアリング資料 https://info.drobe.co.jp/engineering 少しでも気になった方、お気軽にご連絡ください!! 
 カジュアルにお話するだけでも大歓迎です! 
 Twitter Meety