如何使用 Cloudflare Tunnel 建立网页版的 SSH 终端机

  1. 教学
    1. 建立 Cloudflare Tunnel
    2. 建立 Cloudflare Appliacations
    3. 试用网页版 SSH 终端机

Test-ipv6.com

https://test-ipv6.com/index.html.zh_TW

be953212798031f14df1e.png

无 IPv4 网路

02.webp

有 IPv6 网路

虽说懒懒目前使用 Cloudflare WARP 来解决没有 IPv6
地址的问题,但总想著是否有更轻鬆的方法可以隨时使用
SSH,经过一番爬文后发现可以使用 Cloudflare Tunnel 配合 Cloudflare Zero
Trust 设定规则及应用程式,可以使用 IPv4 网路访问自订的 Tunnel
即可使用网页版的 SSH 终端机

eb8d2ffab820896f8d585.png

网页版的 SSH 终端机 Preview

教学#

事前准备

  1. Cloudflare 免费版帐户
  2. 顶级域名 1 个 (可以使用懒懒介绍的 eu.org 域名)
  3. 你的机器 (树莓派. VPS. 软路由. etc..)

建立 Cloudflare Tunnel#

官方网站

Cloudflare

https://www.cloudflare.com/zh-tw/

  1. 首先登入你的 Cloudflare 帐户,选择左侧的「Zero Trust」进入
    Cloudflare Zero Trust 控制面板。

caf674fbd05f0e278c072.png

  1. 选择左侧的「Acess」下拉进入「Tunnel」控制面板。

74c913a38cfed811605cf.png

关於首次使用

首次使用需先建立 Team domain
名称並设定帐单资讯。(欲再次修改名称可以在 Settings→General 里更改)

懒懒使用 PayPal 绑定,因为是使用免费版所以不会被收取费用喔!!

  1. 选择蓝色的「Create a tunnel」

fd2c6ea1958b25dc297b1.png

  1. 输入自订的「tunnel name」名称,懒懒以
    WSL「My_Ubuntu22.04_WSL_TW_01」当作范例,接著点击「Save
    tunnel」下一步

62a593e0129a7d07c454d.png

懒懒使用的是 Ubuntu22.04 系统 (Windows Subsystem for
Linux),故环境选择 Debian 64bit,Cloudflare
很贴心的为你提供安装指令,复製贴上安装即可!!

08.webp

09.webp

Docker 安装说明

使用其他系统的用户,可以选择使用 Docker 安装,Docker
网路的部分懒懒使用本地主机的网路,故使用下列指令加入host网路
(此部分供参考,请依自己的网路状况做设定)。

docker run -d --name cloudflared --restart always --net=host cloudflare/cloudflared:latest tunnel run --token **your_token**

复製

  1. 如果连结成功,下方「Connectors」区域会即时显示你的 Connector
    ID、Data centers、Origin IP 等资讯,点击下一步即可

10.webp

  1. 接著来建立 Public hostname

建立 Public hostname

  • 「Subdomain」填入自订域名前缀 如范例图中的mywebssh.OOOO.eu.org
  • 「Domain」选择你的域名 OOOO.eu.org
  • 「Path」留白即可
  • 「Type」协议选择「SSH
  • 「URL」填入「localhost:22
# 「22」为你自订的SSH通讯埠,可以输入下列命令查看SSH设定
$ sudo nano /etc/ssh/sshd_config

复製

# 以下为/etc/ssh/sshd_configsshd_config文件

Include /etc/ssh/sshd_config.d/*.conf

Port 22 #你的SSH port
#AddressFamily any
#ListenAddress 0.0.0.0
#ListenAddress ::

复製

  1. 最后选择「Save tunnel」储存 tunnel 设定

11.webp

  1. 建立好就可以在主页面看到你的 Tunnels 囉!

12.webp

建立 Cloudflare Appliacations#

  1. 回到 Cloudflare Zero Trust 控制面板进入「Appliacations」,接著「Add
    an appliacations」建立一个新的应用

522e85a7bfc8f2f0c9670.png

  1. 选择「Self-hosted」子分类

6237b2c523fd785140ac2.png

  1. 接著来建立 Appliacations 设定

建立 Appliacations 设定

  • 「Application name」填入 Appliacations
    名称,简单易辨识即可如:mywebssh
  • 「Session Duration」预设为 24 小时,可自订 Session
    的时间长度
  • 「Subdomain」填入自订域名前缀 如范例图中的mywebssh.OOOO.eu.org(同
    Tunnel 域名前缀)
  • 「Domain」选择你的域名OOOO.eu.org
  • 「Path」留白即可

edac02c8e4a073bb92490.png

  1. 下方「Identity providers」,使用预设的「One-time PIN」即可,点击
    Next 继续

One-time PIN

One-time PIN 为一次性验证码

66068db0b0786f74c56da.png

  1. 懒懒使用认证信箱的方式来认证使用者,如范例图中指定「test@gmail.com」为接收「One-time
    PIN」的信箱,点 Next 继续。

验证方式说明

当有使用者访问mywebssh.OOOO.eu.org时,Cloudflare
会向「[email protected]」寄出一次性验证码,使用者必须至信箱接收並填入验证码后,才能访问网站

a250b83cd5ec7d1640f2a.png

  1. 下方「Browser rendering」选择 SSH,点击 Add applications
    完成拉!

aacbc2ee977ff700e1122.png

试用网页版 SSH 终端机#

访问你设定的域名
(范例为:mywebssh.OOOO.eu.org),填入你的认证信箱
(范例为:[email protected])

然后去信箱接收验证码,填入验证码即可进去网页版 SSH 终端机

f72331c1d10a2ced09805.png

1adc748f635366618c5c9.png

  1. 网页版 SSH 终端机展示

013379545ad554b096b6a.png

22.webp


欢迎指出任何有错误或不够清晰的表达,可以在下面评论区评论。

×

喜欢就点赞,疼爱就打赏

//