Web IDE環境を俺好みに準備するための技術

「Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜」にてお話した内容になります。
https://increments.connpass.com/event/285824/

Transcript

1. Qiita Engineer Festa 2023 〜私しか得しないニッチな技術でLT〜 Web IDE環境を俺好みに準備するための技術 2023/07/14 渡邉 洋平
2. About me Watanabe Yohei (Twitter: _@watany) NTT テクノクロス株式会社 Role: AWS Architect, Instructor, CCoE AWS Japan AWS Top Engineer (2023) ALL AWS Certifications Engineer(2022,2023) AWS Community Builder(Cloud Operations)
3. 来てね！
4. 今回話すこと 「Web IDE 環境を俺好みに準備するための技術」 「Gitpod を俺好みに準備するための技術」 原稿落としました より「私しか得しない」という事で……！
5. Gitpod OSS ベースの WebIDE サービス 無料枠が 50 時間と大きい スペック(小)): 4core/8RAM/30GB シンプルに使いやすい(私見) 出典： https://www.gitpod.io/svg/media- kit/logo-light-theme.svg
6. Why Gitpod? AWS CDK Contribure Guide Dev Container もあるけど 出典：https://github.com/aws/aws- cdk/blob/main/CONTRIBUTING.md#dev -container
7. Usage(1/3) 1. gitpod.io/# を GitHub の URL に追加
8. Usage(2/3) 2. マシンスペック選択
9. Usage(3/3) 3. WebIDE の起動
10. Gitpod 困る点 定形動作を自動化した い！！！！ .gitpod.yml での設定は、 リポジトリ共通の Pre-build 出典：https://github.com/aws/aws- cdk/blob/main/.gitpod.yml
11. 私が欲しい設定 1. GitHub のメアド隠す 2. 便利コマンド導入 AWS CLI v2 & bash 補完 3. 機密情報のコミット防止 Gitleaks を導入
12. 参考：Gitleaks 引用元: https://github.com/gitleaks/gitleaks 採用モチベーション CDK のテストに使う、AWS Credential の 誤 Push を防 ぐ目的 git-secrets と比べ、他 Credential の誤 Push も防げ そう
13. Gitpod における Dotfiles(1/3) Gitpod には Dotfiles を設定で きる
14. Gitpod における Dotfiles(2/3) ※公式ドキュメント https://www.gitpod.io/docs/configure/user-settings/dotfiles
15. Gitpod における Dotfiles(3/3) Sample リポジトリを Fork すれば良さそ う。 https://github.com/gitpod-samples/demo-dotfiles- with-gitpod 起動スクリプトを Trigger にして、各スク リプトを実行すればよさそう Default だと ~/.dotfiles/scripts/* が対象
16. スクリプトを書く 1. GitHub のメアド隠し……成功！
17. スクリプトを書く 2. AWS CLI v2 導入…… 成功！！
18. スクリプトを書く 3. 機密情報のコミット防止……失敗！！！ .gitpod.yml のイメージに brew コマンドがない
19. Gitleaks の Install 事情 HomeBrew Linux 導入用のコマンドは対話式が前 提であり、導入が少し面倒 Docker Pre-commit hook が煩雑？ Build(Go) 通常なら
20. Dotfiles の時間制限 スクリプト実行 ＜ 120 Sec
21. そうだ、GitHub Actions だ
22. GitHub Actions で Pre-Build Gitpod 用の Dotfiles は GitHub 上にある前提 Dotfiles 一式は、Gitpod 起動ごとに、 /home/gitpod/.dotfiles へダウンロード ＝事前に GitHub Actions でビルド済のバイナリ作ればいい
23. ひさびさの GitHub Actions GitHub Actions 開発のモダンな 作り方と言えば……？ 大正義 ChatGPT でひな形を 作る 公式ドキュメント＋ Qiita で 完成させていく
25. ちゃんと CI できたね 3. 機密情報のコミット防止...成功！！！
26. 完成！ 快適な OSS Contribute 生活へ 調子に乗って他のコードも書く https://github.com/honojs/hono/release s/tag/v3.3.0
27. Web IDE、おススメです 楽しく OSS Contribute！
28. Appendix. 今回の内容は、以下でも解説しています Gitpod で Git の Email 情報を自動でマスクする Gitpod で AWS CDK に Contribute するための dotfiles を作る (公開予定)