Linux での Web ベースのコード サーバーの設定: ステップバイステップ ガイド

Linux での Web ベースのコード サーバーの設定: ステップバイステップ ガイド

ノートパソコンを持ち歩く手間をかけずに、どこからでもコーディングできる方法をお探しですか? Visual Studio Codeの機能をWebブラウザで直接利用できる、堅牢なセルフホスト型アプリケーション、 code-serverのご利用をご検討ください。自宅のラボサーバーにcode-serverをセットアップすれば、コードとデータへのアクセスと制御が確保されたシームレスな開発環境を実現でき、サードパーティ製のクラウドIDEは不要になります。

コードサーバーとセルフホスティングのメリットを理解する

Code-serverはVS Codeをリモートサーバー上で実行し、あらゆるウェブブラウザからアクセスできるようにします。機能はデスクトップ版とほぼ同等で、自動補完、デバッグ、Git統合、各種拡張機能といった機能をサポートしています。この構成は、タブレットやChromebookなどの低消費電力デバイスに特に有利です。すべての計算タスクがサーバー上で実行されるため、どこからでもアクセス可能な一貫した環境が維持されます。

このアプリケーションをセルフホストすると、開発環境に対する比類のない制御、強化されたプライバシー、個人ドメインの使用、HTTPS の有効化、必要に応じてコンピューティング リソースを拡張しながらユーザー アクセスを管理するなど、さまざまな機能を柔軟にカスタマイズできるなど、いくつかの重要な利点が得られます。

始めるには、この便利なチートシートをチェックしてください。

Linuxへのコードサーバーのインストール

インストール プロセスに Docker を使用すると、コード サーバーのセットアップは簡単になります。

まず、次のコマンドで Docker Hub から公式の code-server イメージをダウンロードします。

sudo docker pull codercom/code-server

このコマンドは、コンテナの作成に進む前に、コード サーバー イメージの最新バージョンがローカルに保存されていることを確認します。

コードサーバーDockerイメージをダウンロード

次に、一意のパスワードを指定して永続的なストレージを確保するコマンドを実行して、バックグラウンドで新しいコード サーバー コンテナーを開始します。

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

コードサーバーコンテナを起動する

コードサーバーの設定が完了したら、Webブラウザでhttp://localhost:8443と入力してアクセスします。コマンド実行時に設定したパスワードを入力しdocker run、「送信」をクリックしてコードサーバーにログインします。

アクセスコードサーバー

コードサーバーを使い始める

ログインすると、おなじみのデスクトップ版VS Codeによく似たインターフェースが表示されます。主要なコンポーネントの概要は以下のとおりです。

ファイルエクスプローラー

ファイルエクスプローラーを使えば、プロジェクト内を簡単に移動できます。フォルダーの閲覧、ファイルの開き方、新規ファイルの作成、プロジェクトの構造管理など、様々な操作を簡単に行えます。

ファイルエクスプローラー

エディタ

中央のエリアはエディターで、ほとんどの作業はここで行います。ファイルを開くと、デスクトップ版のVS Codeと同じように、ここにコードの作成とフォーマットが表示されます。

コードエディター

ターミナル

ターミナルはコードサーバーの下部に簡単に配置されています。上部のメニューから「ターミナル」→「新しいターミナル」を選択するか、キーボードショートカットのCtrl+を使って開くことができます。また、 + + を`押すことでもターミナルに素早くアクセスできます。CtrlShiftC

内蔵ターミナル

拡張機能

拡張機能はVS Codeの強力な機能です。サイドバーにある「拡張機能」タブを使用すると、リンター、テーマ、さまざまな言語サポートツールなどを含むVS Code拡張機能を参照、インストール、管理できます。

拡張機能

検索バーを使用して拡張機能を検索し、すぐにインストールしてアクティブ化することで、開発環境の機能が強化されます。

ブラウザベースのIDEをカスタマイズする

テーマの変更など、IDE の外観をカスタマイズするには、左下隅にある歯車アイコンをクリックし、「テーマ」にマウスを移動して、ドロップダウン メニューから「カラー テーマ」を選択します。

設定を開く

利用可能なテーマのリストが表示され、希望するテーマをプレビューして適用できます。

テーマを選択

さらに、「拡張機能」タブから好みのテーマを簡単にインストールし、すぐに有効にすることができます。

新しいテーマをインストールする

さらに、歯車アイコンをクリックして「設定」を選択すると、その他の設定をカスタマイズできます。ここでは、エディターの動作、フォントサイズ、フォーマットなど、さまざまな設定を変更できます。

コードサーバーのカスタマイズ

コードサーバーで最初のプログラムを作成して実行する

新しいファイルを作成するには、エクスプローラーパネルを使用するか、キーボード ショートカットCtrl+ Alt+を使用しますN

新しいファイルを作成

「言語を選択」をクリックするか、ショートカットCtrl+を使用してプログラミング言語を選択しK、次にMをクリックして、Python などの目的の言語を選択します。

言語を選択

次のコードをエディターに貼り付けると、「Welcome to maketecheasier.com」が 3 回出力されます。

for i in range(3): print("Welcome to maketecheasier.com")

Ctrlこのプログラムを実行する前に、サーバーにPythonがインストールされていることを確認してください。 +を押してS適切な名前を付け、「OK」をクリックしてファイルを保存します。

ファイルを保存

CtrlPython スクリプトを実行するには、 +でターミナルを開き`、次のコマンドを実行します。

python3 mteExample.py

Python スクリプトコードサーバーを実行する

Linuxシステム上でcode-serverが正常に動作すれば、ブラウザベースの開発環境のメリットを享受できるようになります。テーマや拡張機能で環境をカスタマイズしたり、様々なプログラミング言語でコードを実行したり、カスタムドメインとHTTPSによる安全なアクセスを実現したりできます。次のステップとして、Gitワークフローの検討、本番環境でのSSL有効化、JupyterLab、Docker、PortainerなどのWebベースツールの統合など、環境の強化を検討し、ホームラボの機能を拡張しましょう。

出典と画像

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です