Tweet
Tweet

Slide 1

Slide 1 text

Qiita Engineer Festa 2023 〜私しか得しないニッチな技術でLT〜 Web IDE環境を俺好みに準備するための技術 2023/07/14 渡邉 洋平

Slide 2

Slide 2 text

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)

Slide 3

Slide 3 text

来てね！

Slide 4

Slide 4 text

今回話すこと 「Web IDE 環境を俺好みに準備するための技術」 「Gitpod を俺好みに準備するための技術」 原稿落としました より「私しか得しない」という事で……！

Slide 5

Slide 5 text

Gitpod OSS ベースの WebIDE サービス 無料枠が 50 時間と大きい スペック(小)): 4core/8RAM/30GB シンプルに使いやすい(私見) 出典： https://www.gitpod.io/svg/media- kit/logo-light-theme.svg

Slide 6

Slide 6 text

Why Gitpod? AWS CDK Contribure Guide Dev Container もあるけど 出典：https://github.com/aws/aws- cdk/blob/main/CONTRIBUTING.md#dev -container

Slide 7

Slide 7 text

Usage(1/3) 1. gitpod.io/# を GitHub の URL に追加

Slide 8

Slide 8 text

Usage(2/3) 2. マシンスペック選択

Slide 9

Slide 9 text

Usage(3/3) 3. WebIDE の起動

Slide 10

Slide 10 text

Gitpod 困る点 定形動作を自動化した い！！！！ .gitpod.yml での設定は、 リポジトリ共通の Pre-build 出典：https://github.com/aws/aws- cdk/blob/main/.gitpod.yml

Slide 11

Slide 11 text

私が欲しい設定 1. GitHub のメアド隠す 2. 便利コマンド導入 AWS CLI v2 & bash 補完 3. 機密情報のコミット防止 Gitleaks を導入

Slide 12

Slide 12 text

参考：Gitleaks 引用元: https://github.com/gitleaks/gitleaks 採用モチベーション CDK のテストに使う、AWS Credential の 誤 Push を防 ぐ目的 git-secrets と比べ、他 Credential の誤 Push も防げ そう

Slide 13

Slide 13 text

Gitpod における Dotfiles(1/3) Gitpod には Dotfiles を設定で きる

Slide 14

Slide 14 text

Gitpod における Dotfiles(2/3) ※公式ドキュメント https://www.gitpod.io/docs/configure/user-settings/dotfiles

Slide 15

Slide 15 text

Gitpod における Dotfiles(3/3) Sample リポジトリを Fork すれば良さそ う。 https://github.com/gitpod-samples/demo-dotfiles- with-gitpod 起動スクリプトを Trigger にして、各スク リプトを実行すればよさそう Default だと ~/.dotfiles/scripts/* が対象

Slide 16

Slide 16 text

スクリプトを書く 1. GitHub のメアド隠し……成功！

Slide 17

Slide 17 text

スクリプトを書く 2. AWS CLI v2 導入…… 成功！！

Slide 18

Slide 18 text

スクリプトを書く 3. 機密情報のコミット防止……失敗！！！ .gitpod.yml のイメージに brew コマンドがない

Slide 19

Slide 19 text

Gitleaks の Install 事情 HomeBrew Linux 導入用のコマンドは対話式が前 提であり、導入が少し面倒 Docker Pre-commit hook が煩雑？ Build(Go) 通常なら

Slide 20

Slide 20 text

Dotfiles の時間制限 スクリプト実行 ＜ 120 Sec

Slide 21

Slide 21 text

そうだ、GitHub Actions だ

Slide 22

Slide 22 text

GitHub Actions で Pre-Build Gitpod 用の Dotfiles は GitHub 上にある前提 Dotfiles 一式は、Gitpod 起動ごとに、 /home/gitpod/.dotfiles へダウンロード ＝事前に GitHub Actions でビルド済のバイナリ作ればいい

Slide 23

Slide 23 text

ひさびさの GitHub Actions GitHub Actions 開発のモダンな 作り方と言えば……？ 大正義 ChatGPT でひな形を 作る 公式ドキュメント＋ Qiita で 完成させていく

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ちゃんと CI できたね 3. 機密情報のコミット防止...成功！！！

Slide 26

Slide 26 text

完成！ 快適な OSS Contribute 生活へ 調子に乗って他のコードも書く https://github.com/honojs/hono/release s/tag/v3.3.0

Slide 27

Slide 27 text

Web IDE、おススメです 楽しく OSS Contribute！

Slide 28

Slide 28 text

Appendix. 今回の内容は、以下でも解説しています Gitpod で Git の Email 情報を自動でマスクする Gitpod で AWS CDK に Contribute するための dotfiles を作る (公開予定)