ラップトップをどこにでも持ち歩くことなく、どこからでもコーディングしたいと思いませんか? Visual Studio Code の全機能を Web ブラウザーに提供する強力な自己ホスト型アプリである code-server を試すことができます。サードパーティのクラウド IDE に依存する代わりに、ホームラボ サーバー上にコード サーバーをセットアップし、任意のデバイスから安全にアクセスできます。コードサーバーをセットアップすると、コードとデータを管理下に置きながら、一貫性のあるアクセス可能な開発環境が確保されます。
目次
- コードサーバーとは何ですか?なぜセルフホストするのでしょうか?
- Linux でコードサーバーをセットアップする
- コードサーバーを使ってみる
- ブラウザベースの IDE のカスタマイズ
- コードサーバーで最初のプログラムを作成して実行する
コードサーバーとは何ですか?なぜセルフホストするのでしょうか?
Code-server はリモート サーバー上で VS Code を実行し、Web ブラウザ経由でアクセスできるようにします。デスクトップ版と同様に動作し、オートコンプリート、デバッグ、Git、拡張機能をサポートしています。すべての開発はサーバー上で行われるため、タブレットや Chromebook などの低電力デバイスに最適です。これにより、セットアップの一貫性が保たれ、どこからでもアクセスできるようになります。
セルフホスティングでは、独自のドメインの使用や HTTPS の有効化によるユーザー アクセスの管理やリソースのスケーリングなど、完全な制御、プライバシー、環境のカスタマイズ機能が提供されます。
知っておくとよいこと:VS Code のキーボード ショートカットをマスターすると、生産性が向上します。始めるには、この便利なチートシートをチェックしてください。
コードサーバーのインストールは簡単です。インストールにはDockerを使用します。
次のコマンドを実行して、Docker Hub から公式のコードサーバー イメージをダウンロードします。
sudo docker pull codercom/code-serverこれにより、コンテナーを作成する前に、最新バージョンのイメージをローカルで利用できるようになります。
次に、カスタム パスワードと永続ストレージを使用して、バックグラウンドで新しいコード サーバー コンテナーを起動します。
sudo docker run -d --name code-server -p 8443:8080 -v "$HOME/code-server-data:/home/coder/project" -e PASSWORD="my_password" codercom/code-server
推奨読書:2025 年の Windows/Linux 向けホームサーバー OS ベスト 7
コードサーバーを設定したら、次のように入力してブラウザからコードサーバーにアクセスできます。https://ローカルホスト:8443。で設定したパスワードを入力してくださいdocker runコマンドを入力し、「送信」ボタンをクリックしてコードサーバーにログインします。
コードサーバーを使ってみる
ログインすると、通常のデスクトップ バージョンの VS Code とまったく同じインターフェイスが表示されます。内容の概要は次のとおりです。
ファイルエクスプローラー
Explorer は、プロジェクト内を移動するのに役立ちます。フォルダーを参照したり、ファイルを開いたり、新しいファイルを作成したり、プロジェクト構造を簡単に管理したりできます。
エディタ
エディターは中央領域であり、メインのワークスペースとして機能します。ファイルを開くと、ここに表示されます。
ここでは、デスクトップ バージョンの VS Code と同じように、コードの作成、編集、および書式設定を行うことができます。
ターミナル
ターミナルはコード サーバーの下部にあります。トップメニュー「ターミナル -> 新しいターミナル」から開くか、Ctrl + ` を押して開くことができます。
キーボード ショートカット キー Ctrl + Shift + C を使用して、コード サーバー内のターミナルにアクセスすることもできます。
拡張機能
VS Code を優れたものにしているのは拡張機能です。 [拡張機能] タブ (サイドバー アイコン) を使用して、リンター、テーマ、言語サポートなどの VS Code 拡張機能を参照、インストール、管理できます。
検索バーを使用して拡張機能を検索し、すぐにインストールしてアクティブ化して、新しい機能を追加したり、既存の機能を強化したりできます。
ブラウザベースの IDE のカスタマイズ
拡張機能のインストール、テーマの変更、設定の更新、構成ファイルの変更など、好みに応じてコードサーバーをカスタマイズできるようになりました。たとえば、新しいテーマを設定するには、左下隅にある歯車アイコンをクリックし、上にマウスを置きます。テーマを選択してくださいカラーテーマメニューから:
利用可能なテーマのリストが表示されます。テーマをクリックしてプレビューし、適用します。
さらに、[拡張機能] タブから好みのテーマを簡単にインストールし、すぐに有効にすることができます。
同様に、他のコードサーバー設定もカスタマイズできます。これを行うには、歯車アイコンをクリックして選択するだけです。設定.
ここから、エディターの動作、フォント サイズ、形式などをカスタマイズできます。
コードサーバーで最初のプログラムを作成して実行する
から新しいテキスト ファイルを作成します。エクスプローラパネルを使用するか、ショートカット キー Ctrl + Alt + N を押します。
をクリックしてください言語を選択してくださいまたは、Ctrl + K を押してから M を押して、Python などの目的の言語を選択します。
ここで、次のコードを貼り付けて、コンソールに「maketecheasier.com へようこそ」を 3 回表示します。
for i in range(3):
print("Welcome to maketecheasier.com")このプログラムを実行する前に、Python がインストールされていることを確認してください。この後、Ctrl + S を押してファイルに適切な名前を割り当て、「OK」をクリックしてファイルを保存します。
次に、Ctrl + ` を押してターミナルを開き、次のコマンドを使用して Python スクリプトを実行します。
python3 mteExample.py
コードサーバーが Linux システム上で稼働しているので、ブラウザベースの開発を最大限に活用する準備が整いました。テーマや拡張機能を使用して環境をカスタマイズしたり、さまざまなプログラミング言語でコードを作成して実行したり、カスタム ドメインや HTTPS を使用してアクセスを保護したりすることもできます。次のステップとして、Git ワークフローを統合する方法、運用環境での SSL を有効にする方法、または JupyterLab、Docker、Porttainer などの他の Web ベースのツールを使用してホームラボを拡張して、より強力で柔軟な開発セットアップを行う方法を検討することを検討してください。
