本文共 11000 字，大约阅读时间需要 36 分钟。
by Kevin Kononenko
凯文·科诺年科(Kevin Kononenko)
When you are just getting started with web development, you might wonder, “How exactly do all these new concepts connect to each other when someone types into their browser?”
当您刚开始进行Web开发时，您可能会想： “当有人在浏览器中输入时，所有这些新概念之间如何精确地相互连接？”
Sure, you might know the , but that only gives you a high-level view.
当然，您可能知道的 ，但这只为您提供高级视图。
To help, I wanted to create a full guide that explains the connection between the client-side (the browser) and the server-side (multiple servers).
为了提供帮助，我想创建一个完整的指南，解释客户端(浏览器)和服务器端(多个服务器)之间的连接。
For example, do you know the difference between a server and a database?
例如，您知道服务器和数据库之间的区别吗？
Here’s the deal: the client-server model operates kind of like a microbrewery. And if you can understand the different parts of a microbrewery, then you can understand the basics of web servers.
这就是问题所在：客户端-服务器模型的运行有点像小型酿酒厂。 而且，如果您可以了解微型酿酒厂的不同部分，那么您就可以了解Web服务器的基础知识。
In this microbrewery, your goal is to sell a high volume of beer to bars, liquor stores and supermarkets. You have a variety of customers that will make large orders every week or every month.
在这个微型酿酒厂，您的目标是向酒吧，酒类商店和超级市场出售大量啤酒。 您有各种各样的客户，这些客户每周或每月都会有大笔订单。
This means that customers will call your sales team or send an email every so often with a request. On the internet, this is known as a client. A client does not share any of its computing power with the other members of the network that it is requesting. It just asks for a certain piece of content or functionality.
这意味着客户会经常向您的销售团队打电话或发送带有请求的电子邮件。 在互联网上，这称为客户端 。 客户端不会与请求的网络的其他成员共享其任何计算能力。 它只是要求某些内容或功能。
On the other side of the equation, your brewery operations team exists so that it can brew beer that will meet the demands of the customers. In this situation, they are the server. That means that they await requests from clients, and use their computing power to share the appropriate resources based on the request.
另一方面，您的啤酒厂运营团队存在，因此它可以酿造满足客户需求的啤酒。 在这种情况下，它们就是服务器 。 这意味着他们等待来自客户端的请求，并根据请求使用其计算能力来共享适当的资源。
A common example of a client is a web browser like Chrome. Servers are located in remote location, and are managed by companies like Amazon ().
客户端的常见示例是Chrome之类的网络浏览器。 服务器位于远程位置，并由诸如Amazon( )之类的公司管理。
You might think this is one-dimensional, like “yeah, these are the basics of any buying process!” But as you will see in a moment, it can get a little more complicated as more parties enter the picture.
您可能会认为这是一维的，例如“是的，这些是任何购买过程的基础！” 但是，正如您稍后所看到的，随着更多的参与者进入画面，它可能会变得更加复杂。
As you can see, each side has different roles in the client-server model. The client is the requester, and the server is the respondent.
如您所见，客户端-服务器模型中的每一方都有不同的角色。 客户端是请求者，服务器是响应者。
In a very basic example, a supermarket might send a request like “We need 20 cases of beer.” At some point in the future, your microbrewery will send the response: the beer that was requested.
在一个非常基本的示例中，一家超市可能会发送诸如“我们需要20箱啤酒”之类的请求。 将来的某个时候，您的酿酒厂会发送响应：请求的啤酒。
Similarly, browsers like Chrome send requests to centralized servers, which return the data requested. For example, when you load a page like reddit.com, a server must send a new version of the home page based on the latest upvote and comment data.
同样，Chrome之类的浏览器会将请求发送到集中式服务器，服务器将返回请求的数据。 例如，当您加载诸如reddit.com之类的页面时，服务器必须基于最新的upvote和注释数据发送主页的新版本。
So your next question might be, “How does the Internet handle these requests and responses at scale?”
因此，您的下一个问题可能是： “互联网如何大规模处理这些请求和响应？”
First of all, every device connected to a network (like the Internet) is called a host. Every host has a unique IP address for identification. A DNS server (new type of server) connects a URL like reddit.com to the IP address of a specific server.
首先，连接到网络(例如Internet)的每个设备都称为主机 。 每个主机都有一个唯一的IP地址用于标识。 DNS服务器 (新型服务器)将URL(如reddit.com)连接到特定服务器的IP地址。
When you type in a URL like reddit.com, you are not connecting directly to reddit’s web servers. Instead, you first connect to this DNS server, provided by the hosting company. That server then responds to your request with the specific address of a reddit server. Your browser can now make the request to reddit’s server.
当您输入reddit.com之类的URL时，您没有直接连接到reddit的Web服务器。 而是，您首先连接到由托管公司提供的此DNS服务器。 然后，该服务器使用reddit服务器的特定地址响应您的请求。 您的浏览器现在可以向reddit的服务器发出请求。
Imagine that you are a supermarket making your first beer order from a microbrewery. You can’t just call the brewery floor and order the employees to deliver your beer! Instead, you call a salesperson or support agent that will make sure you understand how the logistics work: which distributor they use, how quickly they can deliver, and so on. The sales agent is like the DNS server, because they will share the process for actually completing an order.
想象一下，您是一家从微型酿酒厂订购啤酒的超级市场。 您不能只打电话给酿酒厂并命令员工交付您的啤酒！ 取而代之的是，您致电销售人员或支持代理，以确保您了解物流的工作方式：他们使用哪个分销商，交付速度如何等等。 销售代理就像DNS服务器一样，因为他们将共享实际完成订单的过程。
After you accept all that, you can make a request to the production team, which specializes in brewing beer.
接受所有条件后，您可以向专门酿造啤酒的生产团队提出要求。
So, in order:
因此，为了：
This is sometimes called “.” It allows each server to execute a specialized function so that each part can work most efficiently.
有时称为“ 。 它允许每个服务器执行专门的功能，以便每个部分都能最有效地工作。
A microbrewery does not handle just one type of request! In any given week, it might be handling:
微型酿酒厂不能仅处理一种类型的请求！ 在任何给定的一周内，它可能正在处理：
Each one of those types of requests must go to a specialized person in the brewery.
这些请求中的每一种都必须交给啤酒厂的专门人员。
Just like a microbrewery, a server has pathways for different types of requests. These are called . Some common port examples include:
就像小型酿酒厂一样，服务器具有处理不同类型请求的途径。 这些称为 。 一些常见的端口示例包括：
Port 25: SMTP (e-mail routing)
端口25：SMTP(电子邮件路由)
Port 80: HTTP (web requests as described above)
端口80：HTTP(如上所述的Web请求)
Port 143: IMAP (email management)
端口143：IMAP(电子邮件管理)
These ports allow hosts on the internet to interact in a standardized way. If there was no common server configuration, the internet would not be able to perform like it does today. Instead, it would force custom configuration to interact with servers from different companies, which would make it harder for end users to interact in a seamless, smooth fashion like they do today
这些端口允许Internet上的主机以标准化方式进行交互。 如果没有通用的服务器配置，互联网将无法像今天一样运行。 相反，它将迫使自定义配置与来自不同公司的服务器进行交互，这将使最终用户像今天一样，以无缝，流畅的方式进行交互变得更加困难
So far, we have covered the path of a single request to a web server. On the front-end, you would write the code in JavaScript, and the server would handle the request using a language like Python or PHP, or a framework like Node.js.
到目前为止，我们已经介绍了单个请求到Web服务器的路径。 在前端，您将使用JavaScript编写代码，服务器将使用Python或PHP之类的语言或Node.js之类的框架来处理请求。
But we have not yet covered the part where the database comes into play! The database is written in SQL or MongoDB, or a range of other languages used to build relational databases. But, it is not stored on the same server that we have been using so far.
但是我们尚未涵盖数据库发挥作用的部分！ 该数据库用SQL或MongoDB或用于构建关系数据库的多种其他语言编写。 但是，它没有存储到我们到目前为止一直使用的同一服务器上。
Let’s return to our microbrewery. The raw materials used to make beer include:
让我们回到微酿酒。 用于制造啤酒的原料包括：
Your brewery might store small quantities of these ingredients on site, but it probably also uses external warehouses. For example, you wouldn’t want to have thousands or tens of thousands of bottles sitting around the brewery. That’s excessive. These ingredients are kind of like the information stored in a database.
您的啤酒厂可能会在现场存储少量这些原料，但也可能会使用外部仓库。 例如，您不希望啤酒厂周围有成千上万的瓶子。 太过分了 这些成分有点像存储在数据库中的信息 。
That external warehouse is kind of like a server that specifically runs a database, or a database server. We separate this functionality as well to make it as efficient as possible.
外部仓库有点像专门运行数据库的服务器或数据库服务器 。 我们还分离了此功能，以使其尽可能高效。
A database is just a digital structure that stores data. But a server provides all the operational protocols that allow that database to participate in a network.
数据库只是存储数据的数字结构。 但是服务器提供了所有允许该数据库参与网络的操作协议。
So, let’s say that a customer makes a big order for 1000 cases of beer. The microbrewery will need to communicate with the warehouse to deliver some more bottles. That is another request-response cycle!
因此，假设某个客户订购了1000箱啤酒。 微型酿酒厂将需要与仓库进行通信，以交付更多瓶子。 那是另一个请求-响应周期！
In this case, a server is acting as both a client AND a server. It is taking a request from an end-user, but also sending a request to another server afterwards. Its response depends on the response of the database server.
在这种情况下，服务器既充当客户端又充当服务器。 它正在接受来自最终用户的请求，但之后还会将请求发送到另一台服务器。 它的响应取决于数据库服务器的响应。
The end user does not see any of this, of course. From their perspective, they sent a request and received a response. They don’t see the server communication behind the scenes.
最终用户当然看不到这些。 从他们的角度来看，他们发送了请求并收到了回复。 他们看不到幕后的服务器通信。
is a cloud service that allows web developers to easily deploy their apps with as little code and ongoing management as possible. It uses , which allow you to rent a fraction of a full server to run your app. But that’s a topic for another tutorial.
是一项云服务，可让Web开发人员以最少的代码和持续的管理轻松部署其应用程序。 它使用 ，使您可以租用一小部分完整的服务器来运行您的应用程序。 但这是另一个教程的主题。
Anyways, Heroku allows you to push your latest commits live to your virtual container with a simple command: git push heroku master. Then, those changes will go live after you purchase a domain from a service like , and connect it to your Heroku app.
无论如何，Heroku允许您通过一个简单的命令将最新提交实时推送到虚拟容器： git push heroku master 。 然后，在您从类的服务购买域并将其连接到Heroku应用后，这些更改将 。
But, if you want to use a database with your live app (you probably will), you will still need a separate hosting solution for that database. I recommend , which has an app in Heroku’s marketplace. ClearDB has a generous free version that scales up as your database grows.
但是，如果您想将数据库与实时应用程序一起使用(可能会使用)，则仍然需要针对该数据库的单独的托管解决方案。 我推荐 ，它在Heroku的市场中有一个应用程序。 ClearDB有一个慷慨的免费版本，可以随着数据库的增长而扩展。
So, if you use this stack, here is what the process would look like when an end user makes a request that requires you to access the database.
因此，如果使用此堆栈，则最终用户发出要求您访问数据库的请求时，流程将是这样。
Did you enjoy this explanation? Give it a “clap”, or sign up here to get the latest tutorials:
你喜欢这个解释吗？ 给它一个“掌声”，或在这里注册以获得最新的教程：
翻译自:
转载地址：http://yikzd.baihongyu.com/