iPhoneやiPadでVisual Studio Codeを使うベストなシステム構成
Visual Studio Code を使うとき、どんなデバイスを使っていますか？
多くの人は、WindowsやMacなどのラップトップもしくはデスクトップPCと思いますが、
私はiPhone + Bluetooth キーボード + モバイルディスプレイの組み合わせでVisual Studio Code を使っています。
Visual Studio Code は実際にはCode Server ですが、十分、通常の開発で使用できます。
🤔 < iPadやiPhoneでVisual Studio Code を使いたいけど、どんなシステム構成がベストなんだろう・・・？
という疑問にお答えします。
目次
この記事に書いてること
iPadやiPhoneからCode Serverを使うメリットとシステム構成について書いています。
この記事には書いていないこと
Code Server やsshfsなどの構築方法は記載していません。
Code Serverとは
Code Serverとは、ブラウザで動くVisual Studio Codeです。
Github上にコードが公開されています。
https://github.com/coder/code-server
Visual Studio Code for web とは違い、自前でホスティングしているLinux上で稼働します。
そのため、Language Serverなどの実行もできますし、コンパイルもできます。
Linuxで実行可能なコマンドはすべて使うことができます。
iPadや iPhoneで Visual Studio Code を使うことのメリット
わざわざiPadやiPhoneを使う理由ですが、以下の点に関してメリットがあります。
- Mac や Windowsを買う必要がなくなるかもしれない
Code Serverを使えば、ホスティングしているLinuxサーバを自由に使うことができます。
どのような使い方をするかによりますが、LinuxのCUIコマンド + Code Server で事足りる場合は、MacやWindowsを買う必要がないかもしれません。
- 隙間時間で作業するときも同じデバイスを使えるため、ファイルやパスワードの端末間共有を考える必要がなくなる
Mac+iPhoneを使ってる人は、iCloud driveなどでファイル共有しているかと思いますが、ネットワーク状態などの影響で即時更新ができないこともあります。
一方、iPhoneで作業をおこなう場合は1つの端末に集約されますので、MacとiPhoneなどの端末間共有を考える必要がなくなります。
システム構成図
iPhoneやiPadでVisual Studio Codeを使う際のシステム構成図は以下のとおりです。
このシステム構成のポイントは、Coder Server実行ホストとファイルサーバを分けていることです。
こうすることで、Code Serverをスポットインスタンスで実行し、費用を安く抑えることができます。
私はAWSを使用していますのでこのような記載になっていますが、他のクラウドサービスを使用しても問題はないかと思います。
以降はAWSの前提で記載しています。
スポットインスタンスで価格を抑える
Code Server が実行可能な必要最低限のスペックは、1GB RAM and 2 CPUs となっていますが、Language Serverなどを使っていくと、メモリが足りなくなります。
そのため、c5a.large (4GB RAM, 2CPUs) くらいはあったほうがいいです。
しかしこれをオンデマンドインスタンスで起動するとなかなかコストが高くなります。
これを回避するため、後述する手順でAMIを作成してスポットインスタンスで起動することをおすすめします。
AWSセキュリティゲートで管理
AWS EC2でホスティングするということは、世界中のどこからでもアクセスが可能になってしまう、ということです。
そのため、FWで接続許可を管理していく必要があります。
具体的には、以下のInbound Rule とします。
| ポート | IPアドレス |
|---|---|
| 22/tcp(ssh) | すべてのIPv4, IPv6 |
| すべてのtcpポート | 自身のグローバルIP |
| すべてのudpポート | 自身のグローバルIP |
Code Serverにはhttpsで運用する方法もありますので、これと併用すると更に良いかもしれません。
ソースコードなどのファイルサーバは別で構築
スポットインスタンスで運用している限り、サーバ内のローカルデータは更新できません（AMIイメージの状態に戻る）。
そのため、別のストレージサーバを検討する必要があります。
ストレージサービスはいろいろなものがありますが、Code Server ホストからマウントできる必要があります。
私のおすすめはsshfsです。smbなども検討しましたが、セキュリティや構築の簡単さを検討した結果、sshfsになりました。
LightSailなどで低スペックのサーバで低価格運用
sshfsで運用するとなると、通常のLinuxサーバが必要になります。
ただしスペックは一番低いものでOKです。sshしか使わないので。
よって、すでに公開しているウェブサーバなどをお持ちの方はそれに同居されてもいいでしょう。
現時点で公開サーバを持っていない人は、AWS LightSailなどで一番低いUbuntuサーバを構築しましょう。
Code Serverからはsshfsでマウント
上述のとおり、Code Serverからファイルストレージサーバへはsshfsでマウントしましょう。
これならKeyファイルを持っていないと接続できませんし、アクセススピードも悪くありません。
iPadやiPhoneは、Bluetoothキーボードやマウスを活用しよう
Bluetoothキーボードがないと、ソフトウェアキーボードで入力していくことになりますが、画面が半分ちかく使われてしまうことと、記号の入力が難しいので、ソフトウェアキーボードはおすすめしません。
本格的にプログラミングしていくのであれば、 Bluetoothキーボードを使用することをおすすめします。
作業効率が大きく変わります。
必要であればモバイルディスプレイの導入も
iPadの10インチくらいの大きさであれば、モバイルディスプレイは無くてもいいかもしれません。
ただしiPhoneの5インチ程度のディスプレイであれば、文字が小さくなりすぎて、プログラミングどころではありません。
よって、大きな画面でプログラミングしたい場合は、モバイルディスプレイの導入をおすすめします。
私も12インチのモバイルディスプレイに接続してこのブログを書いていますが、申し分ありません。
価格も2万円程度ですので、ぜひ検討してみてください。
ファイルサーバ構築方法
ファイルサーバは Code Server 実行ホストとは別のホストで実行します。
なぜかというと、Code Serverはランニングコストを低く抑えるためにスポットインスタンスで起動するため、データが消えないファイルサーバが必要だからです。
ファイルサーバといってもsmbやWeb DAVを立てるのではなく、sshfsで運用することとします。
そうすることで、 ファイルサーバはSSH接続させるだけで済むからです。
AWS LightSailで低コスト運用
sshのみ稼働するサーバなので、一番安いサーバでOKです。
AWS LightSailのUbuntuサーバで問題ありません。
静的IPを導入しよう
AWS LightSailでは、実行中のインスタンスに対する静的IPは無料で割り当てることができます。
静的IPを ファイルサーバに割り当てておくことで、sshfsが簡単になります。
Visual Studio Codeは機能ありすぎ！
Visual Studio Codeはオープンソースのコードエディタです。
コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。
インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。
そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。
「Visual Studio Code実践ガイド」は、
- Visual Studio Codeの基本的な使い方
- TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
- Visual Studio Code拡張機能の開発方法の紹介
などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。
電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。
終わりに
この記事では、Code ServerをAWSインスタンスで実行するためのシステム構成について書いてみました。
具体的には、以下のシステム構成図がベストだと考えています。
本来であればシステム構築手順を細かく記述するべきところですが、個々のインストール手順はすでにウェブに公開されているものばかりですので、この記事ではシステム構成のみとしてみました。
何か不明な点がありましたら、当ブログのコメント欄、もしくはTwitter（@Harus0313) へ連絡ください。
