GCE上のファイルをVScodeで編集する方法

今回はGoogle Cloud Platform（GCP）のConpute Engine上のファイルを、ローカルのVisual Studio Codeから編集する方法を紹介します。

とはいっても同じような記事はたくさんあるので、今回は僕が参考にした記事中で「ここは初心者に優しくないのでは？」と感じた部分に重点を置いて解説していきます。

今回、参考にした記事はこちら。

☞　VSCode+RemoteDevelopment+GCEでリモート開発環境を構築する

※記事の内容に進む前に、次の記事を参考にしてVisual Studio Codeをインストールしておいてください。

☞　Visual Studio Codeインストール手順＜Windows向け＞

GCPの登録とGCEインスタンス構築

まずはGoogle Cloud Platform上のCompute Engineで、仮想マシン（のインスタンス）を作成する必要があります。

具体的な手順は次の記事で分かりやすく解説しているので、確認してください。

参考記事

【Windows】GCE VMインスタンスをローカルマシンで操作する

本格的にKaggleに挑戦することになったので、その中で発生した問題の解決策を共有。 この記事では「Google Cloud上での仮想マシンを、ローカルなWindowsで使用する手順」を説明していきます。 具体的には以下の6ス[…]

VScodeをGCEに接続するための準備

Visual Studio Codeを、GCEに接続するためにはいくつか準備が必要です。

準備することの一覧は次のとおり。

1. .sshディレクトリの直下にconfigファイルを作成する
2. GCEの外部IPアドレスを静的にする
3. GCE用の秘密鍵の作成とconfigファイルへの記述

.sshディレクトリ・configファイルの作成

まずはssh接続用の鍵を保管しておくための「.sshディレクトリ」と、ssh接続の設定を記述しておく「configファイル」を作成しましょう。

※sshキーを使って外部への接続を行ったことがある方は、すでに作成されているはずなので必要ありません。

まずは次のコマンドを打ち込んで「.sshディレクトリ」を作成。

mkdir .ssh

念のためにディレクトリの作成場所は、「~/ユーザー名/」の直下にしておきましょう。

続いて「.sshディレクトリ」の中に「configファイル」を作成。

ubuntu（Linux系）では次のコマンド。

touch ~/.ssh/config

chmod 600 ~/.ssh/config

windowsのPowershellでは次のコマンドを打ちます。

New-Item ~\.ssh\config
icacls ~\.ssh\config /grant [ユーザ名]:F

※どちらも二行目は「権限の変更」を行うための記述ですが、必要ないかもです。

GCE用の秘密鍵の作成とconfigファイルへの記述

続いてGCE接続用のssh鍵の生成と「configファイル」へのルールの追記を行います。

これには、めっちゃ便利なコマンドがあります。

gcloud compute config-ssh

このコマンドは、GCE接続用の鍵を生成＆~/.ssh/configへのルール追記、を自動で行ってくれます。

「.sshファイル内」にgoogle_compute_engineという名前の鍵ファイルが作成されているのを確認してください。

またconfigファイルの中には次のような記述がされいるはず。

Host ＜自動で作成された文字列＞
    HostName <外部IPアドレス>
    IdentityFile C:/Users/＜ユーザー名＞/.ssh/google_compute_engine
    UserKnownHostsFile=/home/<ユーザー名>/.ssh/google_compute_known_hosts
    HostKeyAlias=<内緒>
    IdentitiesOnly=yes
    CheckHostIP=no

※この時一度、得られたssh鍵でターミナルからGCEにつないでおかないと、VSCodeが接続できません。

GCEの外部IPアドレスを静的にする

GCEのデフォルト設定では、インスタンスを再起動するたびに「外部IPアドレス」が変更されてしまいます。

再起動するたびにconfigファイルの設定を書き換えるのは面倒なので、設定を変更していきましょう。

まずはGCPを開いて、「VPCネットワーク」→「IPアドレス」と進んでください。

下のような画面になるので、「上部の外部静的アドレスを予約」をクリック。

名前を適当に入力したら、下にスクロールして「予約」をクリックしたら完成です。

種類が「静的」の外部IPアドレスができるので、それをコピー。

configファイルのHostNameの部分に貼り付けてください。

これで準備は完了です。

VSCodeの設定

最後にVSCode側の設定を行っていきます。

Remote Development拡張機能を入れる

まずは拡張機能として、Remote Developmentを導入します。

左タブ中のExtensionsを選択、もしくは「ctrl + shift + X」を拡張機能のメニューを開きます。

そしてremote developmentと入力してでてくるRemote Developmentを有効化すれば完了です。

VSCodeからGCEへssh接続する

最後に、SSHキーを使ってVSCodeとGCEインスタンスをつないでいきます。

VSCodeでF1を押し、>Remote-SSH: Connect to Hostを入力します。

するとconfigファイル内に登録している、Host名がすべて出てくるので、GCEインスタンスのホストを選択しましょう。

GCEに繋がった状態のVSCodeの新しいウィンドウが開けば成功です。

以上！！！

つくだん

最後まで読んでいただきありがとうござました。