Building a website without a webserver on Azure
•Download as PPTX, PDF•
0 likes•139 views
JamStack is a popular modern architecture for creating web apps apps using JavaScript, APIs, and prerendered markup all delivered without web servers. The end result is fast, dynamic and more secure web sites that can cost significantly less than traditional approaches. In this session I’ll share how I build retrodevops.com using the JamStack architecture, Hugo and Azure as well as lessons learned along the way.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building a website without a webserver on Azure
Similar to Building a website without a webserver on Azure (20)
More from Todd Whitehead
Recently uploaded
Recently uploaded (20)
Building a website without a webserver on Azure
- 1. Todd Whitehead | Cloud Solution Architect |Microsoft @TodWhitehead Building a website without a web server* on Azure * well, at least not paying (much) for it
- 2. Goals • Production Grade • Low resting cost • Scale quickly if required • Let me focus on content • Articles • Rich Media • Online C64 Emulator & BBS Terminal • Tagging and Searching • Support DevOps
- 3. Web Server Router Controller View Model Session Data Server Side Template Rendering Cache Data Browser Static ContentCDN Images Javascript Template Rendered HTML
- 4. Deploying in Azure Virtual Machines App Service AKS
- 5. What would traditional approach cost?
- 6. Web Server Router Controller View Model Session Data What if there was another way? Cache Data Browser Static ContentCDN Images Javascript Template Rendered HTML
- 7. Web Server Router Controller API Model Session Data Static Rendering: Template Rendered at deployment Cache Data Browser Static ContentCDN Rendered HTML Images JavaScript
- 8. Router Controller API Model Session Data Cache Data Browser Static ContentCDN Rendered HTML Images JavaScript Static Website: Template Rendered at deployment
- 9. JAMStack https://jamstack.org | https://jamstack.wtf/ JavaScript APIs Markup Dynamic functionalities handled by JavaScript, no restriction on which framework or library to use Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function. Websites served as static HTML files. Can be generated from source files, such as Markdown, using a Static Site Generator.
- 10. Advantages Better Performance Higher Security Cheaper, Easier Scaling Better Developer Experience Frameworks https://reactjs.org/ https://vuejs.org/ https://angular.io/
- 11. New Azure API Management developer portal https://github.com/Azure/api-management-developer-portal “Better performance, scalability, and security—The new portal has been completely reengineered for simplicity, performance gains, and scalable distribution. It has a lightweight architecture and uses JAMstack technology. “
- 13. https://gohugo.io • Extremely fast build times (< 1 ms per page) • Cross platform • Renders changes on the fly as you develop • Dynamic menu creation • Permalink, redirects and pretty URL support • Powerful theming
- 14. VSCode Plugins Hugo CLI Hugo Server Markdown
- 15. hugo new post
- 17. hugo server
- 21. Retrodevops.com Architecture 1 retrodevops.blob.core.windows.net retrodevops.z8.web.core.windows.net http://www.retrodevops.com retrodevops-website Public Website CI retrodevops-helloworldHelloworld2 Release
- 22. Azure Storage: The other web server
- 24. CORS
- 25. Hugo Website CI
- 26. Hugo Website CD
- 29. Retrodevops.com Architecture 1 retrodevops.blob.core.windows.net/$web retrodevops.z8.web.core.windows.net/ http://www.retrodevops.com retrodevops-website Public Website CI retrodevops-helloworldHelloworld2 Release
- 30. Retrodevops.com Architecture 2 retrodevops.blob.core.windows.net/$web retrodevops.z8.web.core.windows.net retrodevops.azureedge.net https://www.retrodevops.com retrodevops-website Public Website CI retrodevops-helloworldHelloworld2 Release
- 31. Retrodevops.com Architecture 2 retrodevops.blob.core.windows.net/$web retrodevops.z8.web.core.windows.net retrodevops.azureedge.net https://www.retrodevops.com DiskImages retrodevops-website Public Website CI retrodevops-helloworldHelloworld2 Release hworld2.d64
- 39. Other API Options Azure Functions Azure Search Azure Logic Apps Event Grid API Management Event Grid APP Service AKS
- 40. Serverless Web Ref Architecture https://docs.microsoft.com/en-us/azure/architecture/reference-architectures/serverless/web-app https://github.com/mspnp/serverless-reference-implementation
- 41. Retrospective • Running Compute & Allocated Memory $$$ • Storage, Networking $ • Serverless: • Minimise time paying for stuff • $$$ match demand • Can reduce cloud running costs significantly by “denormalising” compute usage • Requires re-architecting apps • Doesn’t need to be the whole app though • Worth trying out new services & architectures
Editor's Notes
- Paying for capacity, whether its avm, an appservicr or AKS node, or database throughput. I can of course auto scale [Click] which helps better align cost with demand. But I still pay for that capacity whether its used or not.
- When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases. JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript. APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services Markup: Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps. You may have already seen or worked on a JAMstack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator...
- Better Performance: Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN. Higher Security: With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services. Cheaper, Easier Scaling: When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans. Better Developer Experience: Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.
- Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full html website. Hugo makes use of Markdown files with front matter for meta data. A typical website of moderate size can be rendered in a fraction of a second. A good rule of thumb is that Hugo takes around 1 millisecond for each piece of content. It is written to work well with any kind of website including blogs, tumbles and docs.
- General Extremely fast build times (< 1 ms per page) Completely cross platform, with easy installation on macOS, Linux, Windows, and more Renders changes on the fly with LiveReload as you develop Powerful theming Host your site anywhere Organization Straightforward organization for your projects, including website sections Customizable URLs Support for configurable taxonomies, including categories and tags Sort content as you desire through powerful template functions Automatic table of contents generation Dynamic menu creation Pretty URLs support Permalink pattern support Redirects via aliases Content Native Markdown and Emacs Org-Mode support, as well as other languages via external helpers (see supported formats) TOML, YAML, and JSON metadata support in front matter Customizable homepage Multiple content types Automatic and user defined content summaries Shortcodes to enable rich content inside of Markdown “Minutes to Read” functionality “Wordcount” functionality Additional Features Integrated Disqus comment support Integrated Google Analytics support Automatic RSS creation Support for Go, Amber, and Ace HTML templates Syntax highlighting powered by Chroma
- 400,000 page views per $1