Set up Visual Studio Code on Alibaba Cloud

By Sajith Venkit.

Are you as much of a fan of Visual Studio Code (VSC), as I am, and are looking for a viable option to get access to your favourite IDE from just about anywhere, such as from your mobile phone? Well, this post was written to help you with just that. In this post, you'll learn how you can host VSC on an Alibaba Cloud Elastic Compute Service (ECS) instance along with Terraform, Cloud CLI, Packer, and Ansible.

Some Background Information

For a bit of context, Visual Studio Code is my favourite IDE, hands down. I love the option of having my favorite apps accessible over a browser or mobile app, and so I am happy to explore options for having VSC online.

Without looking too hard, I found the three options below to have VSC online but finally settled on the third one which met all my requirements. This post follows my search. It looks at how you can set up VSC on the cloud, sync your working files to OneDrive and give yourself on-demand access to your favourite IDE at anytime and from anywhere.

The Three options

The following are the three options I explored to have VSC Online.

1. Visual Studio Code Online by Microsoft

Microsoft has released a Public Preview of VSC Online. If you need just a VSC online without any customisations or additional tools and already have an Azure subscription, you could try this one. I did not select this for the following reasons:

It required a Microsoft Azure subscription.
I could not select the specific version of Linux I wanted.
I couldn't configure OneDrive client for it.
I couldn't gain access from Safari on my iPad.
It is an more expensive option than the other two options.

2. Code Server on Container

It was a great relief for me to find Code Server on GitHub. After doing some initial tests, I figured this is the one that will finally get my favourite IDE accessible from my iPad. I just had to decide if I should run Code server in a container or on a Linux server. Though I got it working on a Container and also wrote two functions to start and stop the Container on demand, I did not select this for the following reasons:

The files inside container will be lost on restart, and you need to mount a file share to get OneDrive sync working.
Performing GitHub actions on a mounted share was far too slow for me.

3. Code Server on Linux server

This option ticked all my boxes. With it, I can run Code Server on my favourite Linux version on any Cloud and also get all my favourite DevOps tools installed on this Linux server to be accessible from VSC. Setting up OneDrive client on Linux server was a breeze and as the Linux servers on AliCloud start in less than 2 minutes, I can start or stop VSC only when I need it, making this also the most cost-effective option.

Last, as all files are synced to OneDrive, I can also get access to the latest files on my Mac and seamlessly switch between either the Desktop App or the Online version

Procedure

In this post, to host VSC on an Alibaba Cloud, we will be following these steps:

Build the Linux server and install the basic tools, which include the Cloud CLIs and Terraform.
Set up the OneDrive Client on the Linux server.
Set up the Code server, including the domain and certificate.
Install the required extensions on Visual Studio Code.
Access your IDE whenever you want.

Step 1: Build linux server on AliCloud

Follow the steps in this GitHub repo to build the Linux server.

Step 2: Set up the OneDrive Client on the Linux Server

1. Set up a non-root user vsc-user to run OneDrive client and Code Server.

adduser --disabled-password --gecos "" vsc-user
cp -pr .ssh ~vsc-user
chown -R vsc-user:vsc-user ~vsc-user/.ssh
sudo usermod -aG sudo vsc-user
echo "vsc-user ALL=(ALL) NOPASSWD:ALL" | tee -a /etc/sudoers

2. Login as vsc-user, using this: ssh -i vsc-linux-alicloud vsc-user@ip-address-of-server

3. Install OneDrive client: sudo apt-get -y install onedrive

4. Configure the OneDrive client:

Create the OneDrive Sync and Config folders.
Config folder: mkdir -p ~/.config/onedrive
Sync folder: mkdir ~/onedrive
Create the OneDrive config file ~/.config/onedrive/config with the following contents:

# folder on Linux server that will sync with Onedrive
sync_dir = "/home/vsc-user/onedrive"
# to ensure .files are not skipped, require for syncing git folders
skip_dotfiles = "false"
# to skip the .DS_Store files in Mac, also can add any other files that must be skipped
skip_file = ".DS_Store"

Create the OneDrive Sync list ~/.config/onedrive/sync_list with the list of folders in OneDrive you want to sync:

# The specific folder that must be sync from OneDrive (path to start from Documents as in example below)
Documents/hands-on/1-Docs

Invoke the OneDrive client to log in and give authorization for the onedrive client to sync with your OneDrive. This is a one time task.
Execute onedrive.
Eopy the URL mentioned and access it from Google Chrome browser, and log in to Onedrive using your credentials.
Copy the resultant url from your Chrome browser at the prompt Enter the response uri:.

Note: Depending on the volume of Onedrive, it can take 15-30 mins to complete. Even if you are syncing only one folder, it will stil scan your entire OneDrive.

5. To ensure OneDrive is started on boot, execute the following command:

systemctl --user enable onedrive

Note: As the service is enabled with user startup, onedrive was not starting until user vsc-user logged in. To resolve this issue, following steps were done.

Log in as the user: vsc-user.
Update the service startup config file.

systemctl --user disable onedrive
mkdir -p ~/.config/systemd/user
cp /usr/lib/systemd/user/onedrive.service ~/.config/systemd/user

vi ~/.config/systemd/user/onedrive.service

Add the line After=user@1000.service under Unit as shown below.

[Unit]
Description=OneDrive Free Client
After=user@1000.service
Documentation=https://github.com/skilion/onedrive

Save the file and execute the following commands:

systemctl --user enable onedrive
systemctl --user start onedrive
sudo loginctl enable-linger vsc-user

6. Check the logs of Onedrive client: journalctl --user-unit onedrive -f

You should see a message stating Started OneDrive Free Client.

Step 3: Install Codercom Code Server (Visual Studio Code)

1. Create a separate folder and download the latest version of Code Server.

mkdir -p ~/vscode-server
cd ~/vscode-server
export version="2.1698"
export release="2.1698-vsc1.41.1"
wget https://github.com/cdr/code-server/releases/download/${version}/code-server${release}-linux-x86_64.tar.gz
tar -xvzf code-server${release}-linux-x86_64.tar.gz
ls code-server${release}-linux-x86_64

2. Generate a self-signed certificate to use with the code server.

Note: Use a self-signed certificate if you do not have your own domain and are relying on your server's FQDN to access Code Server. You will get privacy warning error, when accessing the URL if you are using self-signed certificate.

cd ~/vscode-server
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout vscode-selfsigned.key -out vscode-selfsigned.crt
sudo chown vsc-user:vsc-user vscode-selfsigned*

3. If you own a domain and would like to point that to the Linux server (such as https://dev.mydomain.com), you can create a certificate signed by Let's Encrypt using Certbot, instead of using a self-signed certificate.

Install certbot.

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update

sudo apt-get install certbot

Generate the certificate using Certbot.

Before executing the following command, log into your Domain provider and access the DNS settings.

sudo certbot certonly --server https://acme-v02.api.letsencrypt.org/directory --manual --preferred-challenges dns -d dev.mydomain.com

Copy the certificate and private key to ~/vscode-server.

sudo cp /etc/letsencrypt/live/dev.mydomain.com/cert.pem ~/vscode-server
sudo cp /etc/letsencrypt/live/dev.mydomain.com/privkey.pem ~/vscode-server
chown vsc-user:vsc-user ~/vscode-server/*.pem

4. Create a script to start the code server

Create the working dir for the code server.

mkdir ~/code-server2.1698

Edit ~/vscode-server/start-vscode-standalone-server.sh, and copy the following lines.

#!/bin/bash
export PASSWORD="test.1234567!"
/home/vsc-user/vscode-server/code-server2.1698-vsc1.41.1-linux-x86_64/code-server --auth password --user-data-dir /home/vsc-user/code-server2.1698 --cert /home/vsc-user/vscode-server/vscode-selfsigned.crt --cert-key /home/vsc-user/vscode-server/vscode-selfsigned.key

If you're using the certificate generated by certbot, use the following script.

#!/bin/bash
export PASSWORD="test.1234567!"
/home/vsc-user/vscode-server/code-server2.1698-vsc1.41.1-linux-x86_64/code-server --auth password --user-data-dir /home/vsc-user/code-server2.1698 --cert /home/vsc-user/vscode-server/cert.pem --cert-key /home/vsc-user/vscode-server/privkey.pem

Save the file, change permissions to allow execution.

chmod 755 ~/vscode-server/start-vscode-standalone-server.sh

5. Test access to Code Server/Visual Studio Code.

Start the Code Server by running: ~/vscode-server/start-vscode-standalone-server.sh.
Open a browser in your PC and access the FQDN of your server or the domain you configured: https://ip-address-of-server:8080.

Note: If it is self signed certificate, there will be a warning.

Create a service startup file to allow code server to be started on server start.

Press ctrl+c to stop the server, create the folder for logfiles: mkdir -p ~/vscode-server/log, and edit ~/.config/systemd/user/startCodeServer.service and insert the following lines:

[Unit]
Description=Visual Studio Code Server
After=network.target

[Service]
ExecStart=/home/vsc-user/vscode-server/start-vscode-standalone-server.sh

StandardOutput=file:/home/vsc-user/vscode-server/log/code-server-output.log
StandardError=file:/home/vsc-user/vscode-server/log/code-server-error.log

[Install]
WantedBy=default.target

Save the file and then execute the following commands to enable and start it up.

systemctl --user enable startCodeServer.service
systemctl --user start startCodeServer.service

Step 4: Install the Extensions for Visual Studio Code

It is best to install the required Extensions manually. The following are a few initial recommendations:

Terraform
Markdown All-in-One

To install an extension manually, follow the steps below:

1. Search for the required extension using a browser window, go to the relevant site and write down the following information:

the publisher, which is first part of unique identifier
the extension, which is second part of unique identifier
the version

For example, to install the Terraform extension manually, go to the URL and write down the following information:

publisher: mauve
extension: terraform
version: 1.4.0

2. Use above information to generate the URL using the following template URL

https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/publisher/extension/extension/version/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

Following this, for the terraform example above the URL would be (https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/mauve/extension/terraform/1.4.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage).

3. Download the extension to a specific folder in your Linux server.

mkdir -p ~/vscode-server/extensions
cd ~/vscode-server/extensions
PUBLISHER="mauve"
EXTENSION="terraform"
VERSION="1.4.0"
wget https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/${PUBLISHER}/extension/${EXTENSION}/${VERSION}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage -O ${PUBLISHER}.${EXTENSION}-${VERSION}.vsix

4. On Visual Studio Code, go to Extensions, click on the hamburger icon (...), select install from VSIX and select the downloaded file from the extensions folder: /home/vsc-user/vscode-server/extensions.

5. For the Terraform extension to work properly, perform the following additional steps.

Open settings.json by going to Settings and selecting edit in settings.json and add the following:

"terraform.languageServer": {
    "enabled": true,
    "args": []
    }
"terraform.indexing": {
    "enabled": false,
    "liveIndexing": false
    }

Click Shift+Cmd+P on your keyboard, and select Reload and Reload Window to reload Visual Studio Code
It will then install the Language server. At this step, select the verion to install.

Step 5: Access your IDE whenever you want

Now that you have set up VSC on Alibaba Cloud, it is quite easy to access your IDE whenever you want.

When you need access to VSC Online, start the VM on Alibaba Cloud. You should then be able to connect to it from any browser on your PC, Mac, or template using the FQDN URL that you have configured. When you access it, VM should start in less than 1 minute.

Once you have done the work, stop the VM on Alibaba Cloud. This will ensure the VM is stopped and also de-allocated, so that you are not charged for this VM anymore. The only costs that will incur will be for the storage associated with the storage disk allocated for this VM.

The views expressed herein are for reference only and don't necessarily represent the official views of Alibaba Cloud.

Community

Set up Visual Studio Code on Alibaba Cloud

Some Background Information

The Three options

Procedure

Step 1: Build linux server on AliCloud

Step 2: Set up the OneDrive Client on the Linux Server

Step 3: Install Codercom Code Server (Visual Studio Code)

Step 4: Install the Extensions for Visual Studio Code

Step 5: Access your IDE whenever you want

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

ECS(Elastic Compute Service)

Function Compute