SimplyServerless/functions.html at master · danhanley/SimplyServerless · GitHub

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
<!DOCTYPE html>
<html xmlns:https="http://www.w3.org/1999/xhtml">
<title>Functions as a Service</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
    html, body, h1, h2, h3, h4, h5, h6 {
        font-family: "Roboto", sans-serif
    }

    .w3-sidenav a, .w3-sidenav h4 {
        padding: 12px;
    }

    .w3-navbar a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
</style>
<body>

<!-- Navbar -->
<ul class="w3-navbar w3-theme w3-top w3-left-align w3-large" style="z-index:4;">
    <li class="w3-opennav w3-right w3-hide-large">
        <a class="w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i
                class="fa fa-bars"></i></a>
    </li>
    <li class="w3-hide-small"><a href="index.html" class="w3-hover-white">Home</a></li>
    <li class="w3-hide-small"><a href="staticsites.html" class="w3-hover-white">Static Sites</a></li>
    <li><a href="functions.html" class="w3-theme-l1">Functions</a></li>
    <li class="w3-hide-small"><a href="backends.html" class="w3-hover-white">Backends</a></li>
    <li class="w3-hide-medium w3-hide-small"><a href="contact.html" class="w3-hover-white">Contact</a></li>
</ul>

<!-- Sidenav -->
<nav class="w3-sidenav w3-collapse w3-theme-l5 w3-animate-left" style="z-index:3;width:250px;margin-top:51px;"
     id="mySidenav">
    <a href="javascript:void(0)" onclick="w3_close()"
       class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="close menu">
        <i class="fa fa-remove"></i>
    </a>
    <h4><b>Menu</b></h4>
    <a href="index.html" class="w3-hover-black">Home</a>
    <a href="staticsites.html" class="w3-hover-black">Static Sites</a>
    <a href="functions.html" class="w3-hover-black">Functions</a>
    <a href="backends.html" class="w3-hover-black">Backends</a>
    <a href="contact.html" class="w3-hover-black">Contact</a>
</nav>

<!-- Overlay effect when opening sidenav on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu"
     id="myOverlay"></div>

<!-- Main content: shift it to the right by 250 pixels when the sidenav is visible -->
<div class="w3-main" style="margin-left:250px">

    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
            <h1 class="w3-text-teal">Functions as a Service</h1>
            <p>Sometimes you need to do computations that may require resources or compute power beyond what can be
                expected in the cient browser.
                This is where Functions as a Service come into play in the Serverless world. This section is about
                writing those little functions.</p>
        </div>
        <div class="w3-third w3-container">
            <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
            <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
        </div>
    </div>

    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
            <h1 class="w3-text-teal">Build, Package and Deploy Function</h1>
            You'll need to map the web request to a json format consumable by Lambda.
            http://docs.aws.amazon.com/lambda/latest/dg/java-handler-using-predefined-interfaces.html
            <p></p>
        </div>
        <div class="w3-third w3-container">
            <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
            <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
        </div>
    </div>

    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
            <h1 class="w3-text-teal">Add Function to API Manager</h1>
            <p>
                http://stackoverflow.com/questions/31329958/how-to-pass-a-querystring-or-route-parameter-to-aws-lambda-from-amazon-api-gatew</p>
        </div>
        <div class="w3-third w3-container">
            <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
            <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
        </div>
    </div>

    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
            <h1 class="w3-text-teal">Call the function!</h1>
            <form name="firstform">
                Name: <input type="text" name="name"><br>
            </form>

            <h2 id="server-response">Result will appear here</h2>
            <button type="button" onclick="callMe('https://qvpphez67b.execute-api.eu-west-1.amazonaws.com/live?name='+firstform.name.value, 'server-response')">Say Hello</button>

            <p>If you want to test this locally from localhost, then you need to set CORS headers:
                http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html#how-to-cors-console
                Don't forget to redeploy after setting this up.</p>
        </div>
        <div class="w3-third w3-container">
            <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
            <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
        </div>
    </div>

    <div class="w3-row w3-padding-64">
        <div class="w3-twothird w3-container">
            <h1 class="w3-text-teal">Give it a friendly URL</h1>
            <p>http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-custom-domains.html</p>
            <p>You'll need an SSL certificate: https://aws.amazon.com/certificate-manager/ looks nice but at the time of
                writing:</p>
            <ol>
                <li>To use an ACM Certificate with CloudFront, you must request the certificate in the US East (N.
                    Virginia) region. Not a problem.
                </li>
                <li>You need to have access to the certificate body and key. On the roadmap (or some better
                    integration?) but not available yet: https://forums.aws.amazon.com/thread.jspa?threadID=234686
            </li>
            </ol>
            <p>So you'll need to get a key from another provider and enter it in API Gateway.
            Generate a Certificate Signing Request (CSR) using: <code>openssl req -new -newkey rsa:2048 -nodes -keyout yourdomain.key -out yourdomain.csr</code></p>
            Follow the onscreen instructions and then upload the CSR to your chosen certificate provider (I use GoDaddy, other providers are available.)
            You will then (after paying some money) recieve a certificate, and a certificate chain which can be uploaded to API Gateway.

            Now just create an alias for e.g. api.yourdomain.com to point to the cloudfront endpoint created by API Gateway.
            Note that you no longer need the stage name as part of the url, as the API Gateway mapping hides that away.
            Again, you'll need to redeploy the API for the certificate change to take effect.

            <form name="secondform">
                Name: <input type="text" name="name"><br>
            </form>

            <h2 id="custom-server-response">Result will appear here</h2>
            <button type="button" onclick="callMe('https://api.simplyserverless.com?name='+secondform.name.value, 'custom-server-response')">Change Content</button>

        </div>
        <div class="w3-third w3-container">
            <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
            <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
        </div>
    </div>

    <!-- Pagination -->
    <div class="w3-center w3-padding-64">
        <ul class="w3-pagination">
            <li><a class="w3-hover-black w3-hide-small" href="index.html">1</a></li>
            <li><a class="w3-hover-black" href="staticsites.html">2</a></li>
            <li><a class="w3-black" href="functions.html">3</a></li>
            <li><a class="w3-hover-black" href="backends.html">4</a></li>
            <li><a class="w3-hover-black w3-hide-small" href="contact.html">5</a></li>
        </ul>
    </div>

    <footer id="myFooter">
        <div class="w3-container w3-theme-l2 w3-padding-32">
            <h4></h4>
        </div>

        <div class="w3-container w3-theme-l1">
            <p>Powered by <a href="http://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
        </div>
    </footer>

    <!-- END MAIN -->
</div>

<script>
    // Get the Sidenav
    var mySidenav = document.getElementById("mySidenav");

    // Get the DIV with overlay effect
    var overlayBg = document.getElementById("myOverlay");

    // Toggle between showing and hiding the sidenav, and add overlay effect
    function w3_open() {
        if (mySidenav.style.display === 'block') {
            mySidenav.style.display = 'none';
            overlayBg.style.display = "none";
        } else {
            mySidenav.style.display = 'block';
            overlayBg.style.display = "block";
        }
    }

    // Close the sidenav with the close button
    function w3_close() {
        mySidenav.style.display = "none";
        overlayBg.style.display = "none";
    }
</script>

<script>
    function callMe(url, target) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById(target).innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
    }
</script>

<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-84008767-1', 'auto');
    ga('send', 'pageview');

</script>

</body>
</html>