Experience a wave of remote development from zero

Hello, I’m fishskin.

When I first learned to program, I took it for granted that I could only edit code files on my computer. If you want to modify the code on the server, you can only copy the code from the server, modify it locally and then upload it to the server.

But this is very inefficient!

Later I learned to use Git to synchronize between local and remote. First modify the code locally, git push it to Github code hosting platform, and then git pull it to the server. Although a lot of convenience, but encountered frequent modifications or very crazy.

Is there a more efficient way to keep local and remote code in sync in real time?

Please give today’s protagonist: remote development technology, I take you to experience a wave.

Remote development practice

Outline of this paper:

What is remote development?

Remote is relative to local.

In traditional development, we write code locally and run it on a server.

The characteristics of remote development are:

  1. The code is not on your own computer, but on a remotely connected server

  2. You can view and modify code on a remote server directly and in real time locally

In other words, we can sit at home and use one of our own computers to edit code on a remote server.

Attention! Don’t confuse remote development with telecommuting lol.

As cool as it sounds, there are a lot of technologies available for remote development, like the oldest remote control. It is recommended that you use the remote development plugins that come with the development tools, such as The JetBrains Bucket and VS Code.

Since VS Code is relatively light and easy to use, here is a sample of VS Code remote development.

Actual combat experience

1. Install the plug-in

First open VS Code, click the extension button on the left, and search for “remote”. You can see some remote development plug-ins that support SSH remote connections, Docker containers, Linux subsystems on Windows, etc.

Here we select the second remote-SSH in the picture below and click Install:

2. Remote connection

Once installed, press CTRL + Shift + P to open the command panel, type “remote”, go to remote-ssh: Add New SSH Host, and Add an SSH remote connection.

Enter the username and host address of the remote server you want to connect to as prompted (if there is no server, you can also start the VM locally), remember to include the -a parameter (enable proxy forwarding) :

After entering connection information, select to save this information to a configuration file:

Then the connection information is added successfully:

Click the Connect button, the connection is successful, you can see “connected to remote” in the left panel:

3. Browse in real-time

When connected to a remote server, we can browse the files on the remote server as if we were operating our own computer.

Let’s say I enter my project directory here:

On the left you can see the files under the directory:

4. Remote editing

Let’s create a new file in the editor called test.java,

You can use XShell and other remote SSH connection software to access the same server, enter the same directory, use ls to view the files under the directory, you can see the Java file created in VS Code:

5. Real-time collaboration

We can use VS Code and other SSH connection software, such as XShell, to simulate two users collaborating on the same Code file at the same time.

Start with a nice line of Code in VS Code:

Edit the file again in XShell, and you can immediately see the line VS Code has written. Write another line below it:

Once saved, you can see the entire Code in VS Code:

6. Port forwarding

Since the code we are editing is remote, and the code is also running remotely, what if we want to see the effect of the remote project?

VS Code provides the port forwarding function. You can configure the mapping between the remote server and the local port to support applications that directly access the remote server.

Press CTRL + Shift + P to open the command panel, search for “forward”, and select the forwarding port:

Enter the port number to forward (the port occupied by the application), add success, very convenient!

Then you can access the running project locally!

7. Remote debugging

In addition to editing Code remotely, we can take advantage of VS Code’s own code-prompting capabilities and debugging capabilities. Since there is almost no difference between remote and local debugging, I will not demonstrate it here.

feeling

I had heard of remote development for a long time, but I always thought it would be cumbersome to configure and useless. But the actual experience, not only easy to install, and friendly operation, basic feel no delay, just like using your own computer, really very cool!

Remote development has many benefits:

  1. As the code runs in the remote server, can greatly save their own computer resources, will not appear to open several projects on the computer card such as dog situation.

  2. It can be co-edited by multiple people to improve collaboration efficiency.

  3. You don’t have to build an environment locally to get started quickly. It’s especially nice when you have to do everything, like when I was in emergency support of a project and a colleague had a development machine with a ready-made executable environment and project code. The next time THIS happens, I’ll just connect to his server and develop remotely.

  4. If you are not familiar with Linux server operations, you can also think of remote development as a dumb-ass server management software.

Above is the current share, interested students may have a look me in the small broken stand new VS Code remote development demonstration video (www.bilibili.com/video/BV1s6…

I am yu PI, is trying to become stronger (bald) knowledge blogger, welcome to read my self-study from 0 into Tencent programming learning, job hunting, textual research, writing book experience, no longer confused!

I learn computer four years, mutual encouragement!

“Like” or “request”, I wish everyone can be happy, make a fortune, the line of great luck.