Skip to content

Commit 75fdaff

Browse files
nemanjamnemanjam
committed
add 16/9 draw.io image
1 parent 26eddb4 commit 75fdaff

File tree

7 files changed

+144
-2
lines changed

7 files changed

+144
-2
lines changed

‎src/content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture-16-9.png

67.1 KB
Loading

‎src/content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture.png

-1.15 MB
Binary file not shown.

‎src/content/post/2025/04-20-ssh-tunnel-docker/_resources/ssh-tunnel-architecture-16-9.drawio.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/content/post/2025/04-20-ssh-tunnel-docker/_resources/ssh-tunnel-architecture-16-9.webp

27.7 KB
Binary file not shown.

‎src/content/post/2025/04-20-ssh-tunnel-docker/_resources/ssh-tunnel-architecture.drawio

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0" version="25.0.3">
2+
<diagram name="Page-1" id="5f0bae14-7c28-e335-631c-24af17079c00">
3+
<mxGraphModel grid="1" page="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" pageScale="1" pageWidth="1600" pageHeight="900" background="none" math="0" shadow="0">
4+
<root>
5+
<mxCell id="0" />
6+
<mxCell id="1" parent="0" />
7+
<mxCell id="39150e848f15840c-1" value="&lt;div&gt;local machine&lt;/div&gt;" style="verticalAlign=top;align=left;spacingTop=8;spacingLeft=2;spacingRight=12;shape=cube;size=10;direction=south;fontStyle=4;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Verdana;fontSize=12" vertex="1" parent="1">
8+
<mxGeometry x="82" y="70" width="230" height="310" as="geometry" />
9+
</mxCell>
10+
<mxCell id="39150e848f15840c-2" value="VPS gateway" style="verticalAlign=top;align=left;spacingTop=8;spacingLeft=2;spacingRight=12;shape=cube;size=10;direction=south;fontStyle=4;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Verdana;fontSize=12" vertex="1" parent="1">
11+
<mxGeometry x="562" y="70" width="360" height="360" as="geometry" />
12+
</mxCell>
13+
<mxCell id="A6lBMLfXj6pK5urAHSdI-2" value="localhost:3000&lt;div&gt;&lt;b&gt;frontend&lt;/b&gt;&lt;/div&gt;" style="html=1;dropTarget=0;whiteSpace=wrap;" vertex="1" parent="1">
14+
<mxGeometry x="102" y="130" width="170" height="60" as="geometry" />
15+
</mxCell>
16+
<mxCell id="A6lBMLfXj6pK5urAHSdI-3" value="" style="shape=module;jettyWidth=8;jettyHeight=4;" vertex="1" parent="A6lBMLfXj6pK5urAHSdI-2">
17+
<mxGeometry x="1" width="20" height="20" relative="1" as="geometry">
18+
<mxPoint x="-27" y="7" as="offset" />
19+
</mxGeometry>
20+
</mxCell>
21+
<mxCell id="A6lBMLfXj6pK5urAHSdI-4" value="localhost:5000/api&lt;div&gt;&lt;b&gt;backend1&lt;/b&gt;&lt;/div&gt;" style="html=1;dropTarget=0;whiteSpace=wrap;" vertex="1" parent="1">
22+
<mxGeometry x="102" y="210" width="170" height="60" as="geometry" />
23+
</mxCell>
24+
<mxCell id="A6lBMLfXj6pK5urAHSdI-5" value="" style="shape=module;jettyWidth=8;jettyHeight=4;" vertex="1" parent="A6lBMLfXj6pK5urAHSdI-4">
25+
<mxGeometry x="1" width="20" height="20" relative="1" as="geometry">
26+
<mxPoint x="-27" y="7" as="offset" />
27+
</mxGeometry>
28+
</mxCell>
29+
<mxCell id="A6lBMLfXj6pK5urAHSdI-6" value="localhost:5001/api&lt;div&gt;&lt;b&gt;backend2&lt;/b&gt;&lt;/div&gt;" style="html=1;dropTarget=0;whiteSpace=wrap;" vertex="1" parent="1">
30+
<mxGeometry x="102" y="290" width="170" height="60" as="geometry" />
31+
</mxCell>
32+
<mxCell id="A6lBMLfXj6pK5urAHSdI-7" value="" style="shape=module;jettyWidth=8;jettyHeight=4;" vertex="1" parent="A6lBMLfXj6pK5urAHSdI-6">
33+
<mxGeometry x="1" width="20" height="20" relative="1" as="geometry">
34+
<mxPoint x="-27" y="7" as="offset" />
35+
</mxGeometry>
36+
</mxCell>
37+
<mxCell id="A6lBMLfXj6pK5urAHSdI-39" value="&lt;div&gt;https://preview1.my-domain.com&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
38+
<mxGeometry x="593" y="508" width="190" height="20" as="geometry" />
39+
</mxCell>
40+
<mxCell id="A6lBMLfXj6pK5urAHSdI-41" value="SSH 1080" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontStyle=1" vertex="1" parent="1">
41+
<mxGeometry x="412" y="172" width="60" height="18" as="geometry" />
42+
</mxCell>
43+
<mxCell id="A6lBMLfXj6pK5urAHSdI-44" value="Docker" style="shape=module;align=left;spacingLeft=20;align=center;verticalAlign=top;whiteSpace=wrap;html=1;fontStyle=1" vertex="1" parent="1">
44+
<mxGeometry x="572" y="110" width="290" height="290" as="geometry" />
45+
</mxCell>
46+
<mxCell id="A6lBMLfXj6pK5urAHSdI-8" value="1080:2222&lt;br&gt;&lt;b&gt;SSH container&lt;/b&gt;" style="html=1;dropTarget=0;whiteSpace=wrap;" vertex="1" parent="1">
47+
<mxGeometry x="612" y="145" width="180" height="90" as="geometry" />
48+
</mxCell>
49+
<mxCell id="A6lBMLfXj6pK5urAHSdI-9" value="" style="shape=module;jettyWidth=8;jettyHeight=4;" vertex="1" parent="A6lBMLfXj6pK5urAHSdI-8">
50+
<mxGeometry x="1" width="20" height="20" relative="1" as="geometry">
51+
<mxPoint x="-27" y="7" as="offset" />
52+
</mxGeometry>
53+
</mxCell>
54+
<mxCell id="A6lBMLfXj6pK5urAHSdI-10" value="&lt;b&gt;Traefik&lt;/b&gt;" style="html=1;dropTarget=0;whiteSpace=wrap;" vertex="1" parent="1">
55+
<mxGeometry x="612" y="290" width="180" height="90" as="geometry" />
56+
</mxCell>
57+
<mxCell id="A6lBMLfXj6pK5urAHSdI-11" value="" style="shape=module;jettyWidth=8;jettyHeight=4;" vertex="1" parent="A6lBMLfXj6pK5urAHSdI-10">
58+
<mxGeometry x="1" width="20" height="20" relative="1" as="geometry">
59+
<mxPoint x="-27" y="7" as="offset" />
60+
</mxGeometry>
61+
</mxCell>
62+
<mxCell id="A6lBMLfXj6pK5urAHSdI-38" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.133;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
63+
<mxGeometry width="50" height="50" relative="1" as="geometry">
64+
<mxPoint x="638.94" y="379.97" as="sourcePoint" />
65+
<mxPoint x="639" y="510" as="targetPoint" />
66+
</mxGeometry>
67+
</mxCell>
68+
<mxCell id="A6lBMLfXj6pK5urAHSdI-45" value="1081" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
69+
<mxGeometry x="642" y="251" width="30" height="20" as="geometry" />
70+
</mxCell>
71+
<mxCell id="A6lBMLfXj6pK5urAHSdI-46" value="" style="endArrow=classic;html=1;rounded=0;horizontal=0;entryX=0.172;entryY=-0.011;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
72+
<mxGeometry width="50" height="50" relative="1" as="geometry">
73+
<mxPoint x="638" y="235" as="sourcePoint" />
74+
<mxPoint x="637.96" y="289" as="targetPoint" />
75+
</mxGeometry>
76+
</mxCell>
77+
<mxCell id="A6lBMLfXj6pK5urAHSdI-40" value="" style="shape=flexArrow;endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0.416;exitY=-0.004;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.006;entryY=0.6;entryDx=0;entryDy=0;entryPerimeter=0;fillColor=default;" edge="1" parent="1" source="39150e848f15840c-1" target="A6lBMLfXj6pK5urAHSdI-8">
78+
<mxGeometry width="100" height="100" relative="1" as="geometry">
79+
<mxPoint x="490" y="400" as="sourcePoint" />
80+
<mxPoint x="590" y="300" as="targetPoint" />
81+
</mxGeometry>
82+
</mxCell>
83+
<mxCell id="A6lBMLfXj6pK5urAHSdI-47" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0.113;exitY=-0.013;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.097;entryY=0.992;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
84+
<mxGeometry width="50" height="50" relative="1" as="geometry">
85+
<mxPoint x="312" y="105.02999999999997" as="sourcePoint" />
86+
<mxPoint x="562" y="104.92000000000007" as="targetPoint" />
87+
</mxGeometry>
88+
</mxCell>
89+
<mxCell id="A6lBMLfXj6pK5urAHSdI-48" value="SSH 22" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
90+
<mxGeometry x="412" y="82" width="50" height="20" as="geometry" />
91+
</mxCell>
92+
<mxCell id="A6lBMLfXj6pK5urAHSdI-49" value="3000 → 1081&lt;br&gt;5000 → 1082&lt;br&gt;5001 → 1083" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
93+
<mxGeometry x="402" y="210" width="100" height="50" as="geometry" />
94+
</mxCell>
95+
<mxCell id="A6lBMLfXj6pK5urAHSdI-50" value="&lt;div&gt;https://preview3.my-domain.com&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
96+
<mxGeometry x="728" y="460" width="190" height="20" as="geometry" />
97+
</mxCell>
98+
<mxCell id="A6lBMLfXj6pK5urAHSdI-51" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.133;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
99+
<mxGeometry width="50" height="50" relative="1" as="geometry">
100+
<mxPoint x="770.94" y="379.97" as="sourcePoint" />
101+
<mxPoint x="771" y="457" as="targetPoint" />
102+
</mxGeometry>
103+
</mxCell>
104+
<mxCell id="A6lBMLfXj6pK5urAHSdI-52" value="&lt;div&gt;https://preview2.my-domain.com&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
105+
<mxGeometry x="662" y="484" width="190" height="20" as="geometry" />
106+
</mxCell>
107+
<mxCell id="A6lBMLfXj6pK5urAHSdI-53" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.133;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
108+
<mxGeometry width="50" height="50" relative="1" as="geometry">
109+
<mxPoint x="704.94" y="380" as="sourcePoint" />
110+
<mxPoint x="705" y="483" as="targetPoint" />
111+
</mxGeometry>
112+
</mxCell>
113+
<mxCell id="A6lBMLfXj6pK5urAHSdI-54" value="1082" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
114+
<mxGeometry x="708" y="251" width="30" height="20" as="geometry" />
115+
</mxCell>
116+
<mxCell id="A6lBMLfXj6pK5urAHSdI-55" value="" style="endArrow=classic;html=1;rounded=0;horizontal=0;entryX=0.172;entryY=-0.011;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
117+
<mxGeometry width="50" height="50" relative="1" as="geometry">
118+
<mxPoint x="704" y="235" as="sourcePoint" />
119+
<mxPoint x="703.96" y="289" as="targetPoint" />
120+
</mxGeometry>
121+
</mxCell>
122+
<mxCell id="A6lBMLfXj6pK5urAHSdI-56" value="1083" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
123+
<mxGeometry x="772" y="250" width="30" height="20" as="geometry" />
124+
</mxCell>
125+
<mxCell id="A6lBMLfXj6pK5urAHSdI-57" value="" style="endArrow=classic;html=1;rounded=0;horizontal=0;entryX=0.172;entryY=-0.011;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
126+
<mxGeometry width="50" height="50" relative="1" as="geometry">
127+
<mxPoint x="768" y="235" as="sourcePoint" />
128+
<mxPoint x="767.96" y="289" as="targetPoint" />
129+
</mxGeometry>
130+
</mxCell>
131+
<mxCell id="A6lBMLfXj6pK5urAHSdI-58" value="ssh \&lt;br&gt;&amp;nbsp; -R *:1081:localhost:3000 \&lt;br&gt;&amp;nbsp; -R *:1082:localhost:5000 \&lt;br&gt;&amp;nbsp; -R *:1083:localhost:5001 \&lt;br&gt;&amp;nbsp; user@vps" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fillColor=none;fontColor=#333333;strokeColor=none;fontSize=14;" vertex="1" parent="1">
132+
<mxGeometry x="101" y="387" width="179" height="90" as="geometry" />
133+
</mxCell>
134+
</root>
135+
</mxGraphModel>
136+
</diagram>
137+
</mxfile>

‎src/content/post/2025/04-20-ssh-tunnel-docker/index.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Expose your local dev server with SSH tunnel and Docker
33
description: |
44
Practical example how to temporarily expose your local service to the internet.
55
publishDate: 2025-04-20
6-
heroImage: '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture.png'
6+
heroImage: '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture-16-9.png'
77
heroAlt: SSH tunnel Docker architecture diagram
88
tags:
99
- docker
@@ -17,7 +17,7 @@ import { Image } from 'astro:assets';
1717

1818
import { IMAGE_SIZES } from '../../../../constants/image';
1919

20-
import SshTunnelArchitectureImage from '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture.png';
20+
import SshTunnelArchitectureImage from '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/ssh-tunnel-architecture-16-9.png';
2121
import FirewallImage from '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/firewall.png';
2222

2323
import TunnelDemoVideo from '../../../../content/post/2025/04-20-ssh-tunnel-docker/_images/tunnel-demo.webm';

‎src/pages/blog/[slug].astro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const metadata: Metadata = { title, description, image };
8585
<PostLayout {metadata}>
8686
<Fragment slot="hero-image">
8787
{/* hero image 1280x720 max, 16:9 */}
88+
{/* aspect-[16/8] should stay to prevent too tall image */}
8889
{
8990
!noHero && (
9091
<Image

0 commit comments

Comments
 (0)