CursorとReplitを接続する方法！SSH接続してローカルで使用する方法について

2024年11月12日 12:36

Replitってもともとクラウドのエディタでしかもssh接続でローカルエディタ経由で作業もできるので、cursorとそれで連携ができるんですよね。つまりwebでReplitエージェント使いつつ、cursorのAI機能(もちろん拡張機能、Clineも)との合わせ技ができるんですよ。
— ぽにー@AI楽しい (@ponystark25) November 12, 2024

この情報源はこちら

英語だったので、わかりにくかったので、日本語化しました。
以下動画の中身

はじめに
このチュートリアルでは、CursorとReplitを接続する方法について、実際に操作しながら説明しています。CursorとReplitの接続方法だけでなく、この接続がなぜ重要なのか、SSHを使用した開発とデプロイの方法、そしてより良い開発体験のためのヒントとコツも共有します。

このチュートリアルは、SSH接続をサポートするエディター（またはターミナル）であればどれでも使用可能です。

Replitでの設定

Replitのホームページで、新しいReplを作成します。言語は問いません。ここでは、「ssh-tutorial」という名前で作成しています。
新しいタブを開き、「SSH」タブを選択します。
「Keys」ペインに移動し、「Add SSH Key」をクリックします。
ラベルを入力します。理想的には、接続元のデバイスを識別するラベルが適切です。ここでは、「matts-mbp」と入力しています。
SSHキーを生成します。Macの場合、画面に表示されるコマンドをコピーしてターミナルに貼り付け、実行します。生成されたキーをコピーします。
WindowsやLinuxの場合は、Replitのドキュメントを参照してください。
Replitの「Key」フィールドに、コピーしたキーを貼り付け、「Add SSH Key」をクリックします。これで、アカウント内のすべてのReplに接続できるようになります。
ローカルマシンで、`.ssh`ディレクトリにある`config`ファイルに以下の設定を追加します。

Host replit.dev
    Port 22
    IdentityFile ~/.ssh/replit

Replitに戻り、「Launch Cursor」をクリックします。警告メッセージが表示されたら「Continue」をクリックします。
ReplitのファイルシステムがCursorに表示されます。
Replitの機能を使用して、言語やフレームワークをインストールすることができます。
例えば、Node.jsをインストールするには、`npm`コマンドを入力します。
Pythonをインストールするには、`.replit`ファイルを編集して、`python`のバージョンを指定します。

Cursorでの開発
Cursorに接続したら、Replitのツールを使用して、言語やフレームワークをインストール・管理できます。
ここでは、ReactとTypescriptで新しいプロジェクトを作成する方法を実演しています。

Cursorのターミナルで、`create vite@latest my-react-app --template react-ts`コマンドを実行します。
プロジェクトのディレクトリに移動し、`npm install`コマンドで必要なパッケージをインストールします。
`npm run dev`コマンドでアプリケーションを起動します。Replitから通知が表示され、ポートが利用可能になります。
ブラウザーまたはエディターでアプリケーションをプレビューします。
Cursorのチャット機能を使用して、コード生成を行うことができます。
アプリケーションをデプロイするには、Replitの「Deployments」タブに移動します。
デプロイの種類を選択します。ここでは、静的デプロイメントを選択します。
プライマリドメイン、公開ディレクトリ、ビルドコマンドを入力し、「Deploy」をクリックします。

まとめ
Replitで開発とデプロイを行う利点は、開発環境とデプロイ環境が同一であることです。これにより、トラブルシューティングやビルドに費やす時間を短縮できます。また、AIとの連携もスムーズで、SSH経由で任意のエディターからアクセス可能です。他のデプロイメントオプションよりもシンプルで、開発ワークフローを効率化できます。

CursorとReplitを接続する方法！SSH接続してローカルで使用する方法について

いいなと思ったら応援しよう！