code-serverを使ってブラウザ上だけでセキュアで快適に開発してみる

2019年10月3日 21:02

前に紹介したCoderがPivotしエンタープライズ開発に注力するようで、個人開発者向けVSCodeブラウザ版はオープンソースで提供するようになりました。

VSCodeのブラウザ版はDockerでも提供されていて、Dockerさえインストールされていれば下記のコマンドを起動したあと`http://localhost:8080`をブラウザで開くだけでVSCodeと同じ環境で開発ができるようになります。

docker run -it -p 127.0.0.1:8080:8080 -v "${HOME}/.local/share/code-server:/home/coder/.local/share/code-server" -v "$PWD:/home/coder/project" codercom/code-server:v2

しかし、ローカルで動かすなら普通のVSCodeと同じなので、どこでもこの環境を使えるようにクラウド上で動かすようにしてみます。

サーバを立ち上げる

そこで問題になるのはセキュリティ。このcode-serverの8080番ポートも問題ですが、開発中のWebサーバなどもネットにそのまま公開するわけにはいきません。

なのでサーバはSSHポートだけ解放し、他のポートはVPNを経由してアクセスすることでセキュアにアクセスできるようにします。

まずはAWSやGCPなどクラウドで適当なUbuntuサーバを用意します。L2TPでVPNを張るために500/UDPと4500/UDPを開けておいて下さい。同時に自分自身にVPN経由でアクセスするために192.168.28/24は全ポート開放してください。

VPNをSoftEtherで構築する

VPNサーバにはSoftEther VPNを使います。
rootユーザになって次のコマンドを実行してください。これでインストールと自動起動がセットされます。

curl -L https://gist.githubusercontent.com/masuidrive/1e34507fa464f03940dfaec7ee2b1ed1/raw/ae252500c3892387e00ea35794ef5ff2ce22e791/install_softether.sh | sh

次にVPNの設定を行います。またrootで次にコマンドを実行します。実行最後に下記のようにVPNのアカウントが表示されるのでメモしておいてください。

AWS EC2 & Ubuntu以外の環境の場合、ソースコードを参考にHOST_IPなどの環境変数を設定してください。

sh -c "$(curl -sSL https://gist.githubusercontent.com/masuidrive/6948f61c88487b559943ff9e4684506c/raw/674d01d5985c6109b09e0b45012b1d9b8a6f4094/set_softether.sh)"

code-serverをインストール

最後にcode-serverをインストールします。

curl -L https://gist.githubusercontent.com/masuidrive/4b7d33de275fe15d83bedcefe0aa583f/raw/5f6b742328dd5cd079404ebacc9ac9c1a7413169/install_code_server.sh | sh

これで8888番ポートでVSCodeが起動しています。