docs(guide): add ssh into code-server on vs code

[jsjoeio]

This PR adds steps to guide.md for ssh'ing into code-server using Cloudeflare's Argo Tunnels.

Inspired by #3961

Thanks to @AyaanZaveri @im-coder-lg for figuring this out and sharing!

Fixes #4017

[jsjoeio]

@AyaanZaveri @im-coder-lg this is a WIP (I'm a little stuck cloudflare/cloudflared#443).

Would love your feedback/input on this PR if you have time 🙏

[github-actions]

✨ Coder.com for PR #4042 deployed! It will be updated on every commit.

• Host: https://codercom-3wh44o0ul-codercom.vercel.app/docs/code-server
• Last deploy status: success
• Commit: efbfe06
• Workflow status: https://github.com/cdr/code-server/actions/runs/1175222696

[im-coder-lg]

don't worry @jsjoeio, take your time.

[im-coder-lg]

You know, you can also put the ngrok guide here. If you need help in that, I am ready to do so.

The reason I am asking for ngrok is because if some people don't want CloudFlare, they could always try ngrok(it has GitHub login). However, you can tunnel only one port per account on the Free plan.

[im-coder-lg]

Left some suggestions and this is really good. Typo alerts, improvements also in review comments. If you need help, you can tell here, and I will help you on this!

[im-coder-lg]

Pre-Build fail too(note)

[im-coder-lg]

hey @jsjoeio I noticed that your branch is 2 commits behind main so I am adding the ngrok part by myself, you can check that and also it will have the latest 2 commits from the main branch. Is that ok?

[im-coder-lg]

@jsjoeio The updated SSHing to VSCode guide:

SSH into code-server on VS Code

One way you can do this is using Cloudflare's Argo Tunnels.

Follow these steps on the machine where code-server is running:

1. Install cloudflared
2. Run cloudflared tunnel --url ssh://localhost:22
3. Go to ~/.ssh/config and add the following:

Host *.trycloudflare.com
	HostName %h
	User root
	Port 22
	ProxyCommand "cloudflared location" access ssh --hostname %h

4. From inside VS Code, run ssh coder@https://your-link.trycloudflare.com or ssh coder@your-link.trycloudflare.com

Another way to do this is by using ngrok, another port tunneler.
Follow these steps on the machine where code-server is running:

1. Get OpenSSH-Server, wget, and unzip before getting ngrok. Don't forget to run sudo apt update so that you get the latest versions.

sudo apt update
sudo apt install wget unzip openssh-server

2. Start OpenSSH-Server and set the password of your computer. Eg. If you use a Railway deployment, the user is coder and so, the command to change the password would be sudo passwd coder.

sudo service ssh start
sudo passwd {user} # replace user with your code-server user

3. Now, make a new/login to your ngrok account from here

4. Now, get the ngrok binary from wget and unzip it with unzip:

wget "https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip"
unzip "ngrok-stable-linux-amd64.zip"

5. Now, go to dashboard.ngrok.com and go to the Your Authtoken section.
6. Copy the Authtoken shown there.
7. Now, go to the folder where you unzipped ngrok and store the Authtoken from the ngrok Dashboard.

./ngrok authtoken YOUR_AUTHTOKEN # replace YOUR_AUTHTOKEN with the ngrok authtoken.

8. Now, forward port 22, which is the SSH port with this command:

./ngrok tcp 22

Now, you get a screen in the terminal like this:

ngrok by @inconshreveable(Ctrl+C to quit)

Session Status online
Account {Your name} (Plan: Free)
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding tcp://0.tcp.ngrok.io:19028 -> localhost:22

Copy the link that is given like `0.tcp.ngrok.io` and remeber the port number. Type this in your local VS Code:

```bash
ssh user@0.tcp.ngrok.io -p 19028

The port redirects you to the SSH port(22) and you can successfully connect to code-server by entering the password you set for the user.

Is this fine? I fixed the typo too. Should I open a PR to merge these changes to this branch?
Original file location:
https://github.com/im-coder-lg/code-server-1/blob/im-coder-lg-ssh-vscode-ngrok-guide/docs/guide.md#ssh-into-code-server-on-vs-code

[AyaanZaveri]

Great work, much better than mine!!!

[AyaanZaveri]

SSH into code-server on Visual Studio Code

Follow these steps where code-server is running:

1. Get OpenSSH-Server, wget, and unzip before getting ngrok. Also, run sudo apt update to update your packages.

sudo apt update
sudo apt install wget unzip openssh-server

2. Start OpenSSH-Server and set the password of your computer. Eg. If you use a Railway deployment, the user is coder and so, the command to change the password would be sudo passwd coder.

sudo service ssh start
sudo passwd "user" # replace user with your code-server user

1. Install cloudflared on your local computer
2. Then go to ~/.ssh/config and add the following:

Host *.trycloudflare.com
	HostName %h
	User root
	Port 22
	ProxyCommand "cloudflared location" access ssh --hostname %h

3. Run cloudflared tunnel --url ssh://localhost:22 on the remote server

4. Finally on Visual Studio Code, run ssh coder@https://your-link.trycloudflare.com or ssh coder@your-link.trycloudflare.com

1. Make a new account for ngrok here

2. Now, get the ngrok binary with wget and unzip it with unzip:

wget "https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip"
unzip "ngrok-stable-linux-amd64.zip"

5. Then, go to dashboard.ngrok.com and go to the Your Authtoken section.
6. Copy the Authtoken shown there.
7. Now, go to the folder where you unzipped ngrok and store the Authtoken from the ngrok Dashboard.

./ngrok authtoken YOUR_AUTHTOKEN # replace YOUR_AUTHTOKEN with the ngrok authtoken.

8. Now, forward port 22, which is the SSH port with this command:

./ngrok tcp 22

Now, you get a screen in the terminal like this:

ngrok by @inconshreveable(Ctrl+C to quit)
                                    
Session Status                online
Account                       {Your name} (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040                             
Forwarding                    tcp://0.tcp.ngrok.io:19028 -> localhost:22

Copy the forwarded link 0.tcp.ngrok.io and remember the port number 19028. Type this on your local Visual Studio Code:

ssh user@0.tcp.ngrok.io -p 19028

The port redirects you to the default SSH port 22, and you can then successfully connect to code-server by entering the password you set for the user.

[AyaanZaveri]

Just a few changes.

[jsjoeio]

WOOOOW! I'm blown away y'all. This async team work is what makes open source the best! ♥️

I'm going to update my PR with y'all's changes then we can get this merged in. @bpmct might have to collaborate and make a youtube video on this. I think a lot of people could benefit!

Thanks again!! You two rock!

[codecov]

Codecov Report

Merging #4042 (12a63cc) into main (b5afb05) will not change coverage.
The diff coverage is n/a.

❗ Current head 12a63cc differs from pull request most recent head efbfe06. Consider uploading reports for the commit efbfe06 to get more accurate results

@@           Coverage Diff           @@
##             main    #4042   +/-   ##
=======================================
  Coverage   63.51%   63.51%           
=======================================
  Files          36       36           
  Lines        1872     1872           
  Branches      379      379           
=======================================
  Hits         1189     1189           
  Misses        580      580           
  Partials      103      103           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b5afb05...efbfe06. Read the comment docs.

[bpmct]

So pumped to see this, thanks for documenting this

[im-coder-lg]

Anytime, and this is really cool. Lookin' forward to seeing this on Coder.com

[im-coder-lg]

Yup, @bpmct showed some very good changes. If a user is using Fedora or any RPM Linux distro, they can install in their way too.

[im-coder-lg]

This is good, just making the changes suggested by @bpmct might be more useful to remove confusion.

[im-coder-lg]

Added some suggestions and triggered a review by mistake, mainly changes are in the ngrok section.

[jsjoeio]

@bpmct can you take another look at this? I made your requested changes 😄 Thanks man!

[AyaanZaveri]

It looks great to me!

[jsjoeio]

Alright, let's merge it! Thanks for the review @AyaanZaveri 🙌

[jawnsy]

Hey everyone, just a heads-up, we had to revert this change temporarily (see #4060) because it broke our docs site, but we'll get it fixed up and merged again soon!

[BrunoQuaresma]

Folks, I'm restoring this branch for tests purposes.

[BrunoQuaresma]

I fixed the check step and now, it is failing as expected.

cc.: @jsjoeio @jawnsy

[im-coder-lg]

So, is it problems with the SVGs?

[im-coder-lg]

PS: I was one of the people who helped and am looking forward to see this on Coder.com

[bpmct]

PS: I was one of the people who helped and am looking forward to see this on Coder.com

@im-coder-lg can you send me an email ben at coder dot com with your mailing address? Would love to send you some swag for your contributions

[jsjoeio]

i fixed the check step and now, it is failing as expected

Awesome!!!! You should share this on the #code-server channel in Slack 🎉 Thanks for double-checking it works!

[im-coder-lg]

Okay @bpmct

[im-coder-lg]

i fixed the check step and now, it is failing as expected

Awesome!!!! You should share this on the #code-server channel in Slack 🎉 Thanks for double-checking it works!

Oh yeah, the preview works now. Does that mean that something like the SVG images accidentally corrupted the deployment?

[jsjoeio]

Oh yeah, the preview works now. Does that mean that something like the SVG images accidentally corrupted the deployment?

Hmm...I don't think so. I think it was a couple places having ```` backticks instead of three and then a couple typos in code blocks. But it's all fixed now!