-
Notifications
You must be signed in to change notification settings - Fork 0
/
parksmap-routes.html
327 lines (252 loc) · 13.1 KB
/
parksmap-routes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script src="jquery/jquery.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="requirejs/require.js"></script>
<script>var workshop_base_url = "/user/user3/workshop";</script>
<link rel="stylesheet" href="asciidoctor/css/asciidoctor.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/workshop.css">
<link rel="stylesheet" href="css/workshop-asciidoc.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135921114-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "UA-135921114-11");
</script>
</head>
</body>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<a href="" class="logo">Starter Labs (Java)</a>
</div>
</div>
</div>
</header>
<!-- Main -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 d-sm-block d-none">
<!-- Table of Contents -->
<ul class="menu">
<li class="category">
<ul class="modules">
<h5 class="category-title">Workshop Modules</h5>
<li class="page"><a href="common-workshop-summary.html">Workshop Summary</a></li>
<li class="page"><a href="common-environment.html">Environment Overview</a></li>
<li class="page"><a href="common-using-homeroom.html">Using Homeroom</a></li>
<li class="page"><a href="common-parksmap-architecture.html">Architecture Overview of the ParksMap Application</a></li>
<li class="page"><a href="common-explore.html">Exploring the CLI and Web Console</a></li>
<li class="page"><a href="parksmap-container-image.html">Deploying Your First Container Image</a></li>
<li class="page"><a href="parksmap-scaling.html">Scaling and Self Healing</a></li>
<li class="page active"><a href="parksmap-routes.html">Exposing Your Application to the Outside World</a></li>
<li class="page"><a href="parksmap-logging.html">Exploring OpenShift's Logging Capabilities</a></li>
<li class="page"><a href="parksmap-permissions.html">Role-Based Access Control</a></li>
<li class="page"><a href="parksmap-rsh.html">Remote Access to Your Application</a></li>
<li class="page"><a href="nationalparks-java.html">Deploying Java Code</a></li>
<li class="page"><a href="nationalparks-java-databases.html">Adding a Database (MongoDB)</a></li>
<li class="page"><a href="nationalparks-java-application-health.html">Application Health</a></li>
<li class="page"><a href="nationalparks-java-pipeline.html">Automate Build and Deployment with Pipelines</a></li>
<li class="page"><a href="nationalparks-java-pipeline-codechanges-gogs.html">Automation for Your Application on Code Changes</a></li>
<li class="page"><a href="mlbparks-templates.html">Using Application Templates</a></li>
<li class="page"><a href="mlbparks-binary-build.html">Binary Builds for Day to Day Development</a></li>
<li class="page"><a href="common-further-resources.html">Further Resources</a></li>
<li class="page"><a href="common-workshop-links.html">Workshop Links</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9">
<section class="page-content">
<!-- Top Navigation -->
<div class="btn-group btn-group-xs float-right">
<button type="button" onclick="location.href='parksmap-scaling';" class="btn btn-xs btn-transparent" aria-label="Prev">
<span class="fas fa-arrow-left" aria-hidden="true"></span>
</button>
<button type="button" onclick="location.href='';" class="btn btn-xs btn-transparent" aria-label="Home">
<span class="fas fa-home" aria-hidden="true"></span>
</button>
<button type="button" onclick="location.href='parksmap-logging';" class="btn btn-xs btn-transparent" aria-label="Next">
<span class="fas fa-arrow-right" aria-hidden="true"></span>
</button>
</div>
<!-- Title -->
<h1 class="title">Exposing Your Application to the Outside World</h1>
<!-- Content -->
<div class="paragraph">
<p>In this lab, we’re going to make our application visible to the end users, so they can access it.</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="images/roadshow-app-architecture-parksmap-2.png" alt="Application architecture" width="800">
</div>
</div>
<div class="sect1">
<h2 id="_background_routes">Background: Routes</h2>
<div class="sectionbody">
<div class="paragraph">
<p>While <strong>Services</strong> provide internal abstraction and load balancing within an
OpenShift environment, sometimes clients (users, systems, devices, etc.)
<strong>outside</strong> of OpenShift need to access an application. The way that external
clients are able to access applications running in OpenShift is through the
OpenShift routing layer. And the data object behind that is a <strong>Route</strong>.</p>
</div>
<div class="paragraph">
<p>The default OpenShift router (HAProxy) uses the HTTP header of the incoming
request to determine where to proxy the connection. You can optionally define
security, such as TLS, for the <strong>Route</strong>. If you want your <strong>Services</strong>, and, by
extension, your <strong>Pods</strong>, to be accessible from the outside world, you need to
create a <strong>Route</strong>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_exercise_creating_a_route">Exercise: Creating a Route</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You may remember that when we deployed the <code>parksmap</code> application, we un-checked the checkbox to
create a <strong>Route</strong>. Normally it would have been created for us automatically. Fortunately, creating a <strong>Route</strong> is a pretty straight-forward process. You simply <code>expose</code> the <strong>Service</strong> via the command line. Or, via the <strong>Administrator Perspective</strong>, just click <strong>Networking → Routes</strong> and then the <strong>Create Route</strong> button.</p>
</div>
<div class="paragraph">
<p>Insert <strong>parksmap</strong> in <strong>Name</strong> field.</p>
</div>
<div class="paragraph">
<p>From <strong>Service</strong> field, select <strong>parksmap</strong>. For <strong>Target Port</strong>, select <strong>8080</strong>.</p>
</div>
<div class="paragraph">
<p>In <strong>Security</strong> section, check <strong>Secure route</strong>. Select <strong>Edge</strong> from <strong>TLS Termination</strong> list.</p>
</div>
<div class="paragraph">
<p>Leave all other fields blank and click <strong>Create</strong>:</p>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="images/parksmap-route-create-1.png" alt="Create Route1">
</div>
</div>
<div class="imageblock text-center">
<div class="content">
<img src="images/parksmap-route-create-2.png" alt="Create Route2">
</div>
</div>
<div class="paragraph">
<p>When creating a <strong>Route</strong>, some other options can be provided, like the hostname and path for the <strong>Route</strong> or the other TLS configurations.</p>
</div>
<div class="paragraph">
<p>When using the command line, we can first verify that we don’t already have any existing <strong>Routes</strong>:</p>
</div>
<div class="listingblock execute-1">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">oc get routes</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">No resources found.</code></pre>
</div>
</div>
<div class="paragraph">
<p>Now we need to get the <strong>Service</strong> name to expose:</p>
</div>
<div class="listingblock execute-1">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">oc get services</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">NAME CLUSTER-IP EXTERNAL-IP PORT(S) AGE
parksmap 172.30.169.213 <none> 8080/TCP 5h</code></pre>
</div>
</div>
<div class="paragraph">
<p>Once we know the <strong>Service</strong> name, creating a <strong>Route</strong> is a simple one-command task:</p>
</div>
<div class="listingblock execute-1">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">oc create route edge parksmap --service=parksmap</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">route.route.openshift.io/parksmap exposed</code></pre>
</div>
</div>
<div class="paragraph">
<p>Verify the <strong>Route</strong> was created with the following command:</p>
</div>
<div class="listingblock execute-1">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">oc get route</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-bash" data-lang="bash">NAME HOST/PORT PATH SERVICES PORT TERMINATION WILDCARD
parksmap parksmap-user3.apps.cluster-test-efcf.test-efcf.example.opentlc.com parksmap 8080-tcp edge None</code></pre>
</div>
</div>
<div class="paragraph">
<p>You can also verify the <strong>Route</strong> in the <strong>Developer Perspective</strong> under the <strong>Resources</strong> tab for your <code>parksmap</code> deployment configuration. Also note that there is a decorator icon on the <code>parksmap</code> visualization now. If you click that, it will open the URL for your <strong>Route</strong> in a browser.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="images/parksmap-route-created.png" alt="Route created">
</div>
</div>
<div class="paragraph">
<p>This application is now available at the URL shown in the Developer Perspective. Click the link and you will see it.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<div class="title">Note</div>
</td>
<td class="content">
At first time, the Browser will ask permission to get your position. This is needed by the Frontend app to center the world map to your location, if you don’t allow it, it will just use a default location.
</td>
</tr>
</table>
</div>
<div class="imageblock">
<div class="content">
<img src="images/parksmap-route-empty-map.png" alt="Empty map">
</div>
</div>
</div>
</div>
<!-- Bottom Navigation -->
<div class="page-meta clearfix">
<input type="button" class="btn btn-lg btn-primary float-right" onclick="location.href='parksmap-logging';" value="Continue" />
</div>
</section>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
</footer>
<!-- Javascript-->
<script src="js/workshop.js"></script>
<script src="js/workshop-asciidoc.js"></script>
</body>
</html>