MENU
| Whimsical Blog
  1. Home
  2. education
  3. SSH connection and Visual Studio Code(WSL,Docker)

SSH connection and Visual Studio Code(WSL,Docker)

education
mamushi

I usually used the following method to make SSH connections at the command prompt. Assume that you have already registered your public key with the server.

ssh -i C:\Users\<Username>\.ssh\id_rsa your_username@your_server_ip

However, you can shorten the command by using a config file. the Windows SSH functionality was added relatively recently. with the release of Windows 10, Microsoft natively supports OpenSSH clients and servers. support for OpenSSH clients and servers natively with the release of Windows 10. With this addition, SSH functionality similar to that of Linux is now available in the Windows environment.

Configure your SSH client to use your SSH key, which on Windows can be found at

C:\Users\<Username>\.ssh\config
Host your_server_alias
    HostName your_server_ip
    User your_username
    IdentityFile ~/.ssh/id_rsa

Now you can connect by typing the following at the command prompt

ssh your_server_alias

There are other advantages as well, which are summarized below.

Advantages of config file

  1. Simple connection commands: ssh your_server_alias
    • You can easily connect using an alias (hostname) instead of having to type a long command each time.
    • Example: ssh myserver is all you need to connect.
  2. Easier to manage multiple configurations: e.g.
    • Connection information to multiple servers can be centrally managed.
    • Easily switch between different settings for each server.
  3. Reusable settings:.
    • Once configured, you can connect from any terminal using the same settings.
    • Easy to manage because SSH client settings can be changed all at once.
  4. Passphrase omission:.
    • Even if a passphrase is set in the key file, the passphrase can be omitted by setting it in the config file.
  5. Per-environment settings: You can set the passphrase in the
    • Detailed settings such as proxy, port forwarding, etc. can be configured for each host.

Example of config file settings

Here is a concrete example of config file settings.

# ~/.ssh/config 

# Configuration of server 1 
Host server1 
 HostName 192.168.1.1 
 User user1 
 IdentityFile ~/.ssh/id_rsa_server1 
 Port 22 

# Configuration of server 2 
Host server2 
 HostName 192.168.1.2 
 User user user2 
 IdentityFile ~/.ssh/id_rsa_server2 
 Port 2222 

# Default settings 
Host * 
 ForwardAgent yes 
 ServerAliveInterval 60 
 ServerAliveCountMax 30

Explanation of each setting item

  • Host: Alias name of the connection destination. SSH connection can be made with the name specified here.
  • HostName: IP address or domain name of the server to connect to.
  • User: User name on the server.
  • IdentityFile: The path of the SSH key to use.
  • Port: Port number to use for SSH connections.
  • ForwardAgent: Enable SSH agent forwarding.
  • ServerAliveInterval: Interval (in seconds) between keep-alive messages to the server.
  • ServerAliveCountMax: Maximum number of keep-alive messages.

The use of config files greatly simplifies and improves the efficiency of everyday tasks, for example, connecting with a simple command such as ssh server1 or ssh server2. Best of all, by adding Remote – SSH to the VS Code extension, you can log in using VS Code. It is nice to be able to edit files here. config file in that case.

How to connect using Remote – SSH with VS Code

  1. Installing the Remote – SSH extension
    First, install the Remote – SSH extension in VS Code.
    • Click on the extension icon (the icon with four squares in a row) on the left side of VS Code.
    • Type “Remote – SSH” in the search bar to install the Microsoft extension.
  2. Configure the SSH config file
    Add the necessary server information to the SSH config file ( C:\Users\<Username>\.ssh\config). For example, configure as follows
    Host myserver
    　 HostName your_server_ip
    　 User your_username
    　 IdentityFile C:\Users\<Username>\.ssh\id_rsa
  3. Connect from VS Code
    • Open VS Code and click the “Remote Explorer” icon on the left.
    • The Remote Explorer sidebar will appear, click the + (new remote) to the right of SSH.
    • Type something and press enter . After all, you can flexibly change the connection settings to the remote server by editing the following SSH config file.
    • Choose whether to save it to ~/.ssh/config or to another file (usually ~/.ssh/config is selected).
    • You will see the newly added server in the list of connections, click on it to connect. If you cannot connect, edit the config file.
    • The first time you connect, you will be asked to confirm your host key, click Continue to establish the connection.

Remote – SSH Advantages

  • Develop in a remote environment just as you would in a local environment: Through VS Code’s interface, you can edit and debug files on a remote server.
  • Integrated terminal: Open a terminal on the remote server and execute commands from within VS Code.
  • Use Explorer: Use VS Code’s file explorer to browse, edit, and save files on remote servers.
  • Take advantage of plug-ins: Many VS Code plug-ins work in remote environments, making development more efficient.

With VS Code’s Remote – SSH extension, you can connect to a remote server and visually see the directory hierarchy as if you were working on a local directory. directory hierarchy as if you were working with a local directory. Using the file explorer, you can manipulate files intuitively in the GUI, eliminating the need to use the command line, which is very convenient. Also, the first time you connect, VS Code’s Remote – SSH extension uploads and installs the necessary server files on the remote server. This server file is required for VS Code’s Remote feature to work properly.

What happens when connecting for the first time

  1. Establish connection:.
    • Connect to the remote server using VS Code’s Remote – SSH extension. The extension connects to the specified host using the SSH protocol.
  2. Upload the required files:.
    • The first time you connect, VS Code uploads VS Code server files to the remote server. These files are required to perform VS Code editing functions on the remote server.
  3. Location of files:.
    • Uploaded files were usually located in the .vscode-server directory in the remote user’s home directory.
  4. Starting the VS Code server: The
    • Once the upload is complete, VS Code starts a VS Code server on the remote server. This server will work with the VS Code client to provide functions such as editing and debugging remote files.

Combining Docker with WSL extensions provides additional benefits. I installed the Docker extension because it was listed as a recommended extension; the WSL extension appeared to be already installed.

Advantages of Docker and WSL Extensions

  1. Seamless development environment:.
    • WSL allows Linux-based development environments to run seamlessly on Windows.
    • By running Docker containers inside WSL, you can enjoy native Linux performance.
  2. File System Integration:.
    • The WSL and Windows file systems are integrated for easy file exchange.
    • VS Code’s Remote – WSL extension allows you to edit files directly in the WSL.
  3. Utilize command line tools:.
    • Linux command line tools and scripts can be used within WSLs to create a flexible development environment.
    • Docker CLI tools are also available from the WSL, making it easy to manage containers.
  4. Integrated development flow:.
    • The Docker extension for VS Code allows you to centrally build, manage, and debug Docker containers.
    • You can directly manipulate Docker daemons within WSLs to maintain an efficient development flow.

Installation and Configuration Procedure

  1. Installing WSL
    Enable “Windows Subsystem for Linux” from “Settings” -> “Apps” -> “Programs and Features” -> “Enable or Disable Windows Features” in Windows. Then install a Linux distribution such as Ubuntu from Microsoft Store.
  2. Install Docker Desktop
    Install Docker Desktop. You can use Docker with distributions that have integration enabled in Resources from the Settings I did not install by command within the WSL You do not have to install Docker Desktop, but you can install Docker Desktop within the WSL You can also install Docker.
  3. Installing VS Code extensions
    Install the “Remote – WSL” and “Docker” extensions from the VS Code extension marketplace (if not already there).
  4. Configure Docker in WSL
    Open a WSL shell (e.g. Ubuntu) and check that Docker is working properly.
    docker --version
    Also start the Docker daemon if necessary.
    sudo service docker start

You can switch between WSL and SSH with Remote Explorer. Here, even if the distribution is stopped, the selected distribution will be started by attempting to connect.

However, if the SSH function is restricted on the server, this will not work. The following is the method we used to change the image output destination in stable diffusion. In other words, you can mount the remote storage on your computer. This will allow you to see the directory hierarchy and edit files with VS code.

Mount the Lollipop storage using Rclone and WinSFP.

Whimsical Blog
Convenient use of Rclone (changing the image output destination for stable diffusion) | Whimsical Bl… An easy-to-follow guide on using Rclone to seamlessly manage multiple cloud storage services. Discover unexpected and convenient ways to enhance your workflow w…

In the end, VS Code felt like an upward compatibility with Command Prompt and PowerShell, as VS Code (Visual Studio Code) is a code editor with integrated terminal functionality, providing a VS Code (Visual Studio Code) provides a more versatile development environment than Command Prompt or PowerShell. Below is a detailed explanation of the differences between VS Code and Command Prompt and PowerShell, as well as VS Code’s convenience features.

VS Code Features and Conveniences

  1. Integrated Terminal
    • VS Code has an integrated terminal that allows you to use multiple shells directly within VS Code, including Command Prompt, PowerShell, and Bash (when using the Windows Subsystem for Linux (WSL)).
    • You can easily open and switch between terminals via shortcut keys or menus.
  2. Code editing features:.
    • Many features are provided to assist code editing, such as syntax highlighting, code completion, error checking, and code formatting.
    • Extensions can be added to support various programming languages and frameworks.
  3. Debugging features:.
    • Built-in debugging tools allow you to track code execution step by step, set breakpoints, and check the status of variables.
    • A wide variety of debugging extensions are also available.
  4. Version Control:.
    • Integrated with version control systems such as Git, you can manage repositories, create commits, and manipulate branches from within VS Code.
  5. Remote Development: You can develop remotely from within VS Code.
    • Remote – SSH extension allows you to edit files on a remote server as if they were in your local environment.
    • Remote – Containers and WSL support are also available for seamless development in a variety of environments.
  6. Extensions:.
    • A rich marketplace of extensions is available to add support for a variety of tools and frameworks.

Differences from Command Prompt and PowerShell

  • Command Prompt:.
    • A basic command line interface, used primarily for Windows file system operations and simple script execution.
    • Extensibility and plug-in support is limited.
  • PowerShell:.
    • A more advanced shell environment, providing an object-oriented command line interface.
    • It is useful for system administration and automation scripting.
  • VS Code:.
    • As an integrated development environment (IDE), VS Code offers a wide range of features including code editing, debugging, version control, and remote development.
    • Through the integrated terminal, it also includes command prompt and PowerShell functionality.

VS Code is not just a text editor or shell, but an integrated development environment, making it upwardly compatible with Command Prompt and PowerShell. This allows developers to code, debug, version control, and remotely develop within a single tool, greatly increasing development efficiency.

education
Please share if you like it!
TOC