PRODUCTS AND SUPPORT


How to get VSCode Cloud IDE on Azure


Previous Table of contents Next


This section describes how to launch and connect to VSCode Cloud IDE on AZURE.

  1. Open Visual Studio Code in Browser VM listing on Azure Marketplace

    2. /img/azure/vscode/marketplace.png

  2. Click on Get It Now
    • Select a Resource group for your virtual machine
    • Select a Region where you want to launch the VM(such as East US)

      • /img/azure/vscode/basics-page-01.png


    • Optionally change the number of cores and amount of memory.
    • Select Authentication type as Password and enter Username as ubuntu and Password of your choice for the VM
      • /img/azure/vscode/basics-page-02.png

    • Optionally change the OS disk type.

      • /img/azure/vscode/disk.png


    • Optionally change the network and subnetwork names.Be sure that whichever network you specify have ports 22 (for SSH), 3389 (for RDP) and 443 (for HTTPS) exposed.

      • /img/azure/vscode/network.png


    • Optionally go to the Management, Advanced and Tags tabs for any advance settings you want for the VM.
    • Note: If you want to access VSCode with user provided password , add following Name and Value in tags tab. This will be login password for accessing VS code in browser

      • Name: vscode-password
      Value: your password here

    • Note: If you don’t set the metadata with the above mentioned keys, a default random password will be generated. The password is stored in the file /home/ubuntu/vscode_pass.txt for your reference

      • /img/azure/vscode/tags-tab.png


    • Click on Review + create and then click on Create when you are done.
      Virtual Machine will begin deploying.

  1. A summary page displays when the virtual machine is successfully created. Click on the Go to resource link to to go to the resource page. It will open an overview page of virtual machine.

    2. /img/azure/vscode/vm-overview.png


  2. In the left navigation pane, select Run command , select RunShellScript and enter following command to change the password of the vm .
    3. sudo echo ubuntu:yourpassword | chpasswd


    /img/azure/run_command_option-01.png

    /img/azure/run_command_change_passwd-01.png

  3. To SSH the VM, use the IP address or DNS address in the putty.
    4. /img/azure/vscode/putty.png

  4. Provide the password for ubuntu user, you created in above "Reset Password" step.
    5. /img/azure/vscode/ssh.png

  5. To connect using RDP via Windows Machine, first note the public IP address of the VM from VM details page as highlighted below

    6. /img/azure/vscode/public-ip.png

  6. Then From you 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

    7. /img/azure/vscode/rdp.png

  7. 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

    8. /img/azure/vscode/rdp-login.png

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

    9. /img/azure/vscode/rdp-desktop.png

  9. 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, first Install Remmina as per your linux distribution.

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

    11. /img/gcp/common/remmina-external-ip.png
  11. This will connect you to the VM's desktop environment via Linux Machine. Provide "ubuntu" as the userid and the password set in above "Reset Password" step to authenticate. Click OK

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

    13. /img/azure/vscode/rdp-desktop.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. You will see certificate warning, accept the warning to proceed for login

    2. /img/azure/vscode/certificate-warning.png


    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/azure/vscode/vscode-web-login.png


  2. Provide the same password you set in tags tab during vm creation.If you have not provided password, you can find the randomly generated password by running below command in Terminal-
    3. 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/azure/vscode/vscode-web-interface-passwd-file.png


  3. Now you are connected to VSCode in browser.

    4. /img/azure/vscode/vscode-in-browser.png


  4. If you prefer , after login, you can remove the password references from VM by deleting the password file (/home/ubuntu/vscode_pass.txt) and removing the metadata as below:


    5. /img/azure/vscode/tags-on-vm-overview.png


    /img/azure/vscode/edit-tags.png


  5. 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.
    6. Below are the steps for reserving public IP and making it static:

    • First way, You can assign the static ip while creating the VM. On Networking tab , in Public IP option select Create New and then select static under assignment and click OK as shown below.

      • /img/azure/vscode/static-ip-while-creating-vm.png


    • Second way, You can update the Public IP once the VM is up and running. On the VM overview page, select configure under DNS Name and change the assignment option from dynamic to static. Save your changes.

      • /img/azure/vscode/vm-overview-static-ip.png

       /img/azure/vscode/configure-dns-static-ip-option.png


    Previous Table of contents Next