Skip to content

Commit a247d98

Browse files
alexellisalexellis
committed
Inlets Pro updates for webpage
Signed-off-by: Alex Ellis (OpenFaaS Ltd) <alexellis2@gmail.com>
1 parent bb1d443 commit a247d98

File tree

15 files changed

+608
-199
lines changed

15 files changed

+608
-199
lines changed

‎_includes/cli.html‎

Lines changed: 144 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,156 @@
1-
<div id="features" class="py-8 overflow-hidden">
2-
<div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl" >
3-
<svg class="hidden lg:block absolute left-full transform -translate-x-1/2 -translate-y-1/4" width="404" height="784" fill="none" viewBox="0 0 404 784">
4-
<defs>
5-
<pattern id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
6-
<rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
7-
</pattern>
8-
</defs>
9-
<rect width="404" height="784" fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" />
10-
</svg>
11-
1+
<div id="examples" class="py-12 bg-gray-50 overflow-hidden">
2+
<div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl">
123
<div class="relative">
134
<h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
14-
Expose multiple ports from a private network
5+
How it works
156
</h3>
16-
<p>
17-
<img class="relative mx-auto" width="800" src="/images/tcp-cli.png" alt="A TCP tunnel exposing multiple ports">
18-
</p>
19-
<p class="mb-6 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
20-
In TCP mode, traffic received on the server is sent directly to the client.
7+
<p class="mt-4 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
8+
Explore common setups for Uplink, HTTPS, TCP and Kubernetes.
219
</p>
2210
</div>
2311

24-
<div class="relative">
25-
<h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
26-
Self-host any HTTP endpoint with a HTTPS certificate
27-
</h3>
28-
<p>
29-
<img class="relative mx-auto" width="800" src="/images/https-cli.png" alt="CLI example with a HTTPS cert from Let's Encrypt">
30-
</p>
31-
<p class="mb-6 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
32-
Built-in Let's Encrypt makes it really easy to get users to access your private service.
33-
</p>
34-
</div>
12+
<div class="mt-8 rounded-3xl border border-gray-800 bg-gray-900 shadow-2xl p-3 sm:p-4">
13+
<div class="flex flex-wrap justify-center gap-3" data-cli-tabs>
14+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-indigo-500 bg-indigo-500 text-white text-sm font-medium" data-cli-tab="uplink">Uplink</button>
15+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="https">HTTPS</button>
16+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="tcp">TCP</button>
17+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="kubernetes">Kubernetes</button>
18+
</div>
3519

36-
<div class="relative">
37-
<h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
38-
Local Kubernetes, but with public IPs
39-
</h3>
40-
<p>
41-
<img class="relative mx-auto" width="800" src="/images/k8s-cli.png" alt="CLI example showing Kubernetes integration">
42-
</p>
20+
<div class="mt-4">
21+
<section class="cli-panel rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="uplink">
22+
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
23+
<div class="flex items-center gap-2">
24+
<span class="h-3 w-3 rounded-full bg-red-400"></span>
25+
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
26+
<span class="h-3 w-3 rounded-full bg-green-400"></span>
27+
</div>
28+
<div class="text-xs font-mono text-gray-400">uplink.example.com</div>
29+
</div>
30+
<div class="px-6 py-5 border-b border-gray-800">
31+
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
32+
<div>
33+
<h4 class="text-2xl font-extrabold text-white">Connect a customer environment to your SaaS</h4>
34+
<p class="mt-2 text-base leading-7 text-gray-300">Create a tenant-scoped tunnel, hand the customer a command, then consume the service privately from inside your cluster.</p>
35+
</div>
36+
<a href="https://docs.inlets.dev/uplink/become-a-provider/" class="text-sm font-medium text-indigo-300 hover:text-white">Read the Uplink docs →</a>
37+
</div>
38+
</div>
39+
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code># tunnel resource
40+
apiVersion: uplink.inlets.dev/v1alpha1
41+
kind: Tunnel
42+
metadata:
43+
name: acmeco
44+
namespace: tunnels
45+
spec:
46+
tcpPorts:
47+
- 8080
4348

44-
<p class="mb-6 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
45-
The <a class="text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out underline" href="https://github.com/inlets/inlets-operator/">inlets-operator for Kubernetes</a> makes it look and feel like you're using a cloud Kubernetes cluster.
46-
</p>
47-
</div>
49+
# customer connects to the router
50+
inlets-pro uplink client \
51+
--url wss://uplink.example.com/tunnels/acmeco \
52+
--upstream http://127.0.0.1:8080 \
53+
--token-file ./token.txt
4854

49-
<div class="relative">
50-
<h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
51-
Add a new customer to your SaaS
52-
</h3>
53-
<p>
54-
<img class="relative mx-auto" width="800" src="/images/uplink-cli.png" alt="CLI commands to add a new customer tunnel with inlets uplnk">
55-
</p>
56-
<p class="mb-6 max-w-3xl mx-auto text-center text-xl leading-7 text-gray-500">
57-
Connect customer devices and services to your SaaS, the easy way with <a class="text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out underline" href="https://docs.inlets.dev/uplink/become-a-provider/">inlets uplink</a>
58-
</p>
59-
</div>
55+
# private access from inside the cluster
56+
curl -i http://acmeco.tunnels:8000</code></pre>
57+
</section>
6058

61-
</div>
62-
</div>
59+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="https">
60+
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
61+
<div class="flex items-center gap-2">
62+
<span class="h-3 w-3 rounded-full bg-red-400"></span>
63+
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
64+
<span class="h-3 w-3 rounded-full bg-green-400"></span>
65+
</div>
66+
<div class="text-xs font-mono text-gray-400">api.example.com</div>
67+
</div>
68+
<div class="px-6 py-5 border-b border-gray-800">
69+
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
70+
<div>
71+
<h4 class="text-2xl font-extrabold text-white">Self-host HTTPS for a local app</h4>
72+
<p class="mt-2 text-base leading-7 text-gray-300">Provision a public tunnel server with inletsctl, then connect your local HTTP service using your own domain.</p>
73+
</div>
74+
<a href="https://docs.inlets.dev/tutorial/automated-http-server/" class="text-sm font-medium text-indigo-300 hover:text-white">HTTP tunnel guide →</a>
75+
</div>
76+
</div>
77+
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code>$ inletsctl create \
78+
--provider digitalocean \
79+
--region lon1 \
80+
--access-token-file ~/digital-ocean-api-key.txt \
81+
--letsencrypt-domain api.example.com
82+
83+
$ inlets-pro http client \
84+
--url wss://178.62.70.130:8123 \
85+
--token-file ./token.txt \
86+
--upstream "api.example.com=http://127.0.0.1:3000"
87+
88+
$ curl "https://api.example.com/v1/import"</code></pre>
89+
</section>
6390

91+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="tcp">
92+
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
93+
<div class="flex items-center gap-2">
94+
<span class="h-3 w-3 rounded-full bg-red-400"></span>
95+
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
96+
<span class="h-3 w-3 rounded-full bg-green-400"></span>
97+
</div>
98+
<div class="text-xs font-mono text-gray-400">178.62.70.130</div>
99+
</div>
100+
<div class="px-6 py-5 border-b border-gray-800">
101+
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
102+
<div>
103+
<h4 class="text-2xl font-extrabold text-white">Expose multiple TCP ports without SaaS tunnel limits</h4>
104+
<p class="mt-2 text-base leading-7 text-gray-300">Provision a TCP tunnel VM with inletsctl, then connect local services such as webhooks or SSH over the same tunnel.</p>
105+
</div>
106+
<a href="https://inlets.dev/blog/2023/05/04/expose-local-tcp-ports.html" class="text-sm font-medium text-indigo-300 hover:text-white">TCP use-case →</a>
107+
</div>
108+
</div>
109+
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code>$ inletsctl create \
110+
--provider digitalocean \
111+
--region lon1 \
112+
--access-token-file ~/digital-ocean-api-key.txt \
113+
--tcp
64114

115+
$ inlets-pro tcp client --url wss://178.62.70.130:8123 \
116+
--token-file ./token.txt \
117+
--upstream "192.168.0.35" \
118+
--ports "8080,2222"
119+
120+
$ curl "http://178.62.70.130:8080/function/webhook"
121+
$ ssh -p 2222 "pi@178.62.70.130"</code></pre>
122+
</section>
123+
124+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="kubernetes">
125+
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
126+
<div class="flex items-center gap-2">
127+
<span class="h-3 w-3 rounded-full bg-red-400"></span>
128+
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
129+
<span class="h-3 w-3 rounded-full bg-green-400"></span>
130+
</div>
131+
<div class="text-xs font-mono text-gray-400">kubernetes / loadbalancer</div>
132+
</div>
133+
<div class="px-6 py-5 border-b border-gray-800">
134+
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
135+
<div>
136+
<h4 class="text-2xl font-extrabold text-white">Expose a local Kubernetes service</h4>
137+
<p class="mt-2 text-base leading-7 text-gray-300">Install the inlets-operator Helm chart, then create a LoadBalancer service and wait for a public IP.</p>
138+
</div>
139+
<a href="https://github.com/inlets/inlets-operator/" class="text-sm font-medium text-indigo-300 hover:text-white">inlets-operator →</a>
140+
</div>
141+
</div>
142+
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code># Install the inlets-operator Helm chart, then:
143+
$ kubectl run nginx-1 --image=nginx --port=80 --restart=Always
144+
$ kubectl expose pod/nginx-1 --port=80 --type=LoadBalancer
145+
146+
$ kubectl get services -w
147+
NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
148+
service/nginx-1 LoadBalancer 192.168.226.216 <pending> 80/TCP 78s
149+
service/nginx-1 LoadBalancer 192.168.226.216 104.248.163.242 80/TCP 78s
150+
151+
$ curl -s "http://104.248.163.242:80/"</code></pre>
152+
</section>
153+
</div>
154+
</div>
155+
</div>
156+
</div>

‎_includes/cloud/cloud-tour.html‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,4 @@ <h3 class="text-center text-2xl leading-8 font-bold tracking-tight text-gray-900
4949
</p>
5050
</div>
5151

52-
<div class="relative mb-3">
53-
<h3 class="text-center mb-2 text-2xl leading-8 font-bold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
54-
Connect to any device with SSH
55-
</h3>
56-
<img class="relative mx-auto" width="800" src="http://img.youtube.com/vi/ws3-VlL2884/maxresdefault.jpg" alt="Video demo of SSH tunnels">
57-
<p class="my-6 max-w-3xl mx-auto text-center text-l leading-7 text-gray-500">
58-
There's no need to install a VPN, and each host gets its own custom sub-domain. IP allow lists combined with key-based logins keep your devices secure. <a class="underline inlets-blue-900" href="https://www.youtube.com/watch?v=ws3-VlL2884">Demo of SSH with inlets-cloud</a>
59-
</p>
60-
</div>
61-
62-
63-
</div>
52+
</div>

0 commit comments

Comments
 (0)