Explained Web app at the edge. Understanding Edge Computing in… by Teng Wei Herr Oct, 2023 Level Up Coding --- 解释:边缘计算中的Web应用程序。理解边缘计算... 作者:Teng Wei Herr

Explained Web app at the edge. Understanding Edge Computing in… by Teng Wei Herr Oct, 2023 Level Up Coding --- 解释:边缘计算中的Web应用程序。理解边缘计算... 作者:Teng Wei Herr

Tags
Published
Author
The term edge has gained a lot of attention in the context of web development, especially with modern full-stack web frameworks like Next.js and Remix, as well as the rising hosting providers like Vercel, Netlify, and Cloudflare, all of which also support edge networking. However, understanding the concept of edge computing and its relationship with web applications can be a bit complex for beginners. In this article, we are going to break it down into its evolution, the advantages, and get the edge related terms explained in terms of web engineering.
边缘这个词在网络开发的背景下引起了很多关注,尤其是在像Next.js和Remix这样的现代全栈网络框架以及像Vercel、Netlify和Cloudflare这样的新兴托管提供商中,它们都支持边缘网络。然而,对于初学者来说,理解边缘计算的概念及其与网络应用的关系可能有些复杂。在本文中,我们将对其演变、优势以及与网络工程相关的边缘术语进行解析。

Expectation 期望

After finishing this article, you will be familiar with these concepts:
完成本文后,您将熟悉以下概念:
  • The Evolution of Edge Networks 边缘网络的演变
  • Edge Computing 边缘计算
  • Edge Functions vs. Cloud Serverless 边缘功能 vs. 云无服务器
  • Edge Runtime vs. Node Runtime 边缘运行时与节点运行时

Evolution of Hosting: On-Premise to Cloud to CDN

托管的演变:从本地到云端到CDN

On-premise server 本地服务器

notion image
Photo by Sammyayot254 on Unsplash🔄  ❓
In the old days, if you wanted to run an application, you needed to have a server physically sitting in your office. You had to pay for the server itself, the space to keep it, and people to take care of it, even if you weren’t using it all the time.
在过去,如果你想运行一个应用程序,你需要在办公室里放置一台服务器。你不仅需要支付服务器本身的费用,还需要支付存放服务器的空间和维护人员的工资,即使你并不总是使用它。

Cloud server 云服务器

notion image
Client request to S3 bucket
客户请求S3存储桶
Then came the cloud, where companies like AWS and Azure offered virtual servers that you could use as needed. They took care of all the server management, and you only paid for what you used. Plus, you could easily scale up as your application grew. Sounds pretty great, right?
然后出现了云计算,像AWS和Azure这样的公司提供了虚拟服务器,您可以根据需要使用。他们负责所有的服务器管理,您只需支付您使用的部分。此外,随着您的应用程序的增长,您可以轻松扩展。听起来相当不错,对吧?
But there was a catch. If someone far away, like a client in Malaysia, wanted to use your application, the request had to travel all the way to the cloud server, which could be on the other side of the world. That long journey meant slow load times and a frustrating user experience.
但是有一个问题。如果远在马来西亚的客户想要使用你的应用程序,请求必须传输到云服务器,而云服务器可能位于世界的另一边。这个漫长的旅程意味着加载时间缓慢,用户体验令人沮丧。

CDN🔄 ❓

notion image
Client request to S3 bucket through CDN
客户通过CDN请求S3存储桶
To solve this problem, we have Content Delivery Network (CDN). CDN is a network of servers located at the network edge — meaning the boundary or physical contact point where one network can communicate with another. CDN server connects two networks and is strategically positioned closer to users.
为了解决这个问题,我们有内容分发网络(CDN)。CDN是位于网络边缘的服务器网络,意味着一个网络可以与另一个网络进行通信的边界或物理接触点。CDN服务器连接两个网络,并被战略性地放置在离用户更近的位置。
notion image
CDN server located at the network edge connects two networks
位于网络边缘的CDN服务器连接了两个网络
CDN servers do a few cool things:
CDN服务器可以做一些很酷的事情:
  • Caching static assets like web pages, images, and videos, so they load faster. 缓存静态资源,如网页、图片和视频,以便加载更快。
  • Connecting users to a server that’s close to them, instead of going all the way to the faraway origin server. 将用户连接到离他们较近的服务器,而不是一直到遥远的源服务器。
  • Preventing DDoS attacks, hence improved reliability 防止DDoS攻击,从而提高可靠性
With CDN, websites and apps load way faster because users can get the stuff they need from a server nearby.
通过CDN,网站和应用程序加载速度更快,因为用户可以从附近的服务器获取所需的内容。
We can test the roundtrip time to different types of servers with 3 iterations using the following command:
我们可以使用以下命令对不同类型的服务器进行3次迭代的往返时间测试:
ping -c 3 yourhostname
Result: 结果:
notion image
While CDN used to be all about serving static assets without server-side capability, the internet has changed. Thanks to full-stack web development tools like Next.js and Remix, we can build dynamic web apps that do much more on the server side. So, the question now is: Can CDN evolve to handle full-stack dynamic web apps with server-side functionality?
虽然CDN过去只是用于提供没有服务器端功能的静态资源,但互联网已经发生了变化。多亏了像Next.js和Remix这样的全栈Web开发工具,我们可以构建具有更多服务器端功能的动态Web应用程序。所以,现在的问题是:CDN能否发展到能够处理具有服务器端功能的全栈动态Web应用程序?

Edge Network — CDN with Edge Computing Power

边缘网络 — 具备边缘计算能力的CDN
An edge network, similar to CDN, is a globally distributed platform with servers that come equipped with edge computing capabilities. It is designed to support edge software, all while strategically positioned closer to users.
边缘网络类似于CDN,是一个全球分布的平台,其服务器配备了边缘计算能力。它旨在支持边缘软件,并且战略性地靠近用户。
notion image
When we talk about having an application at the edge, it means our application is hosted on multiple servers within the edge network. When a client requests the application, the request is directed to the closest server geographically. These servers not only serve static assets but are also capable of executing server-side code to power dynamic web apps.
当我们谈论在边缘拥有一个应用程序时,意味着我们的应用程序托管在边缘网络中的多个服务器上。当客户端请求应用程序时,请求会被定向到地理位置最近的服务器。这些服务器不仅提供静态资源,还能执行服务器端代码来支持动态网络应用。
The processing at the edge is what we call edge computing. It’s like moving some of the computational tasks from centralised cloud server to these nearby edge servers.
边缘处理是我们所称的边缘计算。就像将一些计算任务从集中式云服务器转移到附近的边缘服务器。
notion image

Edge Functions — Serverless Functions at the Edge

边缘函数 — 边缘计算中的无服务器函数
With edge network, we can now run server-side applications on the edge servers, not only dynamic web applications but also serverless functions — functions that previously ran on cloud-based servers. Edge functions represent an evolution of cloud serverless functions where they leverage edge network to run JavaScript code on servers strategically located closer to the end-user.🔄  ❓
Each cloud provider has different way of running edge functions:
每个云服务提供商都有不同的边缘函数运行方式:
  • Next.js Edge functions - Edge runtime Next.js边缘函数 - 边缘运行时
  • Netlify Edge functions - Deno runtime Netlify边缘函数 - Deno运行时
  • Cloudflare Workers - Worker runtime Cloudflare Workers - Worker运行时
  • AWS Lambda@Edge - Node runtime AWS Lambda@Edge - Node runtime AWS Lambda@Edge 是一种在云端运行的计算服务,它可以在全球各个边缘位置执行代码。Node runtime 是 AWS Lambda@Edge 支持的一种运行环境,它允许开发者使用 Node.js 编写和执行函数。通过使用 Node runtime,开发者可以在边缘位置快速响应事件,提供低延迟的计算能力。AWS Lambda@Edge - Node runtime 提供了强大的工具和功能,使开发者能够轻松构建和部署高性能的边缘计算应用程序

Cloud Serverless Function vs Edge Function

云无服务器函数 vs 边缘函数
Let’s compare two popular options — AWS Lambda vs. Next.js Edge Function.
让我们来比较两个热门选择 — AWS Lambda vs. Next.js Edge Function。

AWS Lambda

  • Centralised Servers: AWS Lambda functions are hosted on centralized servers, for example region us-east-1, leading to delays in processing user requests due to geographical distance. 集中式服务器:AWS Lambda函数托管在集中式服务器上,例如区域 us-east-1 ,由于地理距离而导致处理用户请求的延迟。
  • Containerisation: Each Lambda function runs within a container, allowing them to start and stop as needed to conserve resources. However, containerisation can result in larger sizes and slower startup times due to packaging software files and dependencies. 容器化:每个 Lambda 函数在容器中运行,使它们能够根据需要启动和停止以节省资源。然而,容器化可能会导致更大的大小和较慢的启动时间,因为需要打包软件文件和依赖项。
  • Node Runtime: AWS Lambda and even the AWS Lambda@Edge use the Node runtime, which can be more resource-intensive in terms of memory and CPU usage. The overhead of JavaScript runtime during container startup and shutdown consumes additional computing resources. Node运行时:AWS Lambda甚至AWS Lambda@Edge都使用Node运行时,它在内存和CPU使用方面可能更加资源密集。在容器启动和关闭期间,JavaScript运行时的开销会消耗额外的计算资源。

Next.js Edge Functions Next.js 边缘函数

  • Distributed Servers: Next.js edge functions overcome latency issues by utilising distributed edge servers in edge network, ensuring faster response times for end-users. 分布式服务器:Next.js边缘函数通过利用边缘网络中的分布式边缘服务器来克服延迟问题,确保终端用户获得更快的响应时间。
  • Isolates: Unlike AWS Lambda, V8 engines allows Next.js edge functions to run in isolated execution environments that don’t require a container or virtual machine. It is like a sandboxed environment on each browser tab or window to prevent one website’s code from interfering with another’s. This approach minimizes resource consumption and eliminates slow startup issues. There’s no need to partition resources like CPU, disk space, or memory into separate containers. 隔离环境:与AWS Lambda不同,V8引擎允许Next.js边缘函数在隔离的执行环境中运行,无需容器或虚拟机。就像每个浏览器标签或窗口上的沙盒环境,防止一个网站的代码干扰另一个网站。这种方法最大程度地减少资源消耗并消除启动缓慢的问题。无需将CPU、磁盘空间或内存等资源分割成单独的容器。
  • Edge runtime: As edge computing is all about minimising latency by processing data closer to the end-user, Edge runtime is specifically designed for minimal startup times and resource consumption, ensuring efficient performance without slow starts. 边缘运行时:由于边缘计算的目标是通过在靠近最终用户的位置处理数据来减少延迟,边缘运行时专门设计用于最小化启动时间和资源消耗,以确保高效的性能而不会出现缓慢启动的情况。
notion image

Edge Runtime 边缘运行时

The Edge runtime is a toolkit created by Vercel to help Next.js to adopt edge computing. It’s built on the JavaScript V8 engine, prioritizing security and speed. Leveraging V8 enables features like Edge Functions on edge servers. However, it lacks native Node.js APIs like reading or writing to the filesystem with node-fs, which makes it lightweight but limits its capabilities.
Edge runtime是由Vercel创建的工具包,旨在帮助Next.js采用边缘计算。它基于JavaScript V8引擎构建,注重安全性和速度。利用V8引擎可以在边缘服务器上实现Edge Functions等功能。然而,它缺乏原生的Node.js API,如使用 node-fs 读取或写入文件系统,这使其轻量化但限制了其功能。
The Edge Runtime is built on top of Web APIs. When developing and testing locally, the Edge Runtime will polyfill Web APIs to ensure compatibility with the Node.js layer on our machines.
Edge Runtime是建立在Web API之上的。在本地开发和测试时,Edge Runtime会使用polyfill技术来确保与我们机器上的Node.js层兼容。

Downsides of Node Runtime on Edge Servers

边缘服务器上使用Node运行时的缺点
Node runtime, compared to lightweight runtimes like Edge runtime, Deno, WebAssembly, and Worker runtime, may not be as efficient for edge computing. Node consumes more memory and CPU. Edge devices have resource limitations and may encounter storage conflicts with larger container images from Node.
与Edge runtime、Deno、WebAssembly和Worker runtime等轻量级运行时相比,Node runtime在边缘计算方面可能不够高效。Node消耗更多的内存和CPU。边缘设备有资源限制,可能会因为Node的较大容器镜像而遇到存储冲突。

Conclusion 结论

Edge computing isn’t a new idea; it’s something we see every day with devices like smart speakers and phones that handle data locally. This concept applies to various devices, from IoT gadgets to robots, as long as they do some local processing while also communicating with the cloud. It’s not just about web apps; edge computing plays a big role in IoT, AI, video analysis, and augmented reality.
边缘计算并不是一个新的概念;我们每天都能看到像智能音箱和手机这样的设备在本地处理数据。这个概念适用于各种设备,从物联网设备到机器人,只要它们在与云端通信的同时进行一些本地处理。边缘计算不仅仅涉及网络应用程序;它在物联网、人工智能、视频分析和增强现实中扮演着重要角色。
So, when we talk about web app at the edge, it’s just a part of this bigger picture. Edge computing is like bringing the brain closer to where the action happens, making things faster and more efficient across many different areas.
所以,当我们谈论边缘网络应用时,它只是这个更大画面的一部分。边缘计算就像将大脑靠近行动发生的地方,使许多不同领域的事物变得更快更高效。