Visual Studio Code plus Google Cloud Shell

Update: 2020-09-24

Three updates since I wrote the post:

gcloud alpha cloud-shell get-mount-command ${DIR}

It’s possible to use sshfs to mount the Cloud Shell home directory locally:

DIR=/path/to/dir
gcloud alpha cloud-shell get-mount-command ${DIR}

Which generates something of the form:

sshfs [[USERNAME]]@[[HOST]]: ${DIR} \
-p [[PORT]] \
-oIdentityFile=~/.ssh/google_compute_engine \
-oStrictHostKeyChecking=no

You may then code --new-window ${DIR}

curl command may lack .sshHost

curl’ing the cloudshell.googleapis.com endpoint will result in a null value for .sshHost if the Cloud Shell VM must be recreated. The gcloud command avoids this by using an operation to poll the endpoint until the VM exists. The hacky alternative is to run gcloud alpha cloud-shell ssh to force the VM to be created before running the curl command.

Awk

The SSH config file may be generated using jq and awk. Assuming the following cloudshell.awk script:

BEGIN { FS = "\t" }
{ print "Host \"Cloud Shell\"" }
{ printf "  Hostname %s\n",$1 }
{ printf "  LogLevel %s\n","verbose" }
{ printf "  IdentityFile %s\n","~/.ssh/google_compute_engine" }
{ printf "  User %s\n",$2 }
{ printf "  Port %s\n",$3 }

You may:

curl \
--silent \
--header "Authorization: Bearer $(gcloud auth print-access-token)" \
--header "Accept: application/json" \
https://cloudshell.googleapis.com/v1alpha1/users/me/environments/default?alt=json \
| jq -r '. | [.sshHost, .sshUsername, .sshPort] | @tsv' \
| awk -f cloudshell.awk > vscode.sshconfig

Original

It’s practical to access a Cloud Shell VM file system remotely (using ssh, natch) using Visual Studio Code.

I’m using this to explore the development of Google Assistant apps because I’d prefer not install Node.JS and npm on my workstation.

You may enumerate your Cloud Shell VMs access details with:

curl \
--header "Authorization: Bearer $(gcloud auth print-access-token)" \
--header "Accept: application/json" \
https://cloudshell.googleapis.com/v1alpha1/users/me/environments/default

You should receive:

{
  "name": "users/[[EMAIL]]/environments/default",
  "id": "default",
  "dockerImage": "gcr.io/cloudshell-images/cloudshell:latest",
  "state": "RUNNING",
  "sshUsername": "[[USERNAME]]",
  "sshHost": "[[HOST]]",
  "sshPort": [[PORT]],
  "publicKeys": [
    {
      "name": "users/[[EMAIL]]/environments/default/publicKeys/...",
      "format": "SSH_RSA",
      "key": "..."
    },
    ...
  ],
  "webHost": "...",
  "size": "DEFAULT",
  "vmSizeExpireTime": "1970-01-01T00:00:00Z",
  "webPorts": [
    22,
    ...
  ]
}

If you have [jq] installed:

curl \
--silent \
--header "Authorization: Bearer $(gcloud auth print-access-token)" \
--header "Accept: application/json" \
https://cloudshell.googleapis.com/v1alpha1/users/me/environments/default?alt=json \
| jq '. | {host: .sshHost, username: .sshUsername, port: .sshPort}'
{
  "host": "[[HOST]]",
  "username": "[[USERNAME]]",
  "port": [[PORT]]
}

You may create an SSH configuration file that will be used by Visual Studio Code, or plug these values in during configuration of the extension:

E.g. ${HOME}/vscode.remote_ssh_config:

Host cloud-shell
  HostName [[HOST]]
  LogLevel verbose
  IdentityFile ~/.ssh/google_compute_engine
  User [[USERNAME]]
  Port [[PORT]]

NOTE the string values need not be quoted (no "...", just the values) but, if you’d prefer you may use Host "Cloud Shell"

You may confirm that this works:

USERNAME=[[USERNAME]]
HOST=[[HOST]]
PORT=[[PORT]]

ssh -v -i ~/.ssh/google_compute_engine ${USERNAME}@${HOST} --p ${PORT}

NOTE Don’t forget to replace the values with the values from the curl response

Then, from within Visual Studio Code, install Microsoft’s (!) Remote Development extension

Then, click the “Remote Explorer” icon and, from the dropdown select “SSH Targets”.

If you wish to type in the ssh command directly, click the “Add New” ("+") icon and paste into the dialog box:

ssh -v -i ~/.ssh/google_compute_engine [[USERNAME]]@[[HOST]] --p [[PORT]]

NOTE Don’t forget to replace the values with the values from the curl response

If you wish to specify a previously created ssh configuration file, click the Configure icon and specify the config file absolute (!) path

Lastly, you may configure the settings directly by adding:

"remote.SSH.configFile": "/path/to/vscode.remote_ssh_config",

Now the “Remote Explorer” pane should include one ssh target corresponding to your Cloud Shell VM.

You may either right-click the target or click the “+” icon on the right to open connect to the host and, when prompted to “Open Folder” you may choose which folder on the Cloud Shell VM you wish to use.

Hope that helps!

• Visual Studio Code
• Cloud Shell