Skip to content

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

Merged
jsjoeio merged 1 commit into
mainfrom
jsjoeio-ssh-vscode
Aug 27, 2021
Merged

jsjoeio merged 1 commit into
mainfrom
jsjoeio-ssh-vscode

Conversation

@jsjoeio

@jsjoeio jsjoeio commented Aug 25, 2021 •

Copy link
Copy Markdown
Contributor

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 jsjoeio self-assigned this Aug 25, 2021
@jsjoeio jsjoeio added the docs Documentation related label Aug 25, 2021
@jsjoeio

jsjoeio commented Aug 25, 2021

Copy link
Copy Markdown
Contributor Author

@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

github-actions Bot commented Aug 25, 2021 •

Copy link
Copy Markdown

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

@im-coder-lg

Copy link
Copy Markdown
Contributor

don't worry @jsjoeio, take your time.

@im-coder-lg im-coder-lg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

Pre-Build fail too(note)

@im-coder-lg

Copy link
Copy Markdown
Contributor

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

im-coder-lg commented Aug 26, 2021 •

Copy link
Copy Markdown
Contributor

@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
  1. 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
  1. 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. Now, make a new/login to your ngrok account from here
  1. 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"
  1. Now, go to dashboard.ngrok.com and go to the Your Authtoken section.
  2. Copy the Authtoken shown there.
  3. 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.
  1. 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

AyaanZaveri commented Aug 26, 2021 •

Copy link
Copy Markdown

Great work, much better than mine!!!

@AyaanZaveri

AyaanZaveri commented Aug 26, 2021 •

Copy link
Copy Markdown

SSH into code-server on Visual Studio Code

SSH Terminal 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
  1. 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

Cloudflared

  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
  1. Run cloudflared tunnel --url ssh://localhost:22 on the remote server

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

Ngrok

  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"
  1. Then, go to dashboard.ngrok.com and go to the Your Authtoken section.
  2. Copy the Authtoken shown there.
  3. 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.
  1. 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

Copy link
Copy Markdown

Just a few changes.

@jsjoeio

jsjoeio commented Aug 26, 2021

Copy link
Copy Markdown
Contributor Author

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!

@jsjoeio
jsjoeio force-pushed the jsjoeio-ssh-vscode branch 2 times, most recently from 6f42a24 to 0906b91 Compare August 26, 2021 23:34
@jsjoeio
jsjoeio marked this pull request as ready for review August 26, 2021 23:34
@jsjoeio
jsjoeio requested a review from a team as a code owner August 26, 2021 23:34
@codecov

codecov Bot commented Aug 26, 2021 •

Copy link
Copy Markdown

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
Impacted file tree graph

@@           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 bpmct left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So pumped to see this, thanks for documenting this

Comment thread docs/guide.md Resolved
Comment thread docs/guide.md Resolved
Comment thread docs/guide.md Resolved
Comment thread docs/guide.md Resolved
Comment thread docs/guide.md Resolved
@im-coder-lg

Copy link
Copy Markdown
Contributor

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

@im-coder-lg

Copy link
Copy Markdown
Contributor

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 im-coder-lg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread docs/guide.md Resolved
@im-coder-lg

Copy link
Copy Markdown
Contributor

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

@jsjoeio
jsjoeio force-pushed the jsjoeio-ssh-vscode branch from 1d1a22f to efbfe06 Compare August 27, 2021 18:16
@jsjoeio
jsjoeio requested a review from bpmct August 27, 2021 18:21
@jsjoeio

jsjoeio commented Aug 27, 2021

Copy link
Copy Markdown
Contributor Author

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

@AyaanZaveri

Copy link
Copy Markdown

It looks great to me!

@jsjoeio

jsjoeio commented Aug 27, 2021

Copy link
Copy Markdown
Contributor Author

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

@jsjoeio
jsjoeio merged commit 4798841 into main Aug 27, 2021
@jsjoeio
jsjoeio deleted the jsjoeio-ssh-vscode branch August 27, 2021 19:26
@jawnsy

jawnsy commented Aug 28, 2021

Copy link
Copy Markdown

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
BrunoQuaresma restored the jsjoeio-ssh-vscode branch August 31, 2021 13:08
@BrunoQuaresma

Copy link
Copy Markdown

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

@BrunoQuaresma

Copy link
Copy Markdown

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

Screen Shot 2021-08-31 at 11 32 25

cc.: @jsjoeio @jawnsy

@im-coder-lg

Copy link
Copy Markdown
Contributor

So, is it problems with the SVGs?

@im-coder-lg

Copy link
Copy Markdown
Contributor

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

@bpmct

bpmct commented Aug 31, 2021

Copy link
Copy Markdown
Member

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

jsjoeio commented Aug 31, 2021 •

Copy link
Copy Markdown
Contributor Author

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

Copy link
Copy Markdown
Contributor

Okay @bpmct

@im-coder-lg

Copy link
Copy Markdown
Contributor

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

jsjoeio commented Sep 1, 2021

Copy link
Copy Markdown
Contributor Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Documentation related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Document SSH'ing into code-server/Railway instance

6 participants