VSC - VS Code 遠程開發環境

1 - VS Code Remote Development

1.1 Documentation

1.2 Remote Development extension pack

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

1.3 Comparison


Remote - SSH

Remote - Containers

Remote - WSL

2 - Remote - SSH

Documentation: https://code.visualstudio.com/docs/remote/ssh

2.1 Preparation

Extension

SSH

  • 遠程主機已安裝ssh-server
  • 本地主機已安裝ssh-client

2.2 Configuration


點擊界面左下角圖標,彈出遠程開發命令面板

Remote-SSH: Connect to Host... :
可以直接輸入主機地址進行連接,相關配置不會添加到 SSH 配置文件中

也可以選擇 Add New SSH Host...,輸入完整的ssh指令(支持附加額外的 SSH 參數),相關配置會自動添加到 SSH 配置文件中

2.3 Sample - Remote-SSH: Connect to Host

直接輸入SSH信息並執行連接

選擇目標主機的系統類型

輸入密碼

連接成功

查看信息

在目標主機可以查看到已經自動部署了 Remote Server,路徑爲 ~/.vscode-server/

[anliven@anliven ~]$ ls -l .vscode-server/
total 0
drwxrwxr-x 3 anliven anliven 54 Jun 24 03:58 bin
drwxrwxr-x 5 anliven anliven 62 Jun 24 04:02 data
drwxrwxr-x 3 anliven anliven 40 Jun 24 04:03 extensions
[anliven@anliven ~]$ 
[anliven@anliven ~]$ tree -L 3 .vscode-server/
.vscode-server/
├── bin
│   └── ff915844119ce9485abfe8aa9076ec76b5300ddd
│       ├── bin
│       ├── extensions
│       ├── LICENSE
│       ├── node
│       ├── node_modules
│       ├── out
│       ├── package.json
│       ├── product.json
│       └── server.sh
├── data
│   ├── logs
│   │   ├── 20200624T040232
│   │   └── 20200624T041953
│   ├── Machine
│   ├── machineid
│   └── User
│       └── globalStorage
└── extensions
    └── hediet.vscode-drawio-0.6.6
        ├── CHANGELOG.md
        ├── dist
        ├── docs
        ├── drawio
        ├── package.json
        └── README.md

18 directories, 9 files
[anliven@anliven ~]$ 

2.4 Sample - Remote-SSH: Open Configuration File

2.4.1 Add and configure


輸入連接信息

選擇將連接信息存放在哪個配置文件

提示已添加主機

選擇主機,點擊鼠標右鍵選擇連接方式

連接成功

2.4.2 Configuration change

  • 在命令面板中,Remote-SSH: Open Configuration File...:選取 SSH 配置文件並打開,自定義配置文件
  • 通過遠程資源連接器

    可以查看和修改相應的配置信息,例如,添加端口信息 Port 22,指定祕鑰文件 IdentityFile ~/.ssh/id_rsa.pub

2.5 Login without password

將本地生成的公鑰添加到目標主機的 ~/.ssh/authorized_keys, 此後登錄就不用輸密碼。

GuowangLi@CHN-L-GuowangLi /c/Projects
λ ls -l ~/.ssh/id_rsa.pub
-rw-r--r-- 1 GuowangLi 1049089 579 Apr 27 18:22 /c/Users/guowangli/.ssh/id_rsa.pub
GuowangLi@CHN-L-GuowangLi /c/Projects
λ ssh-copy-id [email protected]
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/c/Users/guowangli/.ssh/id_rsa.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
[email protected]'s password:

Number of key(s) added: 1

Now try logging into the machine, with:   "ssh '[email protected]'"
and check to make sure that only the key(s) you wanted were added.

GuowangLi@CHN-L-GuowangLi /c/Projects
λ

2.6 Extension

給遠程環境安裝插件,對本機的VS Code沒有影響。
插件在遠端提供功能,比如代碼審查、自動補齊等等,而這所有的一切就像在本地操作一樣,對文件的更改也是直接操作的遠程環境中的文件。

Note:需要以非root用戶來進行Remote SSH連接。否則無法在SSH遠程環境無安裝擴展

3 - Remote - Containers

Documentation: https://code.visualstudio.com/docs/remote/containers

3.1 Preparation

System Requirements

  • Linux: Docker CE/EE 18.06
  • Docker Compose 1.21+
[root@anliven ~]# uname -a
Linux anliven 3.10.0-1127.el7.x86_64 #1 SMP Tue Mar 31 23:36:51 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
[root@anliven ~]#
[root@anliven ~]# cat /etc/system-release
CentOS Linux release 7.8.2003 (Core)
[root@anliven ~]#
[root@anliven ~]# docker version
Client: Docker Engine - Community
 Version:           19.03.11
 API version:       1.40
 Go version:        go1.13.10
 Git commit:        42e35e61f3
 Built:             Mon Jun  1 09:13:48 2020
 OS/Arch:           linux/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          19.03.11
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.13.10
  Git commit:       42e35e61f3
  Built:            Mon Jun  1 09:12:26 2020
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.2.13
  GitCommit:        7ad184331fa3e55e52b890ea95e65ba581ae3429
 runc:
  Version:          1.0.0-rc10
  GitCommit:        dc9208a3303feef5b3839f4323d9beb36df0a9dd
 docker-init:
  Version:          0.18.0
  GitCommit:        fec3683
[root@anliven ~]#
[root@anliven ~]# docker-compose --version
docker-compose version 1.26.0, build d4451659
[root@anliven ~]# 

VS Code
Installation - Linux https://code.visualstudio.com/docs/setup/linux

[root@anliven ~]# su - anliven
Last login: Mon Jun 15 20:24:01 EDT 2020 on :0
[anliven@anliven ~]$
[anliven@anliven ~]$ code --version
1.46.0
a5d1cc28bb5da32ec67e86cc50f84c67cc690321
x64
[anliven@anliven ~]$

注意: 應該以非super用戶啓動code

[root@anliven ~]# code --version
You are trying to start vscode as a super user which is not recommended. If you really want to, you must specify an alternate user data directory using the --user-data-dir argument.
[root@anliven ~]#

3.2 Try a Sample

New Container

Sample - Java

https://github.com/microsoft/vscode-remote-try-java
開始創建

創建完成

鏡像與容器

[root@anliven ~]# docker images vsc*
REPOSITORY                                                      TAG                 IMAGE ID            CREATED             SIZE
vsc-vscode-remote-try-java-7082d7a76a508a754975227521a1e638     latest              886f9cad72dc        3 minutes ago       554MB
vsc-vscode-remote-try-python-41cc2ee6f8cb6b0cee4c350f9a78ef53   latest              37ccde86ffac        33 minutes ago      1.15GB
vsc-volume-bootstrap                                            latest              f359f0df1483        36 minutes ago      130MB
[root@anliven ~]#
[root@anliven ~]# docker ps
CONTAINER ID        IMAGE                                                         COMMAND                  CREATED             STATUS              PORTS               NAMES
f360dd02acba        vsc-vscode-remote-try-java-7082d7a76a508a754975227521a1e638   "/bin/sh -c 'echo Co…"   3 minutes ago       Up 3 minutes                            wizardly_benz
[root@anliven ~]#

Close the Remote Connection

打開遠程窗口, 選擇“關閉遠程連接”, 對應的容器也將停止運行。

Some operations

可以通過remote-container操作已經存在的容器

3.3 Remote-Containers: Open Folder in Container

目錄信息
此時目錄爲空目錄,沒有對應的配置,將會觸發“新建配置”的過程

[anliven@anliven samples]$ pwd
/home/anliven/samples
[anliven@anliven samples]$ ls -la
total 4
drwxrwxr-x   2 anliven anliven    6 Jun 18 03:19 .
drwx------. 20 anliven anliven 4096 Jun 18 03:19 ..
[anliven@anliven samples]$


選擇目錄

選擇類型

開始創建
根據配置信息,下載基礎鏡像、構建新鏡像, 然後啓動容器

創建完成

生成的目錄與文件

[anliven@anliven samples]$ ls -la
total 4
drwxrwxr-x   3 anliven anliven   27 Jun 18 03:46 .
drwx------. 20 anliven anliven 4096 Jun 18 03:19 ..
drwxrwxr-x   2 anliven anliven   49 Jun 18 03:46 .devcontainer
[anliven@anliven samples]$
[anliven@anliven samples]$ ls -la .devcontainer/
total 8
drwxrwxr-x 2 anliven anliven   49 Jun 18 03:46 .
drwxrwxr-x 3 anliven anliven   27 Jun 18 03:46 ..
-rw-rw-r-- 1 anliven anliven 1398 Jun 18 03:46 devcontainer.json
-rw-rw-r-- 1 anliven anliven  997 Jun 18 03:46 Dockerfile
[anliven@anliven samples]$
[anliven@anliven samples]$ cat .devcontainer/Dockerfile |grep -v "\//"
#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
#-------------------------------------------------------------------------------------------------------------

# Update the VARIANT arg in devcontainer.json to pick an Ubuntu version: 20.04, 18.04
# To fully customize the contents of this image, use the following Dockerfile instead:
ARG VARIANT="20.04"
FROM mcr.microsoft.com/vscode/devcontainers/base:0-ubuntu${VARIANT}

# ** [Optional] Uncomment this section to install additional packages. **
#
# RUN apt-get update \
#     && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

[anliven@anliven samples]$
[anliven@anliven samples]$ cat .devcontainer/Dockerfile |grep -v "\#"

ARG VARIANT="20.04"
FROM mcr.microsoft.com/vscode/devcontainers/base:0-ubuntu${VARIANT}

相關的鏡像與容器

[anliven@anliven samples]$ docker images mcr.microsoft.com/vscode/devcontainers/base
REPOSITORY                                    TAG                 IMAGE ID            CREATED             SIZE
mcr.microsoft.com/vscode/devcontainers/base   0-ubuntu20.04       2b5fb7ba7ef2        23 hours ago        295MB
[anliven@anliven samples]$
[anliven@anliven samples]$ docker ps
CONTAINER ID        IMAGE                                          COMMAND                  CREATED             STATUS              PORTS               NAMES
10dfd5f1a69e        vsc-samples-2ceaaed4d0d4ec6e208545a84baaada7   "/bin/sh -c 'echo Co…"   11 minutes ago      Up 11 minutes                           vigilant_rubin
[anliven@anliven samples]$

關閉遠程連接

關閉遠程連接後,對應的容器也停止運行

[anliven@anliven samples]$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
[anliven@anliven samples]$
[anliven@anliven samples]$ docker ps -a | grep samples
10dfd5f1a69e        vsc-samples-2ceaaed4d0d4ec6e208545a84baaada7                    "/bin/sh -c 'echo Co…"   14 minutes ago      Exited (137) 44 seconds ago                       vigilant_rubin
[anliven@anliven samples]$

重新打開(只是重啓了已存在的容器)


啓動了現有的容器

[anliven@anliven samples]$ docker ps
CONTAINER ID        IMAGE                                          COMMAND                  CREATED             STATUS              PORTS               NAMES
10dfd5f1a69e        vsc-samples-2ceaaed4d0d4ec6e208545a84baaada7   "/bin/sh -c 'echo Co…"   20 minutes ago      Up 3 minutes                            vigilant_rubin

3.4 Remote-Containers: Attach to Running Container

如果有正在運行的容器

[anliven@anliven samples]$ docker ps
CONTAINER ID        IMAGE                                          COMMAND                  CREATED             STATUS              PORTS                    NAMES
10dfd5f1a69e        vsc-samples-2ceaaed4d0d4ec6e208545a84baaada7   "/bin/sh -c 'echo Co…"   45 minutes ago      Up 6 minutes                                 vigilant_rubin
6a5c0837e615        test-node-web-app                              "docker-entrypoint.s…"   47 hours ago        Up 4 seconds        0.0.0.0:8080->8080/tcp   objective_rhodes
[anliven@anliven samples]$

打開遠程窗口後,將出現“Remote-Containers: Attach to Running Container” 的選項

選擇容器

將會在對應的容器啓動遠程環境, 終端也將變成容器中的終端

3.5 Some configureations

官方示例中,涉及 .devcontainer.json 和 Dockerfile 兩個文件

- .devcontainer :              開發環境配置目錄
  - devcontainer.json :        環境配置文件,定義容器運行時的配置
  - Dockerfile :               環境的Docker鏡像生成文件
- .vscode :                    vscode使用的配置文件(容器端使用)
  - launch.json :              debuger 配置文件(容器端使用)

devcontainer.json reference: https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference
Dockerfile reference: https://docs.docker.com/engine/reference/builder/

4 - Remote - WSL

Documentation: https://code.visualstudio.com/docs/remote/wsl

適用於 Linux 的 Windows 子系統文檔

5 - Troubleshooting

TS-1

Description

Solution
https://docs.docker.com/engine/install/linux-postinstall/

To create the docker group and add your user:

Create the docker group.
    $ sudo groupadd docker

Add your user to the docker group.
    $ sudo usermod -aG docker $USER

Log out and log back in so that your group membership is re-evaluated.
    If testing on a virtual machine, it may be necessary to restart the virtual machine for changes to take effect.
    On Linux, you can also run the following command to activate the changes to groups:
    $ newgrp docker 

Verify that you can run docker commands without sudo.
    $ docker run hello-world

TS-2

Description

Solution
爲普通用戶添加sudo命令的權限

# 1.切換到root用戶,添加sudo文件的寫權限
chmod u+w /etc/sudoers

# 2.編輯sudoers文件,在 root ALL=(ALL) ALL  一行下面添加 <user-name> ALL=(ALL) ALL    (允許<user-name>執行sudo命令, 但需要輸入密碼)
user    ALL=(ALL)    ALL                             # 允許用戶user執行sudo命令(需要輸入密碼)
%usergroup   ALL=(ALL)    ALL                        # 允許用戶組usergroup裏的用戶執行sudo命令(需要輸入密碼)
user    ALL=(ALL)    NOPASSWD: ALL                   # 允許用戶user執行sudo命令,並且不輸入密碼
%usergroup   ALL=(ALL)    NOPASSWD: ALL              # 允許用戶組usergroup裏的用戶執行sudo命令,並且不輸入密碼

# 3.撤銷sudoers文件寫權限
chmod u-w /etc/sudoers

TS-3

Description
VS code的遠程環境提示“找不到擴展”

Solution
需要以非root用戶來進行Remote SSH連接。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章