見出し画像

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

前に紹介した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は全ポート開放してください。

画像4

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が起動しています。

クライアントからVPNで接続する

これでサーバの設定は完了です。次はクライアントからVPNで接続します。上記の情報を元に設定して接続してください。

画像1

画像2

画像3

ブラウザでVSCodeを開く

これで接続した後、`Server IP`に書かれていたIPの8888番ポートをブラウザで開けばVSCodeが起動されます。上の例では`http://172.30.1.161:8888/`になります。VPNに繋げればiPadでも普通に使えます。

画像5

ターミナルも使えるので、ここでサーバプロセスを起動した場合は、`http://172.30.1.161:3000/`のようにしてアクセスできます。

p.s
この記事のミソはVPNを張っているところです。
これがないとサーバに公開した状態で開発するのでとても危険。

ありがとーーー!
33

masuidrive

masuidrive

masuidriveの日常を書いてます。技術もそうじゃない事も。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。