別マシンを使ってクライアントサイド開発

| Comments

最近のクライアントサイド開発がリッチになったおかげで、僕のノートPCだとビルドとかに時間かかるようになってしまったので、その対応のお話。

問題提起

クライアントサイドの開発で、Reactを使うと必然的にwebpackなどのモジュール管理ツールが必要になったり、逐次動作を確認したいので仮サーバー（SimpleHttpServerやgulp-webserverなど）を立てたりすると思います。

が、僕のノートPCが低スペックなおかげで、これらをやりながらEditorとブラウザを立ち上げてると発熱がヤバイです。

ということで、ビルドや仮サーバーの処理を外部マシンにやってもらうことでノートPCの負荷を軽くしようと考えました。

なお、以降は、

  • HostPC ： ブラウザやコードをいじるメインのPC。今回だと低スペックのノートPC。
  • GuestPC ： ビルドなどの処理用PC。GUI要らない。

と呼ぶことにします。

ゴール

  • HostPCはブラウザとEditorのみを開き、HostPCのコードを編集する。
  • GuestPCは、HostPCで編集されたコードをビルドして仮サーバーを立てる。

そのために、

  • GuestPCにHostPCのソースコードを同期できる。
  • GuestPCのgulp-webserverにHostPCからアクセスできる。

を構築します。

構築開始

GuestPCにHostPCのソースコードを同期

今回の例だとGuestPCはただの負荷分散用で、必要なときに必要なスペックだけ調達したいので、このPCでコードを管理しておくことは想定しません。

ということでソースコードはHostPCにあります。

そこからGuestPCへファイルを転送するには、rsyncを使います。使うには、GuestPC、HostPCのどちらにもrsyncをインストールするだけです。

そして、HostPCでこんな感じのコマンドを打ちます。

1

rsync -arvz -e ssh /hostPC/path/to/target guestPC@XXX.XXX.XXX.XXX:/home/guest/folder

これで転送できます。 オプションは調べてください。（–deleteをつけてしまうとGuestPCでbuildしたものが消えてしまうので付けないほうがいいです。）

パスワードを聞かれるのが嫌なら、GuestPCにHostPCの公開鍵を入れておきましょう。「ssh パスワードなし」とかでググればあります。

ちなみに、始めは全て転送しますが、その後の変更は差分だけで済むようです。 数十MBのフォルダで試しても転送量と速度は気になりませんでした。

GuestPCのgulp-webserverにHostPCからアクセス

開発用の仮サーバーは自分自身のアクセスしか受け付けないことが多いです。その場合、HostPCから閲覧できなくなってしまうので、プロキシサーバを立ててリバースプロキシさせる必要があります。

今回はnginxを使うことにします。

GuestPC側でnginxをインストールし、/etc/nginx/nginx.confあたりの設定ファイルを編集します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

http {
    server {
        listen       8000;
        server_name  localhost;
        location / {
          proxy_pass http://localhost:8001/;
        }
    }
    server {
        listen       8080;
        server_name  localhost;
        location / {
          proxy_pass http://localhost:8081/;
        }
    }
}

設定ファイルを編集したらsudo service nginx restartで再起動。

こんな感じで設定してあげると、HostPCからhttp://GuestPC:8001にアクセスするとGsudo service nginx restartuestPCでポート8000番で立ってる仮サーバーにアクセスできます。今回のサンプルでは、同様に8081番にアクセスすると8080で立ってるサーバーに転送されます。

まとめ

以上で、GuestPCにHostPCの開発環境を移すことが出来ました。 どうしてもIDEなどが欲しい昨今において、この構成はいいんじゃないかと思います。

Comments