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

IBM Cloud上の仮想サーバー上にOpenVSCode環境を立ててみたのでその時の導入メモです。

OpenVSCode Serverとは

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(可変コンピュート)	掲載時の最安構成 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上に仮想サーバーを作成

仮想サーバーの作成についてはコチラの記事にまとめていますので参照ください。

2. Security Groupsを設定して必要なポートを許可

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

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

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

IBM Cloud管理コンソールのナビゲーションメニューから
クラシック・インフラストラクチャー > ネットワーク・セキュリティ > セキュリティー・グループ を選択します。

新しくセキュリティ・グループの設定を作成するのでグループの作成を選択します。

セキュリティ・グループの名前と必要に応じて説明を入力し、作成を選択します。
ここでは分かりやすいように allow_openvscode という名前にしました。

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

続いてセキュリティ・グループの設定を行うため、セキュリティ・グループの一覧より作成した allow_openvscodeを選択します。
選択後 インバウンド・ルールタブになっていることを確認し、ルールの追加を選択します。

以下の通りインバウンド・ルールを設定します。
基本的に8000ポートを許可するだけなので、ポートの範囲を8000〜8000に設定してあげれば大丈夫です。

続いて作成したセキュリティ・グループを仮想サーバーに設定します。
IBM Cloudの管理コンソール左上のナビゲーションメニューからリソースの一覧を開き、Devicesのなかから作成した仮想サーバーを選択します。

仮想サーバーの詳細が画面が表示されます。
ネットワーク詳細から設定するネットワークの方のセキュリティ・グループをクリックします。セキュリティ・グループの一覧が表示されるので allow_openvscode にチェックを入れます。

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

設定すると以下のような許可画面が表示されるので OK を選択します。

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

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

まずは作成した仮想サーバーにSSLでログインします。
IPアドレスとrootのパスワードはデバイスの一覧から対象の仮想サーバーを選択した詳細画面より確認できます。
IPアドレスはネットワークの詳細から、rootユーザーのパスワードは左メニューのパスワードから

$ ssh [e-mail]
[e-mail]'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リポジトリのREADMEに記載されているDownload the latest releaseよりtar.gzファイルをダンロードし、仮想サーバー内の任意の場所に展開します。

記事執筆時の最新が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が使用できます。

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

　備考

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

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