code-serverを立ててみた
今回は、VSCodeのWeb版であるcode-serverを立てて、ブラウザから開発環境を利用できるようにする手順を紹介します。
1. 必要なパッケージをインストール
まず最初に、code-serverをインストールするために必要なパッケージをインストールします。
sudo apt update
sudo apt install curl
2. code-serverのインストール
次に、code-serverをインストールします。公式のインストール手順を参考にし、以下のコマンドでインストールを行います。
curl -fsSL https://code-server.dev/install.sh | sh
インストールが完了したら、code-serverコマンドを使ってサービスを開始できます。
警告
この記事は 2024年11月現在の情報で書かれています
詳しくは以下の公式サイトのインストール方法をご覧ください
3. code-serverを起動
インストール後、code-serverを起動するために以下のコマンドを実行します。
#自動起動
systemctl enable code-server@<username>
#起動
systemctl start code-server@<username>
ここで<username>は自分のユーザー名に置き換えてください。
このコマンドを使うことで、code-serverがシステムのサービスとしてバックグラウンドで実行されるようになります。
4. 初期設定
デフォルトのcode-server設定では、localhost:8080でのみアクセスできるようになっていますが、外部からアクセスできるようにするためには、bind-addrを0.0.0.0に変更する必要があります。設定ファイルを編集しましょう。
nano ~/.config/code-server/config.yaml
設定ファイル内で以下のようにbind-addrを変更します。
bind-addr: 0.0.0.0:8080
auth: password
password: <your-password>
cert: false
これで、localhost以外からも8080ポートを使って接続できるようになります。
5. code-serverを再起動
設定を変更したら、code-serverを再起動して変更を反映させます。
systemctl restart code-server@<username>
5. 設定のカスタマイズ
code-serverは、VSCodeと同様に拡張機能をインストールしたり、設定をカスタマイズすることができます。設定ファイルは~/.config/code-server/config.yamlに格納されています。ここで、ポート番号の変更やパスワード設定の変更などを行うことができます。
bind-addr: 0.0.0.0:8080
auth: password
password: <your-password>
cert: false
まとめ
code-serverを利用することで、どこからでもブラウザを使ってVSCodeの開発環境にアクセスできるようになります。リモート開発やクラウドでの作業がより便利になりますので、ぜひ試してみてください。