Skip to content

Commit

Permalink
Merge pull request #19 from f5devcentral/dev
Browse files Browse the repository at this point in the history 
🚀🚀🚀
  • Loading branch information
@kreynoldsf5
kreynoldsf5 authored May 2, 2024
2 parents 06a0fdc + 1665e8f commit 81a20fb
Show file tree
Hide file tree
Showing 20 changed files with 361 additions and 373 deletions.
26 changes: 21 additions & 5 deletions labapp/app/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ def return_err(err):

@app.after_request
def cache_control(response):
"""cache control"""
if request.path.startswith("/static/") and request.path.endswith(".png"):
response.headers['Cache-Control'] = 'public, max-age=3600'
return response
Expand Down Expand Up @@ -87,16 +88,16 @@ def setup():
if action == 'save':
this_eph_ns = request.form['eph_ns'].strip()
if not validate_eph_ns(this_eph_ns):
flash("Invalid ephemeral NS.", "danger")
flash("Invalid ephemeral namespace.", "danger")
return redirect(url_for('setup'))
response = make_response(redirect('/setup'))
response.set_cookie('eph_ns', this_eph_ns, max_age=60*60*24)
flash('Ephemeral NS successfully set.', "success")
flash('Ephemeral namespace successfully set.', "success")
return response
if action == 'clear':
response = make_response(redirect('/setup'))
response.set_cookie('eph_ns', '', expires=0)
flash("Ephemeral NS cleared.", "info")
flash("Ephemeral namespace cleared.", "info")
return response
html = render_md("markdown/setup.md")
return render_template('setup.html',
Expand Down Expand Up @@ -358,10 +359,10 @@ def manip3():
return jsonify(status='success', data=data)
except (LabException, requests.RequestException, ValueError) as e:
return jsonify(status='fail', error=str(e))

@app.route('/_port1')
def port1():
"""Azure LB test"""
"""Friend test"""
try:
s = requests.Session()
s.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
Expand All @@ -374,6 +375,21 @@ def port1():
except (LabException, requests.RequestException, ValueError) as e:
return jsonify(status='fail', error=str(e))

@app.route('/_port2', methods=['POST'])
def port2():
"""Friend test"""
try:
s = requests.Session()
s.headers.update({"User-Agent": "MCN-Lab-Runner/1.0"})
data = request.get_json()
print(data)
eph_ns = data['userInput']
url = f"https://{eph_ns}.{app.config['base_url']}/"
data = cloudapp_fetch(s, url, 7, 'info', {"method": "GET", "path": "/"})
return jsonify(status='success', data=data)
except (LabException, requests.RequestException, ValueError) as e:
return jsonify(status='fail', error=str(e))


if __name__ == '__main__':
app.run(host='0.0.0.0', port=5001, debug=False)
14 changes: 12 additions & 2 deletions labapp/app/markdown/lb.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
<img src="/static/lb.png" width="300px" height="auto" alt="intro">
<img src="/static/load-balancing.png" width="300px" height="auto" alt="intro">
</div>

# **Load Balancing**
Expand Down Expand Up @@ -32,6 +32,10 @@ Build an origin pool and load balancer based on the exercise requirements.
The cloud app is TLS only.
</li>
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
The load balancer domain is <strong><i>your-ephemeral-namespace</i>.mcn-lab.f5demos.com</strong>.
</li>
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
Use the wildcard cert provided in the shared NS, <strong>mcn-lab-wildcard</strong>, to enable TLS on the LB.
</li>
Expand Down Expand Up @@ -146,5 +150,11 @@ document.getElementById('requestBtn2').addEventListener('click', () => {

<div style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

After completing both exercises, move on to the <strong><a href="/route" class="alert-link">routing</a></strong> exercise.
<nav aria-label="labapp nav">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="/route">Routing <i class="bi bi-arrow-right-circle-fill"></i></a>
</li>
</ul>
</nav>

23 changes: 14 additions & 9 deletions labapp/app/markdown/manipulation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@

<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

Since web traffic has been traversing proxies, engineers have needed to alter HTTP content for increased observability ([XFF](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For)), performance ([cache-control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)), or other reasons ([JWT](https://en.wikipedia.org/wiki/JSON_Web_Token)).
Since web traffic has been traversing proxies, engineers have needed to alter HTTP content for increased observability (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For">XFF</a>), performance (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a>), or core functionality (<a href="https://en.wikipedia.org/wiki/JSON_Web_Token">JWT</a>).
"Proxy Pass" functionality has been part of web servers since the early Apache days.
Adding, removing, and altering Headers are tablestakes for ADCs, CDNs, and software-based load balancers.
F5 XC App Connect enables this functionality granularly on routes or broadly on the load balancer.


<div style="height:25px"></div>

### **Exercise 1: Path Rewrite**
Expand Down Expand Up @@ -55,7 +54,7 @@ document.getElementById('requestBtn1').addEventListener('click', () => {
});
</script>

Since questions on this functionality are often asked on <strong><a href="https://community.f5.com/" target="_blank">F5 DevCentral</a></strong>, a hint might be warranted.
Questions on this functionality are often asked on <strong><a href="https://community.f5.com/" target="_blank">F5 DevCentral</a></strong>. Here's a hint.

<div id="hints">
<p>
Expand Down Expand Up @@ -86,11 +85,11 @@ Use the <strong><a href="https://docs.cloud.f5.com/docs/how-to/advanced-security
<ul class="list-group">
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
Insert a request header named <strong>X-MCN-src-site</strong> to identifies the UDF CE to the origin. <u>Do not use a static value</u>.
Insert a request header named <strong>X-MCN-src-site</strong> to identify the UDF CE to the origin. <u>Do not use a static value</u>.
</li>
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
Insert a request header named <strong>X-MCN-namespace</strong> to identifies the ephemeral namespace to the origin. <u>Do not use a static value</u>.
Insert a request header named <strong>X-MCN-namespace</strong> to identify the ephemeral namespace to the origin. <u>Do not use a static value</u>.
</li>
</ul>

Expand Down Expand Up @@ -139,9 +138,9 @@ document.getElementById('requestBtn2').addEventListener('click', () => {

#### **Test Criteria**

<div style="height:25px"></div>

<strong><u>This test will evaluate response headers.</u></strong>
<div class="alert alert-secondary" role="alert">
This test evaluates response headers.
</div>

```http
GET https://eph-ns.mcn-lab.f5demos.com/aws HTTP/1.1
Expand Down Expand Up @@ -174,5 +173,11 @@ document.getElementById('requestBtn3').addEventListener('click', () => {

<div style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

Finish off App Connect with an exercise on load balancer <strong><a href="/portability" class="alert-link">portability</a></strong>.
<nav aria-label="labapp nav">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="/portability">Portability <i class="bi bi-arrow-right-circle-fill"></i></a>
</li>
</ul>
</nav>

54 changes: 40 additions & 14 deletions labapp/app/markdown/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

The lab environment, the application endpoints, and how you interact with the load balancer have been simplified in an effort to focus on concepts.
The lab environment, the service endpoints, and how you interact with the load balancer have been simplified in an effort to focus on concepts.
Understanding the environment, it's topology, and the rudimentary functionality of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> will help in completing the exercises.

<div style="height:25px"></div>
Expand All @@ -15,19 +15,17 @@ Understanding the environment, it's topology, and the rudimentary functionality

The lab environment contains three distributed sites meshed using the F5 Distributed Cloud Global Network.

<div style="height:25px"></div>

<ul class="list-group">
<li class="list-group-item">
<img src="/static/mcnp-aws.png" width="auto" height="30px"> &nbsp;&nbsp;
<img src="/static/aws.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
<strong>student-awsnet</strong> in Amazon Web Services
</li>
<li class="list-group-item">
<img src="/static/mcnp-azure.png" width="auto" height="30px"> &nbsp;&nbsp;&nbsp;
<img src="/static/azure.png" width="40px" height="auto" class="rounded"> &nbsp;&nbsp;&nbsp;
<strong>student-azurenet</strong> in Microsoft Azure
</li>
<li class="list-group-item">
<img src="/static/mcnp-udf.png" width="auto" height="30px"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="/static/mcnp-udf.png" width="40px" height="auto"> &nbsp;&nbsp;&nbsp;
<strong>Lab CE</strong> in UDF
</li>
</ul>
Expand All @@ -40,7 +38,7 @@ The lab environment contains three distributed sites meshed using the F5 Distrib

An instance of the <strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/tree/main/cloudapp" target="_blank">cloud app</a></strong> is hosted in each remote cloud environment.
The cloud app is a simple application that echoes back an HTTP request.
While working through the lab, unless otherwise noted, the test results are displaying the headers and info **from the request received by the app**.
While working through the lab, unless otherwise noted, test results display headers and info **from the request received by the app**.

For testing, you can access an endpoint of each cloud app from your browser.

Expand All @@ -52,21 +50,37 @@ For testing, you can access an endpoint of each cloud app from your browser.
<img src="/static/azure.png" height="100px" width="auto" class="rounded"/>
</a></p>



<div style="height:25px"></div>

## **Lab Exercises**

Lab exercises will ask you to create configuration in the <strong><a href="https://f5-xc-lab-mcn.console.ves.volterra.io/" target="_blank">lab tenant</a></strong>.
To complete a lab exercise, you will run a test against the load balancer advertised from the Customer Edge in your UDF site.
Tests are integrated in this lab app.
Exercise requirements are listed in a table along with an object type indicator.

<ul class="list-group">
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
<strong>Load Balancer</strong>
</li>
<li class="list-group-item">
<img src="/static/origin-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
<strong>Origin Pool</strong>
</li>
<li class="list-group-item">
<img src="/static/route-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
<strong>Route</strong>
</li>
</ul>

<div style="height:25px"></div>

#### **Test Criteria**

Exercises will specify thier success criteria along with the test.
To complete lab exercises, you will run tests against the load balancer advertised from the Customer Edge in your UDF site.
You will build this load balancer in the <strong><a href="/lb">first exercise</a></strong>.
All tests will be run from this lab app.

Each test will specify success criteria immediately before to the <button id="null" class="btn btn-primary disabled">Test Load Balancer</button> button.

Here are some examples to try.

Expand Down Expand Up @@ -131,13 +145,25 @@ ubuntu@ubuntu:~$ curl -s https://foo.mcn-lab.f5demos.com/ | jq
"info": "bar"
}
```
<div class="alert alert-secondary" role="alert">
Responses displayed in exercise tests are truncated for readibility.
</div>

<div style="height:25px"></div>

## **Issues**

Note that responses displayed in exercise tests are truncated for readibility.
Use the lab repository <i class="bi bi-github"> </i><strong><a href="https://github.com/f5devcentral/f5xc-lab-mcn-practical/" target="_blank">issue tracker</a></strong> to report bugs, typos, or lab enhancements.

<div href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

Next, visit the <strong><a href="/setup" >setup page</a></strong> before starting the exercises.
<nav aria-label="labapp nav">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="/setup">Setup <i class="bi bi-arrow-right-circle-fill"></i></a>
</li>
</ul>
</nav>



Expand Down
44 changes: 30 additions & 14 deletions labapp/app/markdown/portability.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The configuration built so far handles load balancing, routing, and content mani
XC refers to this object as a "load balancer" -- but it's really the holistic representation of an application whose service endpoints live across the distributed network.
The object is simple -- it doesn't yet include configuration for WAAP, API protection, or a service policy.

What seperate XC from traditional ADCs is the flexibility of defining <strong>where the object is advertised</strong>.
What seperates XC from traditional ADCs is flexibility in defining <strong>where a load balancer is advertised</strong>.

<div style="height:25px"></div>

Expand Down Expand Up @@ -46,7 +46,7 @@ Host: eph-ns.mcn-lab.f5demos.com
<div id="result1" class="mt-3"></div>
<script>
document.getElementById('requestBtn1').addEventListener('click', () => {
makeHttpRequest('requestBtn1', '/_port1', 'result');
makeHttpRequest('requestBtn1', '/_port1', 'result1');
});
</script>

Expand All @@ -67,17 +67,22 @@ document.getElementById('requestBtn1').addEventListener('click', () => {

### **Exercise 2: Find a Friend**

Do you have a friend working on the lab?
Ask them their ephemeral namespace and test that their load balancer is being advertised from your site.
Do you have a friend working on the lab? Find thier <strong>ephemeral namespace</strong> (or use the one provided).

<ul class="list-group">
<li class="list-group-item">
<img src="/static/lb-icon.png" width="auto" height="50px"> &nbsp; &nbsp;
Test if your friend's load balancer is being advertised to the UDF site.
</li>
</ul>

<div style="height:25px"></div>

#### **Test Criteria**

```http
GET https://eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
Host: eph-ns.mcn-lab.f5demos.com
GET https://friend-eph-ns.mcn-lab.f5demos.com/ HTTP/1.1
Host: friend-eph-ns.mcn-lab.f5demos.com
{
"info": {
Expand All @@ -87,19 +92,30 @@ Host: eph-ns.mcn-lab.f5demos.com
}
```

<div class="left-aligned-button-container">
<button id="requestBtn2" class="btn btn-primary">Test Load Balancer</button>
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<input type="text" id="inputText2" class="form-control"
placeholder="Enter your string here" aria-label="User input" value="wiggly-yellowtail">
<button id="requestBtn2" class="btn btn-primary" type="button">Test Load Balancer</button>
</div>
</div>
</div>
<div id="result2" class="mt-3"></div>
</div>
<div id="result2" class="mt-3"></div>
<script>
document.getElementById('requestBtn2').addEventListener('click', () => {
makeHttpRequest('requestBtn2', '/_manip2', 'result2');
makePostRequest('requestBtn2', '/_port2', 'result2', 'inputText2');
});
</script>

<div style="height:25px" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"></div>

🚀 Nice 🚀!
</br>


<nav aria-label="labapp nav">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="/score">Scoreboard <i class="bi bi-arrow-right-circle-fill"></i></a>
</li>
</ul>
</nav>
Loading

0 comments on commit 81a20fb

Please sign in to comment.