c0d3man52

Webサイト制作

Zedエディタをリモートで使う際の設定メモ

Zedエディタでリモートサーバー上で開発を行う際の設定に関するメモです。

公開日: 2024.11.27

目次

前準備

いろいろ勝手にやってくれるVSCと違って、発展途中のZedエディタはまだまだ細かいところは手動です。

後述しますが、後々のことを考えておくとSSHのログイン情報をローカルに記述しておいたほうが圧倒的に楽なので、リモート情報は先に書いておきます。

# .ssh/config
Host vps-server
        HostName 192.168.1.1
        User hogehoge
        Port 22
        IdentityFile ~/.ssh/vps-server/id_rsa
        LocalForward 3000 localhost:3000
        LocalForward 3001 localhost:3001
        LocalForward 8787 localhost:8787

IdentityFileはVPSだとほぼ必須だと思うのでそのまま使いましょう。ローカルだとしてもセッションが切れる度にパスワードを入力するのは手間なので、設定しておくと楽です。

重要なのがLocalForwardのところで、リモート上でローカルサーバーを立ち上げた際に、ポートフォーワーディングをする設定です。

これを書いておくと、例えば、

yarn dev

  ➜ Local:    http://localhost:3000/

みたいな形で、リモート上の3000ポートでサーバーが立ち上がったものを、ローカル上のlocalhostでアクセスすることができます。（リモートでファイアウォールがある場合は、ポートは別途開ける必要があります）

VSCではターミナルの入力を自動で読み取ってポートフォーワーディングをしてくれるのですが、Zedにはその機能がないため、予め使うポートを設定しておく必要があるというわけです。

リモートを追加

ここからはZedエディタ側での作業です。

  1. 最新版のZed Editorにアップグレード
  2. Command + Shift + P
  3. フォームにremoteで検索し、open remoteをクリック
  4. .ssh/configで設定したリモート名をクリック
  5. ロードされたディレクトリを決定

これだけでリモートサーバー上で開発ができます。必要な設定はZedエディタ側が勝手にやってくれます。

筆者の場合は、MacBook Proの負荷を下げる目的で、MacBook Proからローカル開発機(Ubuntu)に開発環境を移しています。

ローカルネットワーク上なので遅延も少なく、MacBook Proはスワップの嵐から解放されて非常に快適です。

タグ