Setting Up VS Code Remote Development for Free on Amazon EC2

Remote development of Amazon EC2 using VS Code: Convenient and efficient cloud development experience

This article will guide you how to configure a VS Code remote development environment on Amazon EC2 to achieve convenient and efficient cloud development. This method has the advantages of strong portability, high scalability, synchronization of production and development environment, smooth development process and high reliability. But it should be noted that a stable network connection is crucial to avoid loss of work due to disconnection.

Key points:

• By setting up VS Code remote development on Amazon EC2, you can achieve code portability, scalability, synchronization of production and development environments, seamless development experience, and higher reliability. However, this requires a stable network connection to avoid work losses due to disconnection.
• Creating and configuring an AWS server involves logging into the AWS Management Console, selecting Ubuntu as the preferred version, selecting t2.micro as the instance type, allowing incoming SSH connections, and creating a new key pair.
• Installing and configuring Visual Studio Code extensions includes installing the Remote-SSH extension and configuring the remote SSH extension using the server's IP address and private key path.
• The test settings include connecting to the host configuration created in the previous step and selecting the working directory. This tutorial also includes steps to create a demo Node server.

Remote development is simply about developing on a remote server. The local machine is connected to the cloud server via SSH. SSH stands for Secure Shells or Secure Socket Shells – a protocol that communicates securely between two computers through a terminal.

Image source: code.visualstudio.com

Amazon Elastic Compute Cloud (EC2) provides scalable computing resources to build applications (servers) without handling the responsibility of managing physical computers. In this case, we will use the Visual Studio Code editor and connect it to the EC2 instance via an SSH connection.

Precautions

To learn this tutorial, you need to meet the following conditions:

1. Linux-based operating system or Windows 10 with WSL2 installed.
2. The SSH client is installed on your machine. This client should be included as standard on most Linux machines. If not, refer to this list of supported clients.
3. Activated AWS account. If you don't have one, please follow the official tutorial.

Pros and disadvantages of remote development

Before introducing the operation method, let us first understand the reasons for remote development. Here are some of the advantages and disadvantages of server development.

First of all, advantages:

• Porability: You can encode using any device with internet access. Your code is not bound to your local machine, so you can encode anytime, anywhere using any available device.
• Robust Performance: You can easily scale remote servers based on workloads. It's very simple to start a 32GB RAM AMD EPYC instance to handle some data science workloads.
• Production and Development Environment Synchronization: By having a remote development environment similar to the production environment, you can minimize deployment problems.
• Seamless development: Remote encoding allows you to create environments specifically for your current project. For example, a project may require different versions of MySQL, C, and system libraries such as LibPng and ImageMagick. Managing these different versions can be very cumbersome, as any errors resulting from them are difficult to replicate.
• Reliability: Cloud servers are much more reliable than your local machine. Depending on your configuration, your server data can be copied to servers in different regions of the world.

Let's look at the shortcomings now.

The main reason for avoiding encoding in a remote environment is that you need an internet connection to access your remote server. With a fast internet connection, the remote development experience feels natural when opening, creating, and typing files, and interacting with the command line with a remote server. However, with a slow 3G network, you may be disconnected from the server, which can result in a loss of work, ranging from seconds to minutes.

Next, let's get to the core of the article - set up a free EC2 instance and connect it to our local VS Code editor.

Create and configure AWS server

Let's learn step by step how to create and configure your cloud instance.

Login to the AWS Management Console.

Click EC2 to enter the EC2 dashboard. Click the Start Instance button. You will be directed to the AMI selection page.

On the AMI selection page, search Ubuntu and select your preferred version. Make sure the schema is set to x86. We will use the x86 architecture because it has wider software support compared to ARM.

Select t2.micro as the instance type.

Leave the remaining steps as default settings until you go to the Add Storage step. I recommend you use at least 24GB. If you are developing for Node.js, the npm library takes up quite a bit of space and using less space can put you in a strait, so it's a good idea to be cautious.

When you go to the config security group step, you need to allow incoming SSH connections, you have two options:

• Enable all incoming IP addresses: Selecting this option will allow any IP address to access your SSH port, if your situation requires convenience rather than security, select this option.
• My IP: If security is more important, select this option from the drop-down menu to limit the IP address to yours only.

After clicking start, you will be asked to select or create an SSH key pair. Select Create a new key pair. Name the key pair.

Click on the Download Key Pair button to get the private key file. This will download a pem file that you should store in a convenient directory and note its directory path.

Next, click the Start Instance button and your EC2 instance will begin the creation process. Go to the instance page and you should find your newly created instance.

Finally, click on the instance to navigate to its details page and note its public IPv4 DNS address.

We refer to this address as the "hostname" of the instance.

Installing and configuring Visual Studio Code extensions

Now that we have successfully created an EC2 instance, let's see what we need to do in Visual Studio Code. If Visual Studio Code is not installed on your machine, visit its download page and get the correct package for your system.

Installing Remote SSH VS Code Extension

After installing VS Code, open the Extensions tab in the editor (you can choose to use the shortcut key Ctrl Shift X>) and expand on Search for "remote ssh" in the program market.

Find and install the Remote-SSH extension to make sure it is the correct extension (created by Microsoft and installed at the time of this writing is 4.3 million).

Configure remote SSH extension

Click the new button in the lower left corner of the editor. This will open the Command Panel where you should select Remote-SSH: Open Configuration File.

A SSH configuration file will pop up (if the extension recognizes multiple configuration files, select the current user's configuration file), where you can enter the following configuration:

<code>Host VS Code-ssh-tutorial
HostName <hostname>
User ubuntu
IdentityFile <path to identity file></path></hostname></code>

• Host can be any name. This will be displayed in VS Code.
• HostName is the IP address of the server. We wrote this down when creating an EC2 instance.
• User is the default Ubuntu username (in this case ubuntu).
• IdentityFile is the full path to the private key (pem file) we downloaded earlier.

Test settings

Click the remote-ssh button in the lower left corner, and then click Connect to Host that appears in the drop-down menu.

Another drop-down menu will appear. Select the host configuration (VS Code-ssh-tutorial) that you created in the previous step. If all goes well, you should see a new editor window asking you to select your working directory.

In this way, you have set up a remote development environment. Now let's create a simple demo application using Node.js.

Create a demo Node server

Use shortcut keys to open the terminal: Ctrl Shift ` and then install Node.js using the following command:

<code>sudo apt update
sudo apt install nodejs</code>

Next, create an index.js file in a new directory called test:

<code>mkdir test && cd test && touch index.js</code>

Put the following into the index.js file:

<code class="language-javascript">//index.js
const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});</code>

Run this test server with the following command in the server terminal:

<code>node index.js</code>

After running this code, a small pop-up window will pop up in the lower right corner of the VS Code editor as shown below.

You have two options, open in the browser and preview in the editor. Whichever you choose, you will find that the server's port has been forwarded to your localhost and can be accessed using localhost:3000.

Troubleshooting

If you have any issues connecting to the instance you created, here are some troubleshooting tips:

1. Check the configuration file to make sure the private key file path is correct.
2. Make sure the hostname is correct.
3. Check your AWS instance firewall settings. If you set it to allow a specific IP, make sure your current IP has not changed.
4. If you restart your AWS instance, its IP address will change, so remember to update the configuration file with a new IP address.

Conclusion

In this tutorial, we created a free AWS t2.micro instance. We set it up to allow SSH connections from the local machine and connect to it through a remote SSH extension. Finally, we are able to access the port forwarding server we created in the remote environment.

FAQ on VS Code Remote Development on Amazon EC2

(The FAQ part is omitted here because the article is too long and has a high repetition of the content of the article. The FAQ part can be reorganized as needed and the duplicate information is streamlined.)

The above is the detailed content of Setting Up VS Code Remote Development for Free on Amazon EC2. For more information, please follow other related articles on the PHP Chinese website!