IBM Cloud環境にOpenVSCode Server環境を立ててみた

IBM Cloud上の仮想サーバー上にOpenVSCode環境を立ててみたのでその時の導入メモです。
# OpenVSCode Serverとは
[OpenVSCode Server](https://github.com/gitpod-io/openvscode-server)とはWebブラウザからVisualStudioCode(VSCode)を実行することができるOSSです。以下OpenVSCodeと表記します。
WebブラウザでVSCodeやそれに近いIDEを使用したい場合には

- Microsoftが提供する : Visual Studio Code for the Web(vscode.dev) 
- AWSが提供する : AWS Cloud9
- IBM CloudのCDパイプラインで使用できる : Eclipse Orion Web IDE

などがあります。

　上記のサービスを利用するにはクラウドベンダーが提供するサービスとして利用する必要がありますが、OpenVSCodeはDockerやLinuxが動くサーバーがあればどこにでも導入できるため、クラウドベンダーが提供しているかによらず好きな環境に環境を構築することができます。もちろんクラウド上だけでなく自身のPC上のローカル環境としても導入できます。

　またOpenVSCodeはデスクトップ版のVSCodeと同じようにTerminalを利用できるため、導入したLinuxのCLI操作をOpenVSCodeを通してブラウザ上で操作することも可能です。
　このあたりiPadでLinuxの開発環境を一式準備したり、ネットワーク環境の制限でSSHポート(port 22)がブロックされている場合なんかでも利用できるので便利そうですね。

# 環境

### IBM Cloud 構成
| 項目| 設定内容| 備考 |
| --- | --- | --- |
| インスタンス | Virtual Server for Classic | 今回はClassicで構成　VPCでも可 |
| 仮想サーバータイプ | パブリック | |
| サーバープロファイル | U1.1x2(可変コンピュート) | 掲載時の最安構成 <br> vCPU=1, RAM=2GB, ストレージタイプ=SAN |
| ロケーション | 東京リージョン(TOK04) | |
| OS | CentOS 7.0-64 Minimal for VSI | linuxであれば他のOSでも可 |



# 環境構築
今回実施した環境構築の手順は大まかに分けて

1. IBM Cloud上に仮想サーバーを作成
2. Security Groupsを設定して必要なポートを許可
3. 作成した仮想サーバー上にOpenVSCodeを導入して起動

になります。

## 1. IBM Cloud上に仮想サーバーを作成

仮想サーバーの作成については[コチラの記事](https://qiita.com/kouta_suzuki_sen/items/01f491d54c7990043da2)にまとめていますので参照ください。

## 2. Security Groupsを設定して必要なポートを許可
セキュリティグループとは許可したポートやIPアドレス以外からアクセスを遮断させることができるIBM Cloudで無償利用できる仮想ファイアウォールのようなものです。

作成したサーバー上にOpenVSCodeのインストールや実際に実行するためにはSSHである22ポートが必要となります。それに追加してWebブラウザから実際にOpenVSCodeにアクセスする際に使用するポートも許可させる必要があります。

Linux版のOpenVSCodeのListenポートはデフォルト8000です。設定により変更が可能ですので構成に合わせてポートの許可を行います。
本手順ではデフォルトである8000ポートを許可する設定を行います。

IBM Cloud管理コンソールのナビゲーションメニューから
クラシック・インフラストラクチャー >  ネットワーク・セキュリティ > セキュリティー・グループ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/c9e7d0d7-26e1-2b28-21be-4faadcfac8ae.png)

新しくセキュリティ・グループの設定を作成するので`グループの作成`を選択します。
![スクリーンショット 2021-12-08 9.55.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/04025a61-a674-b027-bcbf-99bd7fa6a870.png)

セキュリティ・グループの名前と必要に応じて説明を入力し、作成を選択します。
ここでは分かりやすいように allow_openvscode という名前にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/3e2c254a-01e6-76c9-cb17-95b5fcb85500.png)

作成されるとセキュリティ・グループの一覧に追加されます。

続いてセキュリティ・グループの設定を行うため、セキュリティ・グループの一覧より作成した allow_openvscodeを選択します。
選択後 インバウンド・ルールタブになっていることを確認し、ルールの追加を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/ca7def44-1108-2910-4939-6032d21c516b.png)

以下の通りインバウンド・ルールを設定します。
基本的に8000ポートを許可するだけなので、ポートの範囲を8000〜8000に設定してあげれば大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/f0f2f5ac-1612-8c8d-2688-192366ab4700.png)


続いて作成したセキュリティ・グループを仮想サーバーに設定します。
IBM Cloudの管理コンソール左上のナビゲーションメニューからリソースの一覧を開き、Devicesのなかから作成した仮想サーバーを選択します。
![スクリーンショット 2021-12-08 10.08.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/cdb32ff7-5be1-315e-0988-2cf9e92b4ef5.png)

仮想サーバーの詳細が画面が表示されます。
ネットワーク詳細から設定するネットワークの方のセキュリティ・グループをクリックします。セキュリティ・グループの一覧が表示されるので allow_openvscode にチェックを入れます。
![スクリーンショット 2021-12-08 10.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/d78945a8-be8d-1703-c343-900324c4eeff.png)

ちなみにネットワークはデフォルト2つのインターフェース作成されます。
128.xx.xx.xxがパブリックネットワークで10.xx.xx.xxがプライベートネットワークです。
基本的にパブリックネットワークでアクセスすることになるのでこちらにポートのアクセス許可を行います。
今回の環境ではプライベートネットワークからアクセスする要件はないのでこちらは設定していませんが、必要に応じてプライベートネットワークにも設定ください。

設定すると以下のような許可画面が表示されるので OK を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/ed06569d-d9e1-b424-e1ed-d1e067ca0007.png)

セキュリティ・グループの設定は以上です。

## 3.作成した仮想サーバー上にOpenVSCodeを導入して起動

まずは作成した仮想サーバーにSSLでログインします。
IPアドレスとrootのパスワードはデバイスの一覧から対象の仮想サーバーを選択した詳細画面より確認できます。
IPアドレスはネットワークの詳細から、rootユーザーのパスワードは左メニューのパスワードから
![スクリーンショット 2021-12-08 10.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/3d5632df-96c3-a39a-4e91-3860040d5595.png)

```
$ ssh root@128.xx.xx.xx
root@128.xx.xx.xx's password: 
Last failed login: Tue Dec  7 18:48:10 CST 2021 from xxx.xxx.xxx.xxx on ssh:notty
There were 25827 failed login attempts since the last successful login.
Last login: Thu Nov 25 02:34:35 2021 from xxxxxxx
[root@virtualserver01 ~]#
```

OpenVSCodeの[Githubリポジトリ](https://github.com/gitpod-io/openvscode-server)のREADMEに記載されているDownload the latest releaseよりtar.gzファイルをダンロードし、仮想サーバー内の任意の場所に展開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/728faf5f-3986-3396-852b-97fb645363f7.png)

記事執筆時の最新がv1.62.3でしたのでこちらを使用します。ダウンロードしたファイルは`openvscode-server-v1.62.3-linux-x64.tar.gz`になります。

ファイルの配置についてはcurlでもブラウザでダウンロード後SFTPで転送してもよいです。
配置先は私の場合は`/usr/local`配下にしました。

ダウンロードしたtar.gzファイルを展開します。展開後は元のtar.gzは削除しておきます。

```
cd /usr/local
tar -xzf openvscode-server-v1.62.3-linux-x64.tar.gz
rm openvscode-server-v1.62.3-linux-x64.tar.gz
```

では実際にOpenVSCodeを実行します。
実行するとブラウザからOpenVSCodeにアクセスするためのURLが表示されます。
localhostは実際のプライベートのIPアドレスに置き換えてください。
またURLの`/tkn=`より後ろはトークンとなっておりセキュリティのためデフォルトでは起動ごとにこのトークンが変わるようになっているようです。

```
[root@virtualserver01 ~]# /usr/local/openvscode-server-v1.62.3-linux-x64/server.sh
Extension host agent listening on 8000

Web UI available at http://localhost:8000/?tkn=@@@@@@@@@@@
```

実際にブラウザからアクセスするとOpenVSCodeが使用できます。
![スクリーンショット 2021-12-08 11.11.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2326442/00849ecb-9468-bb2f-a401-fe753a704c5d.png)

停止する際は`Ctrl+C`でkillしてください。

##　備考
OpenVSCodeを起動する際に使用するserver.shでしたが、起動時にオプションを設定することができるのでいくつか紹介します。

- ポートを変更 
    - `./server.sh --port=@@@`を指定することでデフォルトの8000から任意のポートに変更することができます。
- トークンを指定 
    - `./server.sh --connectionToken xxx`を指定することでトークン部分の文字列を任意の文字列に設定することができます。