株式会社HAMWORKS
🤖

Devinのワークスペースにリポジトリを追加する方法

に公開

ついに弊社にもDevinが導入されたので、今後何回か行うであろうDevinのワークスペースにリポジトリを追加する方法を備忘録的にまとめておくことにしました。

1. リポジトリを追加する

まずは、Settings->Devin's Settings->Devin's Machineにアクセスします。

赤枠の+Repositoryボタンをクリックすると、右側のでっかい灰色のエリアにまだワークスペースがないリポジトリの一覧が表示されます。黒塗り(灰塗り?)の怪文書みたいですがご容赦を。

追加したいリポジトリをクリックすると、下にContinue with [REPO_NAME]というボタンが表示されるのでクリックします。

さっそくセットアップを始めます。

This repository is not set up on Devin's machine. Devin will need to clone the repo, install dependencies, and configure tests during each new session which will consume more ACUs.

と書いてありますが、日本語訳すると

このリポジトリはDevinのマシン上にセットアップされていません。Devinは新しいセッションごとにリポジトリのクローンを作成し、依存関係をインストールし、テストを構成する必要があるため、ACUの消費量が増加します。

こうです。ACU節約したかったらちゃんとセットアップしとけよってことですね。

2. セットアップする

基本的にステップに従って行えば難しいことはありません。

1. Git Pull

最新のコードを取得するにはどのようなコマンドを使用すればよいですか?

これはセッションの起動時に実行されます。ほとんどの場合、デフォルト設定のまま「コマンドの検証」をクリックしてください。

特にセットアップするのに特別なコマンドを作っていなければデフォルトで入ってるコマンドでそのままVerify Commandのボタンクリックで良いと思います。

クリックして完了すると、Verification successful!と表示され、ボタンがNextに変わります。これで次のステップにいきます。

2. Configure Secrets

リポジトリに.envrcファイルを作成する

direnv を使ってこれを行う方法の例については、ドキュメントをご覧ください。
サービスアカウントにログインし、VPN を設定し、アプリの実行に必要なその他の認証情報を保存します。
Web パスワードなどのその他のシークレットは、後からシークレットを使用して追加できます。

詳しくはドキュメントを参照してください。(丸投げ)
リポジトリ内ですでに.envがあるとかいう場合は作業しなくていいようです。(ChatGPT談)

VSCodeがワークスペースで使えるので、私の場合は普通にVSCodeでリポジトリのルートに.envファイル設置しました。(すでに.gitignoreにも入れてるし)

ということで、今回の記事ではスキップします。

3. Install Dependencies

VS Codeターミナルを使用して、Devinに必要なツールや依存関係をインストールします。

DevinのマシンはUbuntu 22.04 (x86_64)です。例えば、コンパイラをインストールしたり、npm installを実行したりします。
リポジトリごとに異なる環境を設定する方法については、ドキュメントをご覧ください。

次はVS Codeのターミナルでnpm installやらcomposer installやら行います。

なお、Devinの仮想環境にはcomposerがインストールされていないので、composerを使用したい場合はセットアップが必要です。

PHPとcomposerのセットアップ

compoerを入れる前にPHPをセットアップします。

sudo apt update
sudo apt install -y php php-cli php-mbstring unzip curl

ちなみにこのリストはChatGPTが「他にもよく使うやつ一緒にインストールしとこ!」ってあげてきたやつなので、不要なものは省いていいと思います。

上記実行が終わったらcomposerをインストール。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

エラーなく終わったら

composer install

を行います。これで無事composer installも済んだかと。

依存関係のインストールが済んだら、次のステップにいきます。

4. Maintain Dependencies

依存関係を最新の状態に保つにはどうすればよいですか?

新しい依存関係が追加された場合には、これらのコマンドはセッションの起動中に git pull の後に実行されます。

「今後、Git の変更を取り込んだときに、依存関係の変化に自動で対応するにはどうしたらいい?」を教えてあげます。

リポジトリで採用している技術にもよりますが、今回は

npm install
composer install

のみ指定します。

ちなみに、記入例としてプレースホルダーで ex. cd ~/repo/[REPO_NAME] && npm install と書かれてますが、このcd ~/repo/[REPO_NAME]は書かなくていいです。
また、&&で無理に繋げる必要もなく、Add +でコマンド書く欄が追加されます。

コマンドを記述したら、Verifyというボタンがクリックできるようになるので、次のステップにうつります。

5. Setup Lint

Devin は lint を実行したり構文エラーをチェックしたりするためにどのようなコマンドを使用する必要がありますか?

プロジェクトの lint 手順が複雑な場合は、この手順をスキップして、以下の「追加メモ」手順で Devin に lint について説明してください。

package.json で定義しているLintのコマンドを入れましょう。
私は自動修正しないコマンドを使っています。

npm run lint-js
npm run lint-css
composer lint

コマンドを記述したら、Verifyというボタンがクリックできるようになるので、次のステップにうつります。

ちなみに、設定してVerifyをクリックすると設定したコマンドが走るので、Lintがコケるとステップが進められません。今回設定しようとしたリポジトリが失敗したので先にそっちの修正をしました。

修正してmainにマージした後、DevinのVS Codeのターミナルでgit pullすればOKです。

6. Setup Tests

Devin はテストを実行するためにどのようなコマンドを使用する必要がありますか?

プロジェクトのテスト手順が複雑な場合は、この手順をスキップして、以下の「追加メモ」手順で Devin にテストについて説明できます。

「追加メモ」というのはステップ最後の8.Additional Notesのことです。

テスト用のコマンドがあれば入力します。npm testとか。
なければスキップでOK。今回設定しているディレクトリにはないのでスキップします。

テストの設定をスキップしてもよろしいですか?Devin はテストを実行できません。

ってモーダルで出てきますが、ないもんはないので仕方ない。

7. Setup Local App

Devin はこのアプリをローカルでどのように実行すればよいでしょうか? コマンドを実行して、動作することを確認してください。

VPNの設定など、マシン起動時にスクリプトを実行する方法については、ドキュメントをご覧ください。
Devinのブラウザを使用して、Devinに利用させたいウェブサイトにログインできます。ログインがタイムアウトする可能性がある場合は、ログイン認証情報をシークレットに追加してください。

私が今回設定しているリポジトリには、wp-envを使用したローカル環境があります。なので、以下のようにテキストを渡しました。

Run this command to start the local WordPress environment: npm run wp-env start
This will start the development and test sites at:

- http://localhost:xxxxx (development site)
- http://localhost:xxxxx (test site)

MySQL runs on port xxxxx, and test DB on port xxxxx.

事前にコマンドあってるかどうかnpm run wp-env startを叩いて確認しておくとなお安心ですね。

8. Additional Notes

リポジトリに関する追加情報があれば追加してください。Devinはhamworks/hokuo-renovationで作業する際に、常にこれらの指示を参照します。

提案: ローカル リンティングとテストを使用して実行する必要があるタスクと、Github CI からのフィードバックのみで実行できるタスクを Devin に知らせます。

セットアッププロセスは、Devinのbashrcの設定などを通じて、可能な限り自動化することをお勧めします。これにより、Devinが今後のセッションですぐにコードベースでの作業を開始できるようになります。

自然言語で書いたらOKです。日本語も可。

私は特に書くことがないので、何も書かずにDoneをクリックします。

最後にアクティブになったFinish、出てきたモーダル内のFinish Repo Setupをクリックして完了です。

おつかれさまでした。

株式会社HAMWORKS
株式会社HAMWORKS

Discussion