Go back

How to get VSCode Cloud IDE on AWS

This section describes how to launch and connect to VSCode Cloud IDE in Amazon Web Services (AWS) with auto-generated(random) password. If you want to launch VSCode cloud IDE with User Provided Password go to - Launch VSCode Cloud IDE with User Provided Password

Note: Password once created Can Not be changed in either way of launching VM.

  1. Open VSCode Cloud IDE VM listing on AWS marketplace

/img/aws/vscode/marketplace.png

  1. Click on Continue to subscribe.
  • Login with your credentials and follow the instruction.
  • Note: After login, it will take you to the default annual contract page. If you do not want to provision the solution with annual contract then please skip this page by not selecting any values from the dropdown menus as shown below. /img/aws/stable-diffusion/annual-contract.png
  • Make sure the Total contract price is $0 and then Click on Continue to configuration button on top right corner. /img/aws/stable-diffusion/total-annual-contract.png
  • Next page will show you the details about hourly, monthly and annual pricing. If you don’t configure the annual contract, the instance get provisioned on hourly basis.
  • Select a Region where you want to launch the VM(such as US East (N.Virginia))

/img/aws/vscode/region.png

  • Click on Continue to Launch Button.
  • Choose Action: You can launch it through EC2 or from Website.(Let’s choose Launch from website)

/img/aws/vscode/launch.png

  • Optionally change the EC2 instance type. (This defaults to t2.small instance type, 1 vCPUs and 2 GB RAM.)
  • Optionally change the network name and subnetwork names.

/img/aws/vscode/vpc.png

  • Select the Security Group. Be sure that whichever Security Group you specify have ports 22 (for ssh), 3389 (for RDP) and 443 (for HTTPS) exposed.

  • Be sure to download the key-pair which is available by default, or you can create the new key-pair and download it. /img/aws/vscode/SG.png

  • Click on Launch..

  • VSCode Cloud IDE will begin deploying.

    1. A summary page displays.To see this instance on EC2 Console click on EC2 Console link.

/img/aws/vscode/deployed.png

  1. On the EC2 Console page, instance is up and running. To connect to this instance through putty, copy the IPv4 Public IP Address

/img/aws/vscode/public-ip.png

  1. Open putty, paste the IP address and browse your private key you downloaded while deploying the VM, by going to **SSH- >Auth **, click on Open. Enter ubuntu as userid

/img/aws/vscode/putty-01.png

/img/aws/desktop-linux/putty-02.png

  1. Once connected, change the password for ubuntu user using below command
sudo passwd ubuntu

/img/aws/desktop-linux/ssh.png

  1. Now the password for ubuntu user is set, you can connect to the VM’s desktop environment from any local Windows Machine using RDP protocol or Linux Machine using Remmina.

From your local windows machine, goto “start” menu, in the search box type and select “Remote desktop connection”. In the “Remote Desktop connection” wizard, copy the public IP address and click connect

/img/aws/vscode/rdp.png

  1. This will connect you to the VM’s desktop environment. Provide the username (e.g “ubuntu”) and the password set in the above “Reset password” step to authenticate. Click OK

/img/aws/vscode/rdp-login.png

  1. Now you are connected to the out of box VSCode Cloud IDE environment via Windows Machine.

/img/aws/vscode/rdp-desktop.png

  1. To connect using RDP via Linux machine, first note the external IP of the VM from VM details page,then from your local Linux machine, goto menu, in the search box type and select “Remmina”.

Note: If you don’t have Remmina installed on your Linux machine, firstInstall Remmina as per your linux distribution.

/img/gcp/common/remmina-search.png 11. In the “Remmina Remote Desktop Client” wizard, select the RDP option from dropdown and paste the external ip and click enter.

/img/gcp/common/remmina-external-ip.png 12. This will connect you to the VM’s desktop environment. Provide “ubuntu” as the userid and the password set in above reset password step to authenticate. Click OK

/img/gcp/common/remmina-rdp-login.png 13. Now you are connected to out of box VSCode Cloud IDE environment via Linux machine.

/img/aws/vscode/rdp-desktop.png

  1. For accessing VSCode in browser, SSH to the VM as shown in Step 4 and run below command -
cat /home/ubuntu/vscode_pass.txt

Note down auto-generated password.

Note: If the password is empty in the file, wait for 2 minutes and check again.

/img/aws/vscode/vscode-web-interface-passwd-file.png

  1. Go to https://VM_Public_IP. Make sure you type https and not http.

  2. You will see certificate warning, accept the warning to proceed for login /img/aws/vscode/certificate-warning.png

  3. Use above auto-generated password from Step 14

Note: If you happen to see a blank screen in the browser after login or page load error, wait for 1-2 minutes and open again in new browser window to see VSCode load. /img/aws/vscode/vscode-web-login.png

/img/aws/vscode/vscode-in-browser.png

Launch VSCode Cloud IDE with User Provided Password

  1. Open VSCode Cloud IDE VM listing on AWS marketplace

/img/aws/vscode/marketplace.png

  1. Click on Continue to subscribe.
  • Login with your credentials and follow the instruction.click on Continue to configuration
  • Select a Region where you want to launch the VM(such as US East (N.Virginia))

/img/aws/vscode/region.png

  • Choose Action: you can launch it through EC2 or from Website.Select Launch through EC2

/img/aws/vscode/launch-through-ec2.png

  • Select instance type as t2.small

/img/aws/vscode/select-instance.png

  • On Step 3: Configure Instance Details page go down to Advanced Details– >User data and enter vscode-password=yourpasswordhere

/img/aws/vscode/vscode-password.png

  • Go with the default setting for Storage

/img/aws/vscode/step-4-storage.png

  • Select or Create Security Group.Whatever Security Group you select should have port 22 (for SSH), port 3389 (for RDP) and port 443 (for HTTPS) exposed.

/img/aws/vscode/step-6-SG.png

  • Click on Review and Launch and on next page Launch.
    It will ask you for Key-Pair.Provide your Key-Pair here. If you don’t have Key-Pair, select Create new key-pair from drop-down and download this key.
    Once key-pair is downloaded, Click on Launch Instance.

/img/aws/vscode/vscode-keypair.png

  1. Once the vm is up and running, you can access Visual Studio Code by going to https://VM_Public_IP
  • Make sure you type https and not http. 4. You will see certificate warning, accept the warning to proceed for login /img/gcp/vscode/certificate-warning.png

    1. Use above password you provided in User data during VM configuration in Step 2

Note: If you happen to see a blank screen in the browser after login or page load error, wait for 1-2 minutes and open again in new browser window to see VSCode load. /img/gcp/vscode/vscode-web-login.png

/img/gcp/vscode/vscode-in-browser.png

  1. We recommend to reserve the VSCode public ip address and make it static in order to access VSCode in browser over the same IP after VM restart.
    Having static IP will also allow the browser to save VSCode password across sessions and user will not have to enter password each time VSCode is opened in browser.
  • Below are the steps for reserving public IP and making it static:
  • Note down the Availability Zone of vscode cloud ide instance.

/img/aws/vscode/availability-zone-for-elastic-ip.png

  • In the left pane of EC2 go to Network & Security and select Elastic IPs option.

/img/aws/vscode/elastic-ip-option.png

  • On Elastic IPs page click on Allocate Elastic IP Address

/img/aws/vscode/allocate-elastic-ip-address.png

  • Select the Network Border Group as per the availability zone of the instance. Select Amazon’s pool of IPv4 addresses radio button and click on allocate.

/img/aws/vscode/Elastic-ip-address-setting.png

  • Once the Elastic IP is allocated, select the Elastic IP and under Actions dropdown select Associate Elastic IP address.

/img/aws/vscode/associate-elastic-ip.png

  • On this page select the instance radio button,enter Instance id, Private IP Adress of the VM and click Associate.

/img/aws/vscode/associate-elastic-ip-setting.png

  • Now go to the instance details page and navigate to Networking tab. Here you can see Elastic IP is associated to the instance.

/img/aws/vscode/vscode-instance-detail-page-elastic-ip.png

The VM now comes with AI assistance plugins installed out of the box, leveraging open source AutoPilot alternatives, offering intelligent code suggestions, enhanced error detection, and personalized productivity enhancements.

Note: While accessing the extensions page of Code server on google chrome or on microsoft edge , if you encounter Error loading webview: Error: Could not register service worker: SecurityError: Failed to register a ServiceWorker error, then please access the code server in mozilla firefox browser.

/img/azure/vscode/extension-error.png

Follow below steps to configure these plugins.

  1. Codegeeks:

Click on Codegeex icon from the left menu as shown below. It will open login window. Click on Login.

/img/azure/vscode/codegeeks-login.png

Click on Allow.

/img/azure/vscode/codegeeks-allow.png

It will ask to open the Codegeex link in browser. Click on Open.

/img/azure/vscode/codegeeks-open-3.png

On the Codegeex authentication page, click on Signup or you can login with the options given on this page as shown below.

/img/azure/vscode/codegeeks-signup-4.png

Once you are successfully logged in to the Codegeeks, go back to Code server page. You should see Codegeex Welcome page.

Note: If you don’t see the Welcome screen, please refresh the page.

/img/azure/vscode/codegeeks-welcome-page-5.png

Enjoy various Codegeex features like Code Generation and Completion, Code Translation, Comment Generation, AI Chatbot and more from the comfort of your Code Server window.

/img/azure/vscode/codegeeks-example-6.png

For more details on how to use Codegeex please refer to Codegeex official Documentation

  1. Cody AI:

Click on Cody icon from the left menu as shown below. It will open the instruction window. Click on Signup at sourcegraph.com option. Click on Open.

/img/azure/vscode/cody-1.png

It will take you to the Signup page on sourcegraph website.

/img/azure/vscode/cody-signin-options-2.png

Signup with your prefered option. Once successfully logged in to sourcegraph , click on Settings option available under your profile menu on top right corner.

/img/azure/vscode/cody-settings-options.png

On the Settings page, click on Access Tokens option from left menu and select Generate New Token as shown below.

/img/azure/vscode/cody-generate-access-token-4.png

Follow the instructions and generate the new token. Once ready, copy the token from this page.

/img/azure/vscode/cody-copy-token-5.png

Go back to Code server window and click on Add the Access Token to VSCode option. Paste the token in the top bar and Hit Enter as shown in below screenshot.

/img/azure/vscode/cody-enter-access-token-6.png

Now you should see Cody welcome screen.

Note: If you don’t see the Welcome screen, please refresh the page.

/img/azure/vscode/cody-welcome-screen-7.png

Start using various features of Cody ranging from autocomplete, AI chat, Commands, Debug code etc, right from your Code Server Window .

/img/azure/vscode/cody-example-8.png

For more details on how to use Cody please visit Cody official Documentation

Go back