CLOSE

Web IDE環境を俺好みに準備するための技術(全1記事)

Gitpodを“オレ好み”に準備するための技術 欲しい設定を組み込み、楽しくOSSにコントリビュートする

自分がニッチだと思っているテーマについて発表する「Qiita Engineer Festa 2023〜私しか得しないニッチな技術でLT〜」。ここでNTTテクノクロス株式会社の渡邉氏が登壇。Gitpodを“オレ好み”に準備するための方法を紹介します。

渡邉氏の自己紹介

渡邉洋平氏:では始めていければと思います。「Web IDE環境を俺好みに準備するための技術」という話をしたいと思います。ということで、NTTテクノクロス株式会社というところに勤めている渡邉洋平と申します。Twitter(現X)IDが「@_watany」と書いていますが、ほかのアカウントも、Qiitaもwatany名義でいろいろ書いているので、よかったら見てもらえればと思います。

主にAWSを中心にインフラやアーキテクト周りの仕事をしているというところで、AWS的なところで活動する機会が多いので、そのあたりの方には今日の内容も話していることが多いですね。

AWS系のイベント、ユーザーイベントも7月からは主催というか、担当? 幹事というか(笑)。そういった会を開くことになったので、よかったら参加してもらえればと思います。第1回は7月25日付のお昼ですね。

今回話すことですが、“Web IDE”というでかい主語で書いちゃったなと思ったんですが、いざ書いてみると時間が足りなくて、さらにマニアックになっちゃいました。「Gitpodを俺好みに準備するための技術」になっちゃいました(笑)。

今回の登壇のテーマは「私しか得しない」ということで勘弁してもらえればと思います。原稿落としてごめんなさい。

「Gitpod」とは何か

Web IDEの中の「Gitpod」はどういう話かというと、OSSベースのWeb IDE……。IDEはみなさんが使っている統合開発環境ですが、Web上でVMが立って、その中でIDEや開発環境が用意されているサービスとなっています。

こういうジャンルのサービスが最近はほかにもいろいろあるんですが、その中でも無料枠が50時間と大きかったり、スペックが小さいものの中でも4GB、8メモリとか、30GBディスクというところで、わりとシンプルに使いやすいというところが売りかなと思うし、私も魅力だと感じています。

もうちょっと詳しく「なぜ?」というところですが、私はAWS CDKというAWSのInfrastructure as CodeのOSSのコントリビューター的なところもしていて、その中でおすすめめ環境の1つとしてGitpodが挙がっているというところが使い始めのきっかけとなっています。

使い方ですがすごく簡単で、GitHubやGitLabのURLにgitpod.io/#をつけて。そうするといきなりマシンスペックを開ける画面になるので、使えます。

つまり、「なんかコントリビュートしたいな」と思ったらパッと開けるというところですね。

Gitpodで困ることと、欲しいもの

困る点として、毎回環境を作るたびにまっさらな環境になっちゃうので、毎回やっている動作を自動化したいなというところが出てきました。

「.gitpod.yml」というファイルでもPre-build設定はできますが、それはあくまでソースコードの話であって、手元のツールとかの準備環境が欲しいです。

具体的になにが欲しいかというと、コードをPushした時のコミットの自分のGitHubのメアドを隠したいとか、あとはAWS系のOSSなので、テストする時にAWSのコマンドが必要になったりとか、bash補完が必要になったりとか。あと、変なCredentialとかPushしたくないというところで、機密情報のコミットを防止するためのソリューションを入れたい。こういったところが、私がいつも「欲しいな」と考えている設定になります。

(スライドを示して)今ちらっと書いた「Gitleaks」というOSSですが、公式サイトの引用を引くと、secretとか、ローカルにあるものをPushしない。あるいはGitHub上に対してPushしたものを調べてくれるといった製品です。

Credential、「AWS IAM」とかを誤ってPushするのはやはり嫌だというところとか……。そういったものは公式のAWSからも「git-secrets」というOSSが出ていますが、万が一ほかのCredentialとかが混じっていたらヤバいというところで、幅広く対応しているGitleaksを選んでいます。

GitpodにおけるDotfiles

Gitpodですが、いきなり答えなんですけれども、Dotfilesを設定する機能があります。GitHub上に置かれているDotfilesを、自分のinit、起動設定として使うことができるというところがGitpodにおける初期設定の答えになります。

公式ドキュメントにも書いてあって。日本語の情報があまりなかったので、どこから探せばいいのかわからなかったんですが、いろいろ公式ドキュメントを漁っていくうちにわかってきたというのが経緯になります。

「じゃあGitpodにおけるDotfilesってどう作るの?」というところですが、これはちゃんとサンプルのリポジトリが用意してあって、こちらをForkすると良いことがわかってきました。

その中でも、ただDotfilesというドットから始まるファイルを置くだけではなくて、起動スクリプトをトリガーにして、小さいスクリプトを実行することもできるので……。要は自分でシェルを書けばいいという話でした。

「欲しいもの」を実現する方法

というところで記事にも書きましたが、GitHubのメアド隠しについては普通に設定を入れるだけです。それだけで完了しました。

AmazonのCLIのコマンドも、入っていなかったらツールを入れるとか、bash補完の設定についても自動で、もし入っていなかったら入れるようなことを、シェル芸ってほどでもないですが、シェルでちょこちょこ書くとうまくいきました。

先ほど言ったGitleaksの設定について、失敗してしまったというところです。公式手順だとbrew installで入れるんですが、「.gitpod.yml」、要はGitpodで動かすVMイメージ、コンテナイメージの中に、LINUX環境なのでコマンドがありませんでした。

Gitleaksのインストール事情としてはHomebrewとか、あとはGoでビルドするというところで、LINUXで全自動で入れるのは実は意外と面倒くさかったり。あと「Docker」だと、Pushする前にGitleaksをフックしたいので、Pre-commit hookはちょっと煩雑なのかなと。このあたりは私のDocker力不足かもしれないですが、「じゃあビルドするか」というところでビルドに思い至ったわけです。

Dotfilesの制限に対応するために「GitHub Actions」を使用

が、Dotfilesの制限として、「スクリプト実行は2分以内に終わらせてくれ」というところで、手元でやったらGoのビルドで1分40秒とか。「何かあったらもうたぶんだめだろう」みたいな時間になってしまったことがあって。

「じゃあ、GitHub Actionsを使うぞ」ということになりました。だからビルドを先にしておけばいいということですよね。結局、GitHub上にあるDotfilesをダウンロードしてくるわけなんだから、最初からビルドしていればいいよねというところ。要は、GitHub Actionsですでにビルドしておこうと。準備のための準備をすれば良いじゃないかというところですね。

GitHubをあまり使っていなかったので、久々のGitHub Actionsというところで。ワークフローをどう書くかで、昨今流行りのChatGPTさんで雛形を作って、最新や正確な情報は公式ドキュメントとかを見て、あと細かいノウハウとかはQiitaとかを使って、動くもの、しっかりしたものを完成させていくところを進めていました。

で、無事に書けるわけですね。週に1回Gitleaksをビルドした上で、自分のDotfiles用のリポジトリにPushするところを作ってみました。

無事にビルドするCIもできたので……。キャプチャーが撮れていないんですが、Gitpodの中でも無事にGitleaksがPre-commit hookされるというところが成功したわけです。

本当はこの内容の記事を登壇の前に用意したかったんですが、ちょっと(まだ出せておらず)前後してしまうので……。気になる方は(記事を出せば)後でじっくり読めることになるので、あと数日待ってもらえればと思います。

無事AWSのCDKのコントリビュートを安心してできる生活に

というところで、無事AWSのCDKのコントリビュートを安心してできる生活になりました。こうやって環境が安定して作れるようになったら、調子に乗って別のOSS、HonoというWebフレームワークのアダプターとかを作ったりして、要はスムーズに日曜コントリビュートができるようになりました。

Web IDEは、ちょっと思いついた時にコードを書いたり、思いついた時にパッチを入れたりとかする時にすごく便利なのでおすすめです。私と一緒に楽しくOSSにコントリビュートしたい人は、ぜひぜひ試してみてはいかがでしょうか?

(スライドを示して)おまけとして上のタイトルの記事で実は1個、このニッチの企画に投稿しております。ニッチすぎて「いいね」が1ですが(笑)。もし見つけたら読んであげてください。

このGitHub Actionsのこととかを書いたブログ2弾もそのうち公開になるので、楽しんでもらえればと思います。

ご清聴いただきありがとうございました。

続きを読むには会員登録
(無料)が必要です。

会員登録していただくと、すべての記事が制限なく閲覧でき、
著者フォローや記事の保存機能など、便利な機能がご利用いただけます。

無料会員登録

会員の方はこちら

関連タグ:

この記事のスピーカー

同じログの記事

コミュニティ情報

Brand Topics

Brand Topics

  • 今までとこれからで、エンジニアに求められる「スキル」の違い AI時代のエンジニアの未来と生存戦略のカギとは

人気の記事

新着イベント

ログミーBusinessに
記事掲載しませんか?

イベント・インタビュー・対談 etc.

“編集しない編集”で、
スピーカーの「意図をそのまま」お届け!