Zenn
レスキューナウテックブログPublicationへの投稿
🚀

VSCode Remote DevelopmentとDev Containerで、いつでもどこでも自宅サーバー上で開発する

adachi_koichi
2023/01/11に公開
VS Code
devcontainer
#
remotedevelopment
tech

背景

これまでmacOS環境（Apple Silicon）で開発していましたが、
どうしてもプロセッサアーキテクチャの関係でdocker buildに失敗することが多かったため、
iOSアプリ開発以外は自宅マシン（Ubutuntu amd64）でビルドするようになりました。
それもVSCodeが Remote Developmentに対応したおかげです。
今では好きなようにWebフロント・バックエンドAPI・Notebookで試す。ことができるようになりました。
ほぼ自宅で仕事をしているので普段は直接自宅サーバーにsshすればいいのですが、
たまーにコメダのモーニングを食べながら色々試したい時に接続できないのは不便です🙃
今回は
踏み台サーバーを用いることで、あたかも自宅サーバーで開発しているかのような環境構築を実現しました。

前提条件は、

  • 手元のマシンはMacBook Air(M1)
  • 開発サーバーはarmではなくamd64系のLinuxマシンを使いたい(arm系であればMacBookでそのまま開発すればいい）
  • クラウドに開発環境を構築(EC2, GCE)してもいいが、時間課金なのが気になって集中できないため、自宅に設置したマシンを使う。
  • 使っている自宅インターネット回線の都合上、固定Global IPを取ることができない。

そうすると、取れる方法は

  • VS Code Remote Developmentの
    • Tunnel
    • SSH
    • Dev Container(SSH)
  • JetBrains Gateway
    になります。

JetBrains Gateway

ずっとIntelliJ/AppCodeを使ってきたのでJetBrains Gatewayが第一候補だったのですが、IntelliJやGolandに有って、JetBrains Gatewayには存在しないショートカット（Debug…）があったので候補から外れました。
keymapなどの設定の同期もIntelliJ↔Goland↔DataGrip間ではできますが、何故かJetBrains Gatewayだけできなかったことも大きかったです。
慣れきったJetBrains製品から脱却することが決まった瞬間でした。
(XcodeやChromeのInspector、emacsキーバインドに合わせてJetBrainsのKeyMapをカスタマイズしていたので、とても残念でした）

VS Code Remote Development

  • Code Tunnelは最近リリースされた機能で、

    1. 異なるPCで、同じアカウントでVSCodeにログインする(GitHub or Microsoftアカウント）
    2. Tunnelを有効化しておく
      をやっておけばいつでもどこでも自宅サーバー上で開発できます。
      更にサービスで自動起動設定をすれば自宅サーバーの起動時に自動で有効化されるので簡単ですね。
      とても便利で使っていたのですが、Dev Containerには未対応。
      Dockerを使って環境をきっちり分けることが仕組み上できなかったので泣く泣く諦めました。
      MacBookではなくiPad miniを持ち出してカフェで試している時はTunnelを使っています。

  • SSH, Dev Container(SSH)
    最終的に選んだのはこの方法。以前からDev Containerはsshに対応していたので、sshさえ繋がれば自由にport forwardingもできてデバッガーにアタッチできます。

    結果、上記のような方式で環境を構築することにしました。 [^2]

設定手順の流れ

  1. SSHできる踏み台サーバーをどこかに借りる
  2. 自宅サーバーからSSHリモートポートフォワードの設定（-Rオプション）をする
  3. 手元のマシンからSSH経由で自宅サーバーにアクセスできるように~/.ssh/configを設定
    →VS Code Remote Developmentのssh/Dev Containerでコーディング開始

設定手順

  1. SSHができる踏み台サーバーをどこかに借りる
    GCPでもAWSでもどこでもいいので、SSHができるサーバーを借ります。
    マシンパワーは最低でOK。
    興味があったのでGCE(GCP), EC2(AWS), LightSail(AWS)で試しましたが、どのサービスでも実現できました。
    ご自身の慣れているサービスで構わないです。[1]
    今回はGCEを使った記事になります。

    構成

    • e2-micro
    • 10GB（最低）のSSD
    • スポットインスタンス
      で$4.56/月

    今回はGCEの asia-northeast1-b に instance-name という名称で踏み台サーバーを作ります。
    GUIでポチポチ設定するか、こんな感じのgcloudコマンドで作ります。
    （環境変数はご自身の環境に合わせてください）
    ※gcloudコマンドの例

    export GCP_PROJECT_ID=
export GCP_SERVICE_ACCOUNT=
export GCP_INSTANCE_NAME=instance-name
gcloud compute instances create ${GCP_INSTANCE_NAME} --project=${GCP_PROJECT_ID} --zone=asia-northeast1-b --machine-type=e2-micro --network-interface=network-tier=PREMIUM,subnet=default --no-restart-on-failure --maintenance-policy=TERMINATE --provisioning-model=SPOT --instance-termination-action=STOP --service-account=${GCP_SERVICE_ACCOUNT} --scopes=https://www.googleapis.com/auth/devstorage.read_only,https://www.googleapis.com/auth/logging.write,https://www.googleapis.com/auth/monitoring.write,https://www.googleapis.com/auth/servicecontrol,https://www.googleapis.com/auth/service.management.readonly,https://www.googleapis.com/auth/trace.append --create-disk=auto-delete=yes,boot=yes,device-name=${GCP_INSTANCE_NAME},image=projects/debian-cloud/global/images/debian-11-bullseye-v20221206,mode=rw,size=10,type=projects/${GCP_PROJECT_ID}/zones/asia-northeast1-b/diskTypes/pd-ssd --no-shielded-secure-boot --shielded-vtpm --shielded-integrity-monitoring --reservation-affinity=any

  2. 自宅サーバーからSSHリモートポートフォワードの設定（-Rオプション）をする

    1. まず初めに踏み台サーバーにsshできるように設定します。

      gcloud compute config-ssh --project ${GCP_PROJECT_ID}

    2. sshできることを確認します。下記で踏み台サーバーにsshできればオッケー

      ssh ${GCP_INSTANCE_NAME}.asia-northeast1-b.${GCP_PROJECT_ID}

    3. SSHリモートポートフォワードの設定（-Rオプション）をする

      ssh -fN -R 4567:localhost:22 ${GCP_INSTANCE_NAME}.asia-northeast1-b.${GCP_PROJECT_ID}

  3. 手元のマシンからSSH経由で自宅サーバーにアクセスできるように設定

    1. まず初めに踏み台サーバーにsshできるように設定します。

      gcloud compute config-ssh --project ${GCP_PROJECT_ID}

    2. sshできることを確認します。下記で踏み台サーバーにsshできればオッケー

      ssh ${GCP_INSTANCE_NAME}.asia-northeast1-b.${GCP_PROJECT_ID}

    3. ~/.ssh/configに設定を追加

      # GCEの踏み台経由での接続
Host build_machine_via_gce
  HostName localhost
  User 自宅サーバーにログインするユーザー名
  IdentityFile ~/.ssh/id_rsa
  ProxyJump instance-name.asia-northeast1-b.projectid
  Port 4567
  ForwardAgent yes

    4. sshできることを確認します。下記で自宅サーバーにsshできればオッケー

      ssh build_machine_via_gce

これで設定完了です。
実際に開発する際は

  1. 手元のマシンでVSCodeを立ち上げる
  2. Remote DevelopmentのRemoteメニューでSSH または Dev Containerで接続
    すれば、いつでもどこでも手元のマシンを使いながら自宅サーバー上で開発できます🕺

あとがき

以前では考えられなかったリモートPCでの開発。
ツールによる差はあるものの、選択肢が広がってきました。
今回は手元のマシンを利用したかったのですが、物理マシンに拘りのない方はクラウド上のインスタンスで同様のことをやってもいいですね。

また、この記事を執筆中に同僚にレビューをいただきAWS Cloud9の存在を教えてもらいました。
こちらはポート公開せずに使えるので、より安全でいいですね。
手元のVSCodeからCloud9の環境にアクセスするまで設定にかかった時間は15分ほど。
とても早く環境構築ができました。
興味のある方はそちらも試してみてください🕺

脚注

  1. 料金を更に下げようと思ったらGCEのe2-microの無料枠がありますが、使えるのはUSのリージョンなので日本からだとsshが少し遅くなります。
    EC2(spot)やLightSailはGCE(SPOTインスタンス)よりも更に$1くらい安いです。
    LightSailは$3.5なのにspotインスタンスでもないのでいいですね😋 ↩︎

レスキューナウテックブログ
レスキューナウテックブログPublication

日本で唯一の危機管理情報を専門に取り扱う防災Techのスタートアップ、(株)レスキューナウです。当社で活躍するエンジニアの技術ブログを中心に公開していきます。

Discussion