TheiaをRaspberry Pi4にインストールしてiPadから接続してみた

12176 ワード
IDE Theia RasbperryPi iPad iPad テキストリンク

iPadでコーディングしたい

iPadでコードを書きたいんだけどこれがなかなか難しい...
mediumとかを検索すると海外の人はiPadで開発環境構築した、みたいな記事が見つかるけど、結局のところはVPSとかにSSH接続しているパターンが多いみたい
Vimを使いこなせる人なら1つの方法としてはありだと思うけど...
そんなにVim使えてないし...VSCodeは割と使いやすい気がするけどiPad OS版は無いし...

Raspberry Pi4を開発用サーバーにできる？

AWS lightsailとか契約すればサーバーは手に入るけど、メモリ1GB以上ののマシンを契約しようとすると月額料金もそれなりにお高くなっていきます...
家にあるRaspberry Pi4はメモリ4GBだ、これを何とか開発用サーバーにできないものだろうか？と思いクラウドIDEを探してみました

VSCodeのサーバー版？

VSCodeをサーバー側にインストールして使うクラウドIDE的なものがちらほらと出始めてるらしい

code-serverはインストールスクリプトを見た感じだとx86環境が前提で
ARM版はまだ無さそうなのでRaspberry Piだと無理っぽい...
theiaの方はNode.jsベースらしいので、これならRaspberry Piでも行けそうな気がしてきた

Raspberry Pi4にTheiaをインストールしてみる

公式ページを参考にまずはTheiaをインストールするための準備を始める
Theia Requirements
Theiaは現状以下のNode.jsのバージョンに合わせないといけないみたい

  • Node.js >= 12.14.1 AND < 13

手元のRaspberry Pi4はNode.jsが14だったのとnvmが入ってなかったので、nvmを入れつつNode.jsのバージョンを合わせることにした
他にも必要な依存関係を解消するので公式ページを参考に以下のようなコマンドを実行した

#node.jsのインストール
# 必要なライブラリをインストール
sudo apt install pkg-config
sudo apt install build-essential
sudo apt install libx11-dev libxkbfile-dev

# node.jsをインストールするのにnvmを使う
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

# nvmでnodeのバージョンを指定してインストール
nvm install 12.14.1

# npmをインストールして設定
sudo apt install npm
sudo npm cache clean
sudo npm install npm n -g
sudo n stable

# yarnが必要というのでnpmでインストール
npm install --global yarn

事前準備が完了したら適当なディレクトリに移動して以下の様なpackage.jsonを作成する

packege.json
{
  "private": true,
  "dependencies": {
    "@theia/callhierarchy": "next",
    "@theia/file-search": "next",
    "@theia/git": "next",
    "@theia/markers": "next",
    "@theia/messages": "next",
    "@theia/mini-browser": "next",
    "@theia/navigator": "next",
    "@theia/outline-view": "next",
    "@theia/plugin-ext-vscode": "next",
    "@theia/preferences": "next",
    "@theia/preview": "next",
    "@theia/search-in-workspace": "next",
    "@theia/terminal": "next"
  },
  "devDependencies": {
    "@theia/cli": "next"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn build && yarn run download:plugins",
    "clean": "theia clean",
    "build": "theia build --mode development",
    "start": "theia start --plugins=local-dir:plugins",
    "download:plugins": "theia download:plugins"
  },
  "theiaPluginsDir": "plugins",
  "theiaPlugins": {
    "vscode-builtin-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
    "vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
    "vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
    "vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
    "vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix",
    "vscode-builtin-npm": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/npm-1.39.1-prel.vsix",
    "vscode-builtin-scss": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/scss-1.39.1-prel.vsix",
    "vscode-builtin-typescript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-1.39.1-prel.vsix",
    "vscode-builtin-typescript-language-features": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-language-features-1.39.1-prel.vsix"
  }
}

あとは順番にyarnコマンドを実行していったらtheiaが起動した
最初Theiaを起動させるとき --hostname XX.XX.XX.XX のオプション無しで起動させていた
これだとローカルからの接続しか許可しない状態らしく、他のマシンからTheiaに接続できませんでした
--hostname XX.XX.XX.XX にRaspberry Pi4のローカルIPアドレスを入力して起動させると無事ネットワーク上の他のマシンからTheiaに接続できました

Theiaをインストールする
# 必要な依存関係をインストールする
yarn

# Theiaをbuildする
yarn theia build

# Theiaを起動する
# XX:XX:XX:XX にはRaspberry Pi4自身のローカルIPを入力
yarn start --hostname XX.XX.XX.XX

iPadからTheiaを開く

SafariでTheiaを起動させたIPアドレスにポート3000でアクセスすればiPadからTheiaに接続できます
※ ポート3000がTheiaのデフォルトのポートです

Safari以外では以下のアプリでTheiaに接続できました

servediter for code-server

code-serverのためのアプリみたいですが、self-hosted serverでは無料で使えます
そして何故かTheiaが起動しているアドレスを入力すれば何事もなくTheiaに接続できました

↓ iPadからservediterでRaspberry Pi4上で動かしているTheiaに接続できた

iPad ProだったらRaspberry Pi4を直接USB-CでUSBガジェットモードで起動できるみたいなので、iPadで持ち運び可能なそこそこの開発環境を構築できそうな希望が見えてきました？

未解決

TheiaはVSCodeのプラグインと互換がありますが、プラグインを見に行くディレクトリの設定ができてなくて、今回は起動してもプラグインを読み込めてないです...

Pythonを書きたい場合は別途language-server?が必要のようで、シンタックスハイライト等そもそもTheiaがPythonのコードを認識できてない状態です...