こんにちは、みきおです。
今回は、vscodeのクラウド開発環境をcode-serverで構築する方法を紹介いたします。これでどんな貧弱マシンからでもchromeが動きさえすれば開発できます。ちなみにiPadからでも開発できるようです。試したことはないです。iPadください。

対象者

vscodeを知っている人
code-serverを知らない人
code-serverを知っているけど構築していなかった人
どのマシンからでも同じ開発環境が欲しい人

はじめに

code-serverのバージョン2系ではインストールからhttpsでの公開までが大変でした。しかし構築したことによってノートPCからの突発的な修正や隙間時間での開発がはかどりました。
今回、code-serverをバージョン2.1692から3.4.1に上げてみた際に、インストールの手順が簡単になっていたので紹介します。
ちなみに英語が別に苦手じゃない方は公式のGit読むだけでわかるかと思います。本当に簡単になりました。¹

1. サーバーを用意する

gcp でも aws でも良いですが、永年無料、東京リージョン、メモリ1GBということでoracle always freeのコンピュートをおすすめします。
サーバーを取得する方法はググればサービス開始時の記事が結構でていますが、別で投稿しようかと思っています。

2. code-serverをインストールする

ほぼほぼ公式の和訳になります。
可能な限りrootユーザーで作業してください。
私は勘違いして別ユーザーで作業をしまくって躓かなくてよいところで躓きまくりました。

インストール

インストールプロセスを確認します。別に確認したくない人は飛ばしてください。

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

インストールします。

curl -fsSL https://code-server.dev/install.sh | sh

セキュリティ周りの設定

SSH転送は需要があれば追記したいと思います。
下記好きな方で設定してください。

ドメインがあるならLet's Encrypt

すでにNginxなどを使っている方は適宜読み替えてください。

caddyのインストール


echo  " deb [trusted = yes] https://apt.fury.io/caddy/ / " \
     | sudo tee -a /etc/apt/sources.list.d/caddy-fury.list
sudo apt update
sudo apt install caddy

設定の変更

/etc/caddy/Caddyfileを書き換えます。

/etc/caddy/Caddyfile

mydomain.com
reverse_proxy 127.0.0.1:8080

ドメインがないならオレオレ証明書

code-server構成ファイルの変更

code-serverの証明書に関わる設定を置き換えます。

sed -i.bak 's/cert: false/cert: true/' ~/.config/code-server/config.yaml

デフォルトのアドレスとポートを127.0.0.1:8080から0.0.0.0:443に変更します。

sed -i.bak 's/bind-addr: 127.0.0.1:8080/bind-addr: 0.0.0.0:443/' ~/.config/code-server/config.yaml

コードサーバーが443ポートを使えるようにします。

sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node

code-serverを再起動

systemctl --user restart code-server

3. chromeのアプリモードでアクセスする

chromeをアプリモードでアクセスすることでショートカットがバシバシいけます。

起動したcode-serverにchromeでアクセスし、右上の「︙」をクリックして「code-server」をインストール

今まで別の手順²を踏んでいましたが、アプリ化が簡単になっていました。(chromeバージョン: 83.0.4103.116で確認)

ログイン画面

開発画面

以上です。

おわりに

個人開発のハードルが年々下がってきています。
だからなにって感じかもしれませんが、開発者の中で個人開発がもっと一般的なものになっていけばいいなって思っています。
勉強にもなるし、開発者にとってなんとなくでも小さな世界からいい変化が起きて、その積み重ねで明るい未来がやってきたらいいなって思ってます。

さらっと出来すぎて不安になるくらいなのですが、もしできなかったよ、躓いたよって方がいましたら教えてください。
検証して修正します。
というのも、バージョン2を入れた際にubuntuユーザーかつサービスとしての起動はrootという曲がった方法でインストールしてしまったため、今回の3を入れた際にもサービスとパス周りの設定を結構な時間をかけていじりました。なので、3を0から入れるときはこんな簡単なの？って感じてしまっています。

caddy以外のところはcentosでも基本的に変わらないです。

むしろ以前がつまりどころしかなかったです。Docker版のドキュメントばかりでしたし。 ↩
右上の「︙」をクリックして、「その他のツール」> 「ショートカットを作成...」 > 「ウィンドウとして開く」にチェックして追加 ↩

【無料でクラウド開発環境】code-serverでvscodeの開発環境を構築する方法

対象者