[Node.js]無料クラウドサービスでEclipse Theiaをビルドする。

## クラウドIDEをもっと自由に

https://shell.cloud.google.com/?show=ide

[Google Cloud Shell](https://shell.cloud.google.com/?show=terminal)のCODE-OSSをベースとしてCloud Shell Editorは、プラグインの追加も可能で、すぐにでもWebアプリの開発などが始められる、とても便利なツールです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/4bac71c7-5eed-39f4-e6a0-a8e902324138.png)

敢えて難を言うなら、日本語化できないこととぐらいでしょうか？
今回はその問題の克服をゴールとして、[Eclipse Theia](https://theia-ide.org/)をCloud Shell環境でビルドして利用可能としてみたいと思います。

## 依存パッケージの導入

まず事前にビルド作業の際に限り必要なパッケージを、下記のよう**apt**コマンドで一時的にシステムにインストールしておきます。

```shell
sudo apt install --yes xserver-xorg-core libxkbfile-dev libsecret-1-dev
```

その際、下記のようなキーボード設定の応答要求が出現しますが、いずれも`Japanese`を設定しておけばよいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/c4eac896-6f8b-98ce-9091-499a190ecbcd.png)

## Node.jsによるビルド環境の準備

現在、Cloud Shellにプリインストールされているnodejsには`npm`コマンドが含まれていないため、公式サイトからランタイム一式をダウンロードして展開し、環境変数`PATH`に追加しておきます。
[drivelist](https://www.npmjs.com/package/drivelist)という依存パッケージが最新バージョンに対応していないため、Ver 20.xを使用します。
```shell
cd ~
curl -L https://nodejs.org/dist/latest-v20.x/node-v20.13.1-linux-x64.tar.xz | tar -xvJ
export PATH=~/node-v20.13.1-linux-x64/bin:${PATH}
```

また、今回のビルド作業は**yarn**コマンドで行いますので、キャッシュデータが/homeディレクトリのディスク容量を消費しないよう、下記のコマンドで専用のディレクトリを用意します。
```shell
sudo mkdir -pv /var/cache/yarn
sudo chown -Rc $USER:$USER /var/cache/yarn
export YARN_CACHE_FOLDER=/var/cache/yarn  
```

## ソースコードの入手とビルド作業

まず前提条件として、下記の記事で解説している事前準備が完了しているものとして作業を進めさせていただきます。

https://qiita.com/STUDIO-FERMION/items/0dd8ba18719ba8ce358c

はじめにカレントディレクトリを作業用ディレクトリに変更し、[公式リポジトリ](https://github.com/eclipse-theia/theia)から最新版のソースコードのアーカイブをダウンロードおよび展開します。
```
cd /var/work
curl -L https://github.com/eclipse-theia/theia/archive/refs/tags/v1.49.1.tar.gz | tar xzv
```

続いてソースコードを展開したディレクトリに移動し、**yarn**コマンドにより依存パッケージのインストールした後、Eclipse Theia本体のビルドも実行します。
```shell
cd theia-1.49.1
npx yarn
npx yarn --cwd=examples/browser theia build
```
場合によっては、**yarn**のインストールを促すメッセージが表示されるかもしれませんが、`y`を入力して続行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/0f606b35-98df-ae08-5d20-c58a9e615125.png)

ビルドが完了したら、まずサイズの大きいキャッシュデータを削除して空き容量を確保しておきます。

```
rm -rf ~/.cache/puppeteer
```

あとはホームディレクトリにディレクトリごとコピーしておけば、今後継続して利用できます。
```shell
cp -r /var/work/theia-1.49.1 ~/theia
```
ここではホームディレクトリ直下のtheiaというディレクトリに配置しました。

## アプリ起動時後の問題に対処する。

これで何とか起動できるようになるのですが、右下にたびたび`product.json`というファイルが存在しないと警告が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/89dd6f74-54db-039e-abc9-276b79192279.png)

放置しておいても特に害は無いのですが、煩わしいので下記のコマンドを実行し、ダミーのjsonファイルを作成することによって抑制しておきます。
```shell
echo {} > ~/theia/examples/browser/product.json
```

## セキュリティへの対応

今回のTheiaに関してもその対策が必要となります。デフォルトの状態で起動すると、画像や動画がブロックされて表示できません。
その問題を回避するには、環境変数を2点設定しなければなりません。

```shell
export THEIA_MINI_BROWSER_HOST_PATTERN={{hostname}}
export THEIA_WEBVIEW_EXTERNAL_ENDPOINT={{hostname}}
```

変数名がかなり長いく、毎回ワンライナーで起動するのは煩わしいので、`.bash_login`ファイルでBashの起動時に自動設定するとよいと思います。

上記の環境変数の設定により、ワークスペースを開く度にセキュリティの脆弱性を喚起する警告が右下に表示されますが、これは毎回**OK**ボタンをクリックして閉じるしかないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/d3a82891-fcac-c0db-963b-97a02f67ef09.png)

以上の対応により、画像が正常に表示できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/673ca857-d54b-07de-196a-051ee6269492.png)

## Theiaの初回起動と日本語化

デフォルトの3000番ポートはCloud Shell Editorで使用されているので、そのほかのポート番号を指定しなければなりません。ここでは8080番ポートを指定して起動する例を示します。

```shell
npx yarn --cwd=${HOME}/theia/examples/browser start --port=8080 &
```
または
```shell
cd ${HOME}/theia && npm -w examples/browser start -- --port=8080 &
```

起動後に右上の**ウェブでプレビュー**ボタンにより、ポート8080でプレビューします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/be75dbef-7c18-8d79-75bf-9ab889cc9ea1.png)
すると、英語のインターフェースで初期画面が起動するはずです。

## 日本語プラグインの導入

左側のメニュバーから拡張機能のメニューを開き、検索バーに**japanese**と入力すれば、日本語プラグインが候補として表示されるので、**Install**ボタンをクリックすれば、インストールできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/795c090d-3b5c-4a29-2532-b0ec0652bbbc.png)

英語のインターフェースの状態で日本語言語パックを有効化します。まず**View**メニューから`Command Pallette...`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/fb3c57d2-8c4a-de58-1bfa-a896555624ca.png)

入力バーが出現するので、`Configure Display Language`を入力して実行します。入力中にリストアップされる候補から選んでも構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/7af055fa-91be-1dfc-3c6d-d3b1aecd643e.png)

次に選択肢の中から**日本語**を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/583a14b9-3867-dbe5-b781-58b6f5c6a1b9.png)

下記のアラートがポップアップされるので**Restart**ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/32835ee7-2422-c04b-ad09-b02f2becf60a.png)

すると、日本語のインターフェースで画面が再表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/4f3e7a6c-ee16-b6fa-5aa4-7098ba9f6b54.png)

## 最後に
仕上げとして必須となるプラグイン[基本拡張機能パッケージ](https://open-vsx.org/extension/eclipse-theia/builtin-extension-pack)をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/1fc62b8b-b14f-1060-503e-cfba0912ffa4.png)


その結果、このように動画も無事、再生できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/9bbb54c1-3779-8717-198b-c9b4b25f52cf.png)

## 補足：プラグインによってはエラーが．．．

常用している[Vue公式プラグイン(Volar)](https://open-vsx.org/extension/Vue/volar)をインストールしていると下記のようなエラーがポップアップされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/457e71a7-bd84-4fdf-4159-daa3b0c25db2.png)

メッセージの内容を見る限り**node_modules**ディレクトリへの参照がリンク切れになっているようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2513692/b87ed66d-5b2b-acac-7063-198c354c72b5.png)

原因は究明できませんでしたが、今回は下記のコマンドでシンボリックリンクを作成し、**node_modules**ディレクトリを参照できるようにすると、エラーが収まりました。
```shell
mkdir -pv ~/theia/examples/browser/extensions
ln -sv ~/theia/node_modules ~/theia/examples/browser/extensions/node_modules
```