Remote-SSHプラグインを介したリモート開発にVisualStudioCodeを使用する方法

投稿日: 2022-04-20 2022-10-21
タグ: Development, Ubuntu 18.04, VS Code

序章

Visual Studio Code は、開発者に人気のある統合開発環境（IDE）です。プラグインの豊富な選択肢、最小限の設計、およびクロスプラットフォームのサポートにより、あらゆるレベルの開発者に最適です。このチュートリアルでは、Remote-SSHプラグインを使用してリモートソフトウェア開発を有効にすることに焦点を当てています。このプラグインを使用すると、ローカルワークステーションでファイルを編集できますが、プログラムの実行、単体テスト、リモートサーバーでの静的分析などの開発タスクを実行できます。

これがあなたにとって有益である理由はたくさんあります。たとえば、Windowsワークステーションがあり、Windowsで開発したいが、コードは最終的にLinuxで実行される場合があります。現在のマシンが利用できるよりも多くのRAMまたは処理能力が必要な場合や、会社のポリシー、またはワークステーションをきれいに保ちたいという要望のために、個人のマシンからコードを遠ざけたい場合があります。

このチュートリアルでは、Remote-SSHプラグインを有効にし、リモートサーバーでコードを実行するようにVisual Studio Codeを構成し、リモートサーバーにインストールされているローカルのVisualStudioCodeからコードを実行します。

前提条件

このガイドに従うには、次のものが必要です。

Windows、MacOSX、またはLinuxを実行しているローカル開発マシン。このチュートリアルはChromeOSデバイスでは機能しません。
Visual Studio Codeは、公式Webサイトからダウンロードしてインストールできます。
生成されたSSHキーペア：
- macOSまたはLinuxを使用している場合は、 Ubuntu20.04でSSHキーを設定する方法の手順1に従うことができます。コマンドは同じなので、チュートリアルでUbuntu18.04用であると言われていることを心配しないでください。
- Windowsを使用している場合は、チュートリアル WindowsでPuTTYを使用してSSHキーを作成する方法に従って、SSHキーを作成してください。
- DigitalOceanを使用している場合は、SSH公開鍵をDigitalOceanアカウントにアップロードする方法ガイドに従うことができます。
Ubuntu18.04初期サーバーセットアップガイドに従ってセットアップされた1つのUbuntu18.04サーバー（非ルートを含む） sudo-有効なユーザーとファイアウォール。

ステップ1—リモートSSHプラグインのインストール

Extensions Marketplace では、さまざまなツールやプログラミング言語でサポートされているサードパーティの拡張機能をダウンロードできます。ここで、Remote-SSHプラグインを検索してインストールします。

IDEの左側には、5つのアイコンが縦に並んでいます。右上の正方形が爆発するボックス内の4つの正方形のように見える下部のアイコンは、ExtensionsMarketplaceのアイコンです。

を押してこのセクションにアクセスすることもできます Ctrl+Shift+X. このページを開くと、ダウンロードしてインストールするための推奨プラグインが表示されます。

拡張機能マーケットプレイスを開いたら、次のように入力します Remote-SSH マーケットプレイスの検索拡張機能検索バー。プラグインを見つけたら、プラグインを選択し、緑色のインストールボタンをクリックして拡張機能をインストールします。

これで拡張機能がインストールされました。次に、サーバーに接続できるように拡張機能を構成します。

ステップ2—リモートSSHプラグインの構成とサーバーへの接続

プラグインがインストールされたので、サーバーに接続するようにプラグインを構成できます。そのためには、次の情報が必要です。

サーバーのIPまたはホスト名。
接続するユーザー名。
ユーザーの認証に使用する秘密鍵。

この情報を使用して、Visual Studio CodeがサーバーにSSH接続してファイルを同期し、ユーザーに代わってコードを実行するために使用できるSSH構成ファイルを作成します。この構成は、VisualStudioCodeを使用して作成します。

Remote-SSHプラグインがインストールされたので、VisualStudioCodeインターフェイスの左下隅に小さな緑色のボックスが表示されます。マウスポインタでボックスにカーソルを合わせると、ポップアップにリモートウィンドウを開くと表示されます。ボタンは、小なり記号の下にある大なり記号のように見えます >< 、次の画像のように：

ボタンをクリックすると、上部中央にダイアログボックスが表示されます。リストからRemote-SSH：OpenConfigurationFile…を選択します。

次のプロンプトでは、開く構成ファイルを尋ねられます。 Windowsを使用している場合は、2つの場所が表示されます。1つは個人のユーザーディレクトリにあり、もう1つはSSHのインストール場所にあります。サーバーを構成するときは、ユーザーディレクトリ内のファイルを使用する必要があります。

ファイルを選択すると、エディターが開きます config ファイル。次のコードをファイルに追加してサーバーへの接続を定義し、強調表示されたセクションをサーバーの情報に置き換えます。

構成

Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

この構成ファイルの仕組みは次のとおりです。

Host：これは、ホストの名前を指定します。これにより、サーバーに接続するときに、完全なIPアドレスまたはホスト名の代わりに短い名前または略語を使用できます。
HostName：サーバーの実際のホスト名。IPアドレスまたは完全修飾ドメイン名のいずれかです。
User：接続に使用するユーザー。
IdentityFile：SSH秘密鍵へのパス。 MacおよびLinuxシステムでは、これはホームディレクトリの非表示にあります。 .ssh 通常呼ばれるディレクトリ id_rsa. Windowsを使用している場合は、を使用してファイルを作成したときに、このファイルを保存する場所を指定します。 putty-gen.

ファイルに適切な値を指定して、ファイルを保存します。

これで、Visual Studio Codeが構成され、サーバーに接続する準備が整いました。左下隅にある緑色のリモートウィンドウを開くボタンをクリックし、リモートSSH：ホストに接続…を選択します。

これを実行すると、使用可能なすべての構成済みサーバーがドロップダウンメニューに表示されます。このリストから接続するサーバーを選択します。

マシンからこのサーバーに初めて接続する場合は、次の画像のようなSSH指紋認証ダイアログが表示される可能性があります。

これは、自分が思っているサーバーに実際に接続していることを確認するためです。これを確認するには、サーバーに手動でログインして実行します ssh-keygen -l -f /etc/ssh/ssh_host_key.pub サーバーのフィンガープリントを表示します。このフィンガープリントがVisualStudioCodeで表示されているものと同じである場合は、実際に自分が思っているサーバーに接続しているので、続行をクリックできます。

Visual Studio Codeは、デフォルトで、新しい接続が確立されたときに新しいウィンドウを開きます。ウェルカム画面とともに新しいウィンドウが表示されます。表示されている場合は、接続が成功したことがわかります SSH: your_ip_address_or_hostname 左下隅の緑色のボックスにあります。これは、VisualStudioCodeがリモートサーバーに接続されて通信していることを意味します。

接続したので、エディターからコマンドとコードを実行できます。

ステップ3—リモートサーバーでコードを実行する

Remote-SSHプラグインが構成され、リモートマシンでコードを実行するときが来ました。 Visual Studioウィンドウ上部のナビゲーションバーからターミナルを選択し、新しいターミナルをクリックして、ターミナルウィンドウを開きます。を押してターミナルを開くこともできます CTRL+Shift+`. 開いている端末は、ローカルマシン上の端末ではなく、リモートサーバー上の端末です。

ターミナルが開いたら、次のコマンドを発行してサーバーのIPアドレスを表示し、リモートサーバーに接続していることを確認します。

ip addr

端末に次の出力が表示されます。

Output1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff
    inet your_server_ip brd your_broadcast_address scope global eth0
       valid_lft forever preferred_lft forever
    ...

リモートコードを実行する機能をテストするには、という新しいPythonファイルを作成します。 hello.py エディターで。リモートサーバーに接続すると、Visual Studio Codeを介して作成されたすべてのファイルは、ローカルマシンではなく、そのサーバーに保存されます。

次の内容をファイルに追加します。

hello.py

print("Hello Sammy!")

サーバーでこのプログラムを実行するには、ナビゲーションメニューから、またはキーシーケンスを押して、VisualStudioCodeでターミナルを開きます。 CTRL+Shift+`. このターミナルセッションはリモートサーバーに接続されているため、ターミナルで次のコマンドを実行して、 hello.py プログラム：

python3 hello.py

プログラムの出力が表示されます。

デバッグコンテキストメニューからデバッグなしで実行を選択してファイルを実行することもできます。

注：Python拡張機能などの開発拡張機能がVisual Studio Codeにインストールされている場合は、拡張機能マーケットプレイスを介してこれらの拡張機能をサーバーに再インストールする必要があります。以前にこれらのプラグインをVisualStudioCodeにインストールしたことがある場合、それらを再度検索すると、Marketplaceは SSHにインストール：hostnameと表示します。 Visual Studio Codeがプラグインをインストールしてファイルを作成する場所であるため、現在の開発コンテキストに常に注意を払ってください。これらのプラグインをインストールせずにコードを実行しようとすると、画面の右下隅にエラーダイアログボックスが表示され、リモートサーバーにプラグインをインストールするように求められます。これらをインストールした後、VisualStudioCodeをリロードする必要がある可能性があります。再起動すると、手動で再接続しなくてもリモートサーバーで動作し続けます。

結論

これで、SSHを使用したリモートサーバーでの開発用にVisualStudioCodeが構成されました。 IDEを使用したリモート実行には、さまざまなオペレーティングシステムやさまざまなハードウェア仕様でコードがどのように実行されるかをすばやくテストできるなど、多くの利点があります。インターネットに接続している限り、サーバーに接続して任意のコンピューターからコードを操作でき、Windowsをプライマリオペレーティングシステムとして実行している場合でも、Linux環境を使用して開発できます。

getdocs

13036