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
をクリックして完了です。
おつかれさまでした。
Discussion