博客

什么是PHP Worker及应该如何使用
在选择托管计划时，选择最符合您的WordPress网站需求的计划非常重要。

例如，一个每月有50,000名访问者的电子商务网站通常比具有相同流量的简单博客对资源的要求要高得多。

这仅仅是因为电子商务网站本质上通常是动态的，并且需要更多资源用于PHP和数据库查询。

这就是PHP worker发挥作用的地方。阅读下文，了解PHP worker是什么以及如何使用它们来加快您网站上请求的处理速度。
什么是PHP worker？

在WordPress的上下文中，PHP worker构建页面、处理计划的后台任务等等。由于PHP worker直接负责生成HTML页面以提供给您网站的访问者，因此他们决定了您的网站在任何给定时间可以同时处理多少个未缓存的请求。

例如，假设您的WordPress站点配备了两个PHP workers，并且没有设置页面缓存。如果四个请求同时到达您的站点，则其中两个请求将立即得到处理，而另外两个则必须在队列中等待，直到前两个请求完成处理。

尽管我们实现了服务器级缓存，但对于绕过或丢失缓存的请求，PHP workers变得非常重要，因为他们必须为每个请求工作。

通常我们会在电子商务和社区论坛网站上看到很多未缓存的请求。因此，这些站点将需要额外的PHP workers来确保处理每个请求而不会出现延迟或超时。

如果您的网站经过高度优化或没有大量PHP代码（例如复杂的主题或大量WordPress插件），那么处理每个请求应该几乎立即发生。即使有2个PHP workers和4个请求，所有4个请求都将很快得到处理。

简单地说，PHP workers是运行PHP代码的服务器上的后台进程。

WordPress如何使用PHP Workers？

在我们讨论如何优化WordPress的PHP worker使用之前，我们必须首先了解WordPress如何使用PHP worker。

未缓存环境中的典型请求如下所示：
1. Web服务器（Nginx或Apache）接收来自访问者的请求。
2. Nginx将请求传递给PHP。
3. PHP根据需要查询MySQL数据库并使用主题的PHP模板生成HTML页面。
4. PHP将呈现的HTML页面交还给Web服务器。
5. 该页面提供给访问者。
在上面突出显示的过程中，第3步是最耗费时间和资源的（CPU和RAM）。具有最少数据库查询和高效PHP代码的高度优化的站点将相对较快地完成第三步。

相反，一个编写糟糕的PHP代码并进行大量不必要的数据库查询的站点将花费更多的时间来完成第3步，这意味着请求将占用PHP worker更长的时间。

PHP Worker与CPU的关系

当谈到WordPress性能时，PHP worker和可用CPU之间的关系是一个需要考虑的重要因素。

如果CPU资源不足是您网站的瓶颈，那么增加PHP worker的数量不会提高您网站的性能——它只会让您的网站同时处理更多请求，而每个请求的性能会降低。

让我解释。

想象一个带有一根软管的消防栓。只需连接一根软管，消火栓就能提供足够的水压。现在，如果我们将十根软管连接到消火栓上会发生什么？

有限的水压分布在十根软管上，这意味着每根单独的软管完成工作所需的水压较小。在这个类比中，消火栓是CPU，软管是PHP worker。

考虑到上述情况，如果您的主机不断建议您增加PHP worker而没有提及CPU，您应该小心。

让我们暂时回到消防栓的比喻。

想象一下，您需要用5根软管扑灭10场火灾。连接所有五根软管后，您会意识到消火栓仍在提供足够的水压。

在这种情况下，连接更多软管是有意义的，因为消火栓的水压不是瓶颈。

同样，如果您的站点在CPU和RAM开销充足的情况下表现不佳，那么您应该考虑增加PHP worker的数量作为提高性能的一种选择。

如何优化您网站的PHP Worker使用

我们已经解释过PHP workers是使用PHP代码生成HTML页面的后台进程。现在，减少和优化PHP workers使用的最明显方法是减少满足对您的站点的请求所需的CPU和PHP资源量。

这是如何做到的。

1. 为您的WordPress网站设置缓存

减少PHP worker使用的第一步是为您的WordPress站点设置缓存层。默认情况下，WordPress是一个动态CMS，可以按需满足每个页面请求。

对于博客、在线杂志和作品集等许多网站，使用PHP为每个请求动态生成页面是不必要的。

页面缓存

您当前正在阅读的博客文章是不需要动态生成的页面的完美示例。与我们的许多其他文章一样，此文章中的内容被设计为静态的，因此无需花费CPU资源来连续生成相同的页面。

相反，最好让PHP生成一次页面然后缓存它。与使用PHP动态生成页面相比，页面缓存具有许多明显的优势。

例如，想象一下，如果您网站上的博客文章在发布后的几个小时内传播开来并获得100,000次页面浏览量。如果没有页面缓存，您的PHP worker可能会不堪重负，您的服务器可能会崩溃。

使用页面缓存，只会动态生成首页视图。其他99,999个请求将从您的页面缓存中提供服务，该缓存使用相对较少的CPU资源。

有两种方法可以为您的WordPress网站设置页面缓存。
1. 使用Nginx等Web服务器进行服务器级页面缓存。
2. 使用WP-Rocket等WordPress插件进行基于插件的页面缓存。
为了获得最佳性能，我们建议尽可能使用服务器级页面缓存，比如使用Nginx的FastCGI缓存模块以获得超快的性能。

如果您的主机不提供服务器级页面缓存选项，则下一个最佳选择是使用WordPress缓存插件在应用程序级别实现页面缓存。

对象缓存

对于无法有效利用页面缓存的WooCommerce商店、社区论坛和其他WordPress站点，在MySQL数据库前添加像Redis这样的持久对象缓存可以提高性能并减少 PHP worker的负载。

如果没有持久对象缓存，MySQL数据库查询将为每个请求执行，即使结果与前一个查询相同。

例如，绕过页面缓存的社区论坛站点将对数据库进行单独的相同查询以获取帖子数据以构建页面。

对于高流量和大量数据库的站点，这种查询数据库的方法效率低下，因为它使用PHP worker为单独的请求生成相同的查询结果。这就是Redis的用武之地。

Redis将数据库查询的结果存储在RAM中，这允许PHP抓取已经执行的查询结果。这种对象缓存方法允许PHP worker节省CPU资源并花费更少的时间来完成请求，因为它消除了重复数据库查询的需要。

2. 优化你的PHP代码

除了设置页面缓存之外，另一个可以帮助您减少PHP worker使用的策略是优化您的PHP代码。在WordPress的上下文中，“优化PHP代码”可能意味着各种不同的东西，所以让我们更深入地了解一下。

WordPress最受欢迎和最讨厌的功能之一（取决于你问谁）是它通过插件和代码片段的可扩展性。

如果您想向您的WordPress网站添加股票行情小部件，可以使用插件。同样，如果您想添加自定义字体，也有一个functions.php代码片段。

使用附加功能扩展WordPress核心变得如此容易，以至于我们经常过火而没有考虑对网站性能的潜在影响。

因此，优化PHP代码的第一种方法是执行站点范围的审核，以确定哪些插件和代码片段是真正需要的。

选择优质插件

通常情况下，WordPress网站上的插件数量并不像插件的质量那么重要。如果插件在过去六个月内没有更新，我们建议选择另一个符合要求的插件。

这样做的原因是WordPress正在不断改进。如果一个插件多年没有更新，很可能它的代码没有使用最新的WordPress开发和安全最佳实践。

相反，如果插件每隔几周不断更新，那么开发人员很可能会认真对待质量，这使其成为您的WordPress网站的不错选择。

仅在需要时使用插件

如果您希望在您的网站上执行一项简单的任务，例如添加JavaScript或CSS，那么您并不总是需要插件。相反，您可以将代码直接添加到主题的PHP模板或带有子主题的style.css文件中。

下次当您考虑安装插件时，请先花一些时间看看它是否100%必要。有时，没有办法安装另一个插件，这没关系。其他时候，您可以通过不安装不必要的插件来避免添加额外的代码膨胀。

选择轻量级主题

根据我们监控数千个WordPress网站的经验，我们发现主题偶尔会导致PHP性能不佳。为了迎合WordPress作为通用CMS的多功能性，一些开发人员对主题进行编码以适用于各种用例。

通常，这会导致代码繁重且臃肿的主题无法有效地使用PHP和数据库查询。

当建立一个WordPress站点，它是重要的选择一个主题，这是最高效的，可定制的- GeneratePress，OceanWP和Astra有三个例子。

3. 选择一个注重性能的WordPress主机

信不信由你，选择正确的WordPress主机会对您网站的性能产生巨大影响。由于PHP worker的效率与CPU和RAM直接相关，因此将您的网站托管在具有最新硬件的现代服务器上可以帮助您优化 PHP 工作者的使用。

以下是两个示例，说明为什么选择以性能为中心的主机对您的WordPress网站很重要。

高性能CPU

PHP使用CPU资源来执行代码。更快的CPU意味着更快的代码执行。

快速SSD存储

磁盘I/O速度会对代码执行和数据库查询产生直接影响。如果您的数据库存储在速度较慢的机械磁盘或基于云的SSD上而没有足够的IOPS（每秒输入/输出操作），您的 PHP 工作人员将被迫花费更多时间来满足请求。

4. 与绩效专家合作（可选）

如果您不确定如何解决网站上的性能问题，我们建议您与合格的性能专家合作来诊断问题。

专家可以通过使用New Relic或WordPress插件Query Monitor等高级监控工具来帮助您识别代码中的特定瓶颈。

通过放大和检查单个PHP进程和数据库查询，可以识别给您网站的PHP worker带来高负荷的特定代码块及其相关功能。

总结PHP worker优化，请记住以下提示。
1. CPU和RAM应该与PHP worker一起扩展。如果CPU使用率锁定在100%，添加更多PHP workers不会提高性能。
2. 使用注重性能的主机托管您的网站可以解决许多性能问题。
3. 页面缓存和对象缓存可以显着减少PHP工作负载。
4. 使用优质的WordPress插件和主题可以减少您网站上不必要的代码膨胀量。
5. 如有必要，请与性能专家合作以识别和解决复杂问题。
PHP Workers不足的结果

为了让您的WordPress网站获得快速可靠的性能，确保它有足够的PHP workers非常重要。当PHP worker已经在一个站点上忙碌时，他们开始建立一个队列。

一旦达到PHP worker的限制，队列就会开始推出较旧的请求，这可能导致504错误或不完整的请求。

由于缺少PHP worker，我们看到的另一个常见错误是502 bad gateway errors。这些与504错误略有不同，因为错误发生在PHP工作队列中的60秒超时之后。

这些错误不仅会给访问者带来糟糕的用户体验，还会对您网站的SEO产生负面影响。

502（错误网关）错误

有许多不同的因素会导致页面加载缓慢或错误。例如，如果未缓存的请求需要来自数据库的大量数据，则生成的查询可能需要20-30秒才能完成。

在这种情况下，一个PHP worker至少会被占用半分钟。如果您的站点只有两个PHP worker，那么这些长请求中的两个或三个就足以开始导致错误。

为了解决这个问题，优化MySQL数据库并在CPU尚未达到极限的情况下增加PHP worker可以提高性能。

估计所需PHP worker的数量

一般来说，以静态内容为主的站点——文章、静态页面和作品集——不需要很多PHP worker。

对于具有更多动态功能（如电子商务或论坛）的大型WordPress网站，我们发现4个PHP worker是一个很好的起点。但是，这可能因站点而异，因为每个站点都有自己独特的一组主题、插件、数据库查询和缓存与未缓存的比率。

在某些情况下，可能需要更多的PHP worker才能获得快速和可靠的性能。

PHP Worker限制图表

部分主机服务商会提供PHP worker限制图表可让您查看PHP引擎在其错误日志中报告达到最大分配worker数量的次数。此图表可以帮助您衡量性能优化是否会影响您的PHP worker使用情况。

顶级缓存绕过

例如，如果您将站点的PHP版本从5.6切换到7.4，您可能会看到PHP worker限制下降，因为PHP 7.4比5.6快得多。

同样，如果您与性能专家合作修复长数据库查询并切换到更轻量级的主题，您可以使用PHP worker限制图表查看优化前后的差异。

缓存分析图

您还可以使用服务器提供商的缓存分析报告（如果有）来确定缓存命中、绕过、未命中和过期的数量。在优化您的网站对PHP worker的使用时，此数据可能特别有用。

使用查询字符串绕过缓存

默认情况下，带有查询字符串的URLhttps://kinstalife.com/?query=123会绕过页面缓存。在某些情况下，查询字符串可能会导致不必要的PHP和CPU使用率大幅上升。

例如，如果您访问Facebook的链接，您通常会在URL的末尾看到查询字符串?fbclid=。同样，单击电子邮件通讯中的链接后，您可能会看到UTM跟踪参数。

带有查询字符串 (?querystring=123) 的URL

如果您网站上的帖子病毒式传播，并且不断通过查询字符串访问，您将能够使用缓存分析报告识别特定URL。

使用该关键信息，您可以强制缓存该特定URL，以减少PHP worker的负载。

识别资源密集型插件

在某些情况下，缓存分析图还可用于识别资源密集型插件和进程。

例如，如果您看到顶部缓存绕过URL指向特定插件目录中的文件，则该插件很可能是导致PHP worker使用率高的原因。

如果您在缓存绕过列表中看到大量与插件相关的请求，您可以与开发人员合作解决问题或切换到使用较少资源的插件。

小结

维护快速WordPress网站的目标是最大限度地提高后端的效率。当通过在worker数量、CPU使用率和代码优化之间找到平衡来正确利用PHP worker时，WordPress可以成为一个非常高性能的CMS。
2023年1月13日
WordPress Cookies和PHP会话——你需要知道的一切
Cookies是由一位名叫Lou Montulli的计算机程序员于1994年首次发明的。没有它们，网络将是一个完全不同的地方。无论您是登录WordPress网站的后端还是关闭烦人的弹出窗口，您每天都会使用cookie并与之交互（即使您没有意识到）。

到目前为止，您可能已经猜到，当我们提到cookie时，我们指的是用于在网站上存储重要访问者信息的cookie ，而不是美味的巧克力片。

今天我们将深入探讨cookie和PHP会话这个有时令人困惑的话题。具体来说，您需要了解有关WordPress如何使用它们的所有信息，以及在托管您的网站、自定义代码或使用第三方插件时应该注意的一些常见问题（尤其是作为开发人员）。在我们看来，这个话题讨论得还不够。

什么是Cookie？

cookie（也称为网络cookie、跟踪cookie、HTTP cookie、浏览器cookie）是用户浏览器（Chrome、Firefox 等）在访问网站时存储的一小段数据。它包含有关浏览活动的信息，通常用于个性化用户体验或用于身份验证和验证目的。会话cookie和持久性cookie是常见的cookie类型。
Cookie的类型

通常设置两种不同类型的cookie：会话cookie和持久性cookie。

会话Cookie

会话cookie，也称为临时cookie，是临时的。它们没有附加到期日期，仅存储有关用户在单个会话期间所做操作的信息。会话只是当有人访问网站时分配的随机生成/唯一值。会话cookie临时存储在内存中，并在浏览器关闭或会话结束时自动删除。

持久性Cookie

正如您可能已经猜到的那样，持久性cookie是那些包含过期日期的cookie。这些持续时间更长，并存储在磁盘上，直到它们过期或由用户手动清除 。这些有时也称为“跟踪cookie”，因为这些是Google Analytics、AdRoll、Stripe等都使用的cookie类型。

我们的返利联盟计划是另一个例子。当用户点击附属链接时，会在用户的浏览器中放置一个60天的cookie。这可以确保推荐人获得适当的信用，即使此人已多次关闭并重新打开其浏览器。

WordPress核心如何使用Cookie

当我们提到WordPress核心时，我们只是指在安装任何第三方插件或主题之前构成开源项目的文件。它是我们喜欢称之为自然状态的WordPress。

现在您已经了解了cookie是什么以及不同类型的基础知识，让我们来看看WordPress核心为什么以及如何使用它们来使所有这些魔术在幕后发生。有趣的事实Cookie最初源自“magic cookie”一词。

WordPress核心将cookie用于两个不同的目的：

1. 登录Cookie

登录cookie包含身份验证详细信息，并在用户登录WordPress管理仪表盘时使用。根据WordPress Codex，设置了几个不同的会话cookie：
- 登录时，WordPress使用wordpress_[hash]cookie存储身份验证详细信息（仅限该/wp-admin/区域）。
- 登录后，WordPress设置wordpress_logged_in_[hash]cookie。这表明您何时登录以及您是谁。
当您尝试访问WordPress网站的后端时，会检查上述两个cookie是否存在并且尚未过期。这就是让您神奇地绕过 wp-login.php页面的原因。

WordPress还设置wp-settings-{time}-[UID]cookie。ID是WordPress用户数据库表中的用户ID。这存储个人仪表板和管理界面设置。

2.评论Cookie

默认情况下，当有人对博客文章发表评论时会设置cookie（有效期为347天）。因此，如果他们稍后回来，他们不必重新填写所有信息。存储了以下三个cookie：
- comment_author_[hash]
- comment_author_email_[hash]
- comment_author_url_[hash]
但是，由于GDPR最近对隐私政策进行了更改，WordPress核心引入了新工具，以确保您让用户选择加入这些正在设置的cookie。此设置（如果尚未设置）可以在WordPress管理仪表盘的“设置 → 讨论”下启用。选择“显示评论cookies复选框，允许设置评论者cookies。”选项。流行的Akismet插件还允许您显示隐私声明。

评论cookie如何选择加入

第三方WordPress插件和主题如何使用Cookie

就像WordPress将cookie用于某些功能一样，您安装的第三方插件和主题也会设置cookie。他们中的大多数使用存储在wp_options表或他们自己的自定义表中的浏览器cookie和数据库行的组合。这是因为WordPress是无状态的。

无状态应用程序是一种应用程序，它不会保存在一个会话中生成的客户端数据，以便在与该客户端的下一个会话中使用。每个会话都像第一次一样进行，响应不依赖于前一个会话的数据。–TechTarget

有了新的隐私法，真正了解设置了哪些cookie以及它们是否为访问者提供了选择加入的方式比以往任何时候都更加重要。提示：并非所有cookie都需要选择加入。

以下只是cookie用途的众多示例中的几个：
- 如果您的WordPress网站上有一个弹出框并且访问者将其关闭，这通常会设置一个cookie，以便它不会再次出现。
- 在您的电子商务网站上添加到购物车的商品。存储cookie以便购物车在您继续浏览网站时保留您的产品。
- IP地理位置功能可能会存储浏览该站点的访问者的IP地址和纬度/经度坐标。这通常用于向特定区域显示特定内容，甚至可能将用户重定向到不同的子站点。
- 使用PrettyLinks插件等链接缩短器跟踪点击活动。
- 如果用户已经订阅，通讯插件可能会为他们设置一个cookie，这可以完全隐藏通讯框。
基本上，在WordPress网站上的任何操作或选择加入，通常都会涉及在幕后在浏览器中设置cookie。当然，这样做的目的是尝试帮助改善浏览器体验或通过验证提供额外的功能。

WooCommerce Cookie

诸如WooCommerce之类的电子商务插件通常会设置自己的附加cookie，以便买家可以轻松地将商品添加到购物车、存储以供以后结帐以及登录和退出帐户。

为了跟踪购物车数据，WooCommerce设置了以下三个cookie （cookie中不存储个人信息）：
- woocommerce_cart_hash
- woocommerce_items_in_cart
- wp_woocommerce_session_
前两个cookie包含有关购物车的信息，只是帮助WooCommerce知道购物车数据何时更改。第三个cookiewp_woocommerce_session_包含每个客户的唯一代码，该代码对应于数据库中自定义wp_woocommerce_sessions表中的条目。

wp_woocommerce_sessions表

wp_commerce_session_数据之前存储在wp_options表中，但在WooCommerce 2.5中引入了新的会话处理程序时，它们被移动到了自己的自定义表中。这是为了提高性能、可伸缩性和会话管理。否则，您很快就会得到一个必须清理的臃肿的wp_options表。

Easy Digitial Downloads Cookie

Easy Digital Downloads默认使用WP_Session，它是浏览器cookie和存储在wp_options表中的数据库行的组合。下面是它设置的cookie：
- edd_items_in_cart
Cookie和WordPress缓存

说到WordPress缓存，这就是事情变得棘手的地方。缓存本质上是存储来自一个请求的资源并将这些资源重用于后续请求的过程。基本上，它减少了生成页面视图所需的工作量。虽然这对性能很有好处，但在涉及cookie时会引起问题。

为什么？因为cookie用于执行特定操作，例如在您浏览WooCommerce网站时保持购物车的填充。但是，如果页面是从缓存中提供的，那么PHP和数据库都不会做任何事情，服务器只会提供页面的静态副本。

所以，你可以做什么？

1. 使用JavaScript

第一个选项是使用JavaScript并动态更新页面上的内容。基本上，您有HTML占位符并使用JavaScript通过API或ajax调用获取信息。

一个示例是通过使用JavaScript在wp-api上获取文章列表，然后在侧边栏中呈现它们，从而在WordPress侧边栏中加载文章列表。在这种情况下，您可以在不从缓存中清除页面的情况下更新文章列表，因为数据是动态生成的。

虽然这并不理想，但在性能方面，如果可能的话，缓存总是更好。但是，如果您必须让一些内容保持动态，而页面本身可以保持静态（从缓存中提供），这是一种方法 – 使用JavaScript通过API/ajax动态下拉页面该部分的内容称呼。但是，除非您可以聘请WordPress开发人员来构建自定义JavaScript解决方案或插件扩展，否则此选项通常不实用。

2. 使用Admin-Ajax调用

Admin-ajax.php无法缓存，因此您可以使用admin-ajax调用。No Cache AJAX Widgets插件就是一个很好的例子。它进行admin-ajax调用，因此不必担心与服务器级或第三方缓存解决方案发生冲突。

然而，就像使用JavaScript一样，沿着这条路线走对于普通用户来说通常是不可行的。它还可能导致其他性能问题，例如高admin-ajax使用率和大量未缓存请求。

3. 从缓存中排除页面（当Cookie存在时）

除非您可以使用JavaScript或admin-ajax路由，否则当存在特定cookie时将页面从缓存中排除是最好的方法。这通常是我们推荐的，尤其是那些运行高度动态网站的网站，例如WooCommerce和Easy Digital Downloads。

在设置缓存的时候，我们应该将某些WooCommerce和Easy Digital Downloads页面（例如购物车、我的帐户和结帐）设置自动从缓存中排除。比如设置服务器级别的规则，以便用户在检测到woocommerce_items_in_cartcookie 或 edd_items_in_cartcookie时自动绕过缓存，以确保顺利和同步的结帐过程。

当我们检测到有人登录WordPress时，我们还会侦听相关的登录cookie并将缓存设置为绕过。这可以防止后端仪表板意外被缓存。

默认情况下，我们不会wp_woocommerce_session_从缓存中排除cookie。根据我们的经验，大多数WooCommerce网站都没有任何问题。这还通过增加缓存HIT比率来提高性能，同时使用更少的PHP workers。

但是，由于有许多不同的WordPress主题和插件配置，wp_woocommerce_session_如果需要，我们可以从缓存中排除cookie。只需联系我们的支持团队。结果是，一旦用户将产品添加到他们的购物车中，所有后续请求都不会从缓存中得到处理，从而增加了PHP worker的使用率。

如果您需要从缓存中排除的自定义页面，请随时与我们的支持团队开票。同样，您必须小心excludes。太多未缓存的页面确实会降低性能。

如何查看和清除Cookie

在网站上查看和清除cookie很容易。要查看在特定站点上设置了哪些cookie，请浏览到该站点并单击顶部的小挂锁图标。然后点击“Cookie”。

正在使用的Cookie

然后深入到该网站的文件夹。在下面的示例中，您可以看到我们设置了一些WooCommerce cookie以及 wordpress_logged_in_[hash]cookie。您还可以查看过期时间以及它是持久cookie还是会话cookie（浏览会话结束时）。

WordPress cookie

要删除cookie，只需单击单个cookie并单击“删除”按钮。您也可以在文件夹级别或Chrome DevTools中执行此操作。

清除cookie还可以帮助您修复304错误。

或者，您可以在浏览器中搜索或清除所有cookie。

GDPR和Cookie

GDPR是一项新的隐私法，于2018年5月25日生效。它旨在让公民重新控制他们的个人数据。

下面是一个为帮助遵守新法律所做的一项更改的示例。当您第一次访问我们的网站时，您可能已经看过它，您会在屏幕底部看到“ACCEPT Cookies”提示。这是因为我们现在被法律要求为用户提供一种选择加入和选择退出设置的cookie的方式。在不通知用户数据收集的情况下只运行您想要的任何东西的日子已经一去不复返了。

如果您单击“ACCEPT Cookie”，则会为用户设置所有Cookie。如果您单击“Cookie Setting”，我们现在会提供一种方式来选择加入和退出您想要的任何Cookie。

Cookie设置

很漂亮吧？我们的cookie解决方案是由我们的开发人员内部构建的，但这里有一些有用的GDPR WordPress插件，可以帮助您完成类似的事情。同样，Cookie只是完全符合 GDPR 的一小部分。

PHP会话

PHP会话是标准cookie方法的替代方案。它仍然是一个cookie，但它被称为PHPSESSID，通常存储在Web服务器本身的/tmp/目录中。服务器知道将给定会话与给定请求相关联的方式是它也存储在HTTP cookie中。

PHPSESSID HTTP cookie

这也可以在站点的HTTP标头下看到。

HTTP标头设置cookie PHPSESSID

PHP session很像一个普通的session，它在用户关闭浏览器时结束。

PHP会话的问题都归结为性能和缓存问题。存储在浏览器cookie中的信息必须随着每个请求来回反弹，以便服务器知道用户是谁。这意味着对于使用PHPSESSID的站点，主机必须设置PHPSESSID以绕过缓存。然而，结果是PHPSESSID必须设置为100%的时间绕过，因为与 wordpress_logged_in不同的是，PHPSESSID是在每个PHP请求上设置的。

所以想象一下，wordpress_logged_in必须设置100%的时间才能允许登录功能正常工作。这意味着即使是注销的用户也必须拥有cookie，并且它必须对他们来说是唯一的。想象一下，为了使WordPress登录系统正常工作，这是必需的。在这种情况下，每个页面视图都必须绕过缓存，以便wordpress_logged_in为登录和注销的用户正确设置cookie。

这就是使用PHPSESSID的问题。因为它是在每一个PHP请求上生成的，所以如果一个站点依赖于PHPSESSID cookie，主机将不得不设置PHPSESSID以100%的时间绕过缓存。否则，PHPSESSID最终会被缓存，并且会破坏依赖它的任何功能。

我们不建议使用PHP会话，PHP会话还具有其他应考虑的安全隐患。

如果您在您的网站上看到代码使用session_start，这意味着它使用PHP会话。

许多插件和主题开发人员已经开始使用浏览器cookie和数据库行的组合（在wp_options表中或他们自己的自定义表中）。如果您需要会话数据，这是更好的方法。

小结

希望现在您比以前更了解WordPress cookie和PHP会话的工作原理。Cookies目前是让世界运转的东西，对于WordPress网站上发生的几乎所有事情都很重要。从让我们保持登录状态，到确保顺畅的购物车体验，甚至确保弹出窗口保持关闭状态。
2023年1月13日
学习如何使用Sublime Text：快速概述
Sublime Text是世界上最受欢迎的文本/代码编辑器之一。它充满了强大的功能，例如多行编辑、为数十种编程语言构建系统、正则表达式查找和替换、用于开发插件的Python API等等。

最重要的是，它是跨平台的（Mac、Windows 和 Linux），并且作为“共享软件”分发，这意味着它可以通过偶尔的购买弹出窗口免费使用。

在本文中，您将学习如何使用Sublime Text来满足您所有的文本和代码编辑需求！
什么是Sublime Text？

Sublime Text将自己标榜为“用于代码、标记和散文的复杂文本编辑器”。Sublime Text最初于十多年前于2008年1月发布，现在是第四个主要版本，支持Mac、Windows和Linux。

Sublime Text的核心类似于一把瑞士军刀，可以应用于任何涉及文本操作的用例或问题。

乍一看，Sublime Text似乎是一个只对开发人员有用的文本编辑器。虽然它对于开发人员来说是一个很棒的工具，但对于作家和博主来说，它也是一个强大的应用程序。

在深入探讨Sublime Text的所有特性和功能之前，让我们快速浏览一些Sublime Text可能有用的场景。

正则表达式查找和替换

Regex是正则表达式的缩写，是一种用于指定搜索模式的语法。正则表达式通常用于定位相似（但不同）的文本字符串以进行文本编辑。

例如，如果您想从文档中删除所有HTML<h1>标记，则搜索每个要删除的标记（例如、<p>、<span>等）将非常耗时。

相反，您可以使用单个正则表达式模式执行搜索。在这种情况下，正则表达式模式[a-zA-Z0-9]可用于查找文档中的所有HTML标记。

在Sublime Text中查找和替换文本

在Sublime Text中执行正则表达式查找和替换非常简单。在菜单栏中，单击Find > Find in Files中查找。接下来，在查找和替换菜单中启用正则表达式模式，在“Find”字段中指定正则表达式模式，选择，然后根据您需要完成的任务<current file>单击Find或Replace。

快速运行代码

与传统的文本编辑器不同，Sublime Text允许您直接在应用程序中运行代码。这对于小型 Bash或Python脚本等简单项目特别有用。

例如，如果你正在编写一个简单的Python脚本来从URL列表中抓取数据，那么设置一个单独的终端来调试代码不如直接在Sublime Text中运行脚本方便。

在Sublime Text中运行代码

要在Sublime Text中运行代码，请转到Tools > Build System，然后为您的代码选择语言（Sublime支持各种语言，如Python、Ruby、Bash等）。接下来，在Mac上按Cmd+B或在Windows上按Ctrl+B运行您的代码。

多行编辑

在各种情况下，您可能需要同时编辑文本文档中的多行。想象一下，您有一个domain列表，并且您需要在每一行前面添加http://。当然，您可以逐行进行，但这可能需要很长时间。

Sublime Text中的多行编辑

使用Sublime Text，您可以选择所有要编辑的行，按Shift+Cmd+L，然后同时编辑每一行！

如您所见，虽然Sublime Text内置了面向开发人员的高级功能，但还有各种强大的工具，如正则表达式支持和多行编辑，无疑对非开发人员也很有用。

现在您已经大致了解了Sublime Text可以做什么，让我们更深入地了解并了解有关该应用程序的更多信息。

文本片段

Sublime Text拥有的最强大的功能（尤其是对于编码人员）可能是文本片段。

我们都知道编写代码有时会很麻烦。Sublime Text Snippets提供了一种快速简便的方法来插入将在任何项目中重复出现的文本块。

使这些文本片段变得更好的是它们易于理解且编写起来非常简单。该工具可帮助开发人员在开发过程中节省时间并消除许多错误。

键入“trigger”词并按tab按钮开始一个片段。

如何下载Sublime Text

Sublime Text可从Sublime Text官方网站免费下载。话虽如此，Sublime Text在技术上并不是“免费软件”。相反，Sublime Text是一个“共享软件”应用程序，这意味着它可以免费下载，但一段时间后可能会有一些功能限制。

对于Sublime Text，该应用程序将无限期地继续运行，但您偶尔会看到一个弹出窗口，其中包含有关如何购买该应用程序的详细信息。

如果您有兴趣购买Sublime Text，您可以以99美元的价格获得个人许可证，或以65美元/座位/年的价格获得商业许可证。虽然付费许可证不会解锁任何额外的核心功能，但您确实可以获得以下特权：
- 没有购买提醒弹窗
- 访问Sublime Text的开发版本
- 应用内更新通知
Sublime Text 101 – 基础

由于Sublime Text在功能方面是如此拥挤的应用程序，因此我们将讨论两个用户子集（作家和开发人员）的基本功能和工作流程。但首先，让我们在分支到用户特定项目之前建立对Sublime Text的核心理解。

如何自定义Sublime Text设置

与其他具有图形设置菜单的应用程序不同，Sublime Text设置完全基于文本。要查看您的Sublime Text设置，请转到Sublime Text > Preferences，然后单击Settings。然后，您应该会看到这样的文档：

Sublime Text设置

这个设置文档起初可能看起来令人生畏（特别是如果您不习惯使用面向开发人员的工具），但现在我们将帮助您理解所有内容！

Sublime Text的设置以JSON格式存储。JSON是一种用于存储键值信息的行业标准格式，因此您之前可能已经在其他地方看到它使用过。JSON将信息存储到键值数组中，如下所示：

{

“color”: “blue”,

“type”: “sedan”,

“seats”: 5,

}

{
“color”: “blue”,
“type”: “sedan”,
“seats”: 5,
}
```
{
“color”: “blue”,
“type”: “sedan”,
“seats”: 5,
}
```
上面的数组可以用来描述汽车的属性——在本例中，是一辆有五个座位的蓝色轿车。类似地，JSON数组可以为应用程序指定设置，这正是Sublime Text所做的。

让我们回到Sublime Text设置文件。如您在上面的屏幕截图中所见，设置文件显示为两个JSON数组。左边的数组包含Sublime Text的默认设置，而右边的数组包含自定义用户设置。

通常，您永远不应该直接更改默认设置。相反，您可以使用自定义设置覆盖默认设置——这允许您在出现问题时恢复为默认设置。

那么，您将如何更改一些默认设置？假设您要进行以下更改：

“font_size”: 10 to “font_size”: 20

“font_size”: 10 to “font_size”: 20
```
"font_size": 10 to "font_size": 20
```
“margin”: 4 to “margin”: 6

“margin”: 4 to “margin”: 6
```
"margin": 4 to "margin": 6
```
“line_numbers”: true to “line_numbers”: false

“line_numbers”: true to “line_numbers”: false
```
"line_numbers": true to "line_numbers": false
```
要进行这些更改，请将每个元素以有效的JSON格式添加到自定义用户设置文档，如下所示（如果您有现有的自定义设置，请添加每个设置而不创建新数组）：

{

“font_size”: 20,

“margin”: 6,

“line_numbers”: false,

}

{
“font_size”: 20,
“margin”: 6,
“line_numbers”: false,
}
```
{
"font_size": 20,
"margin": 6,
"line_numbers": false,
}
```
如果您不确定设置的格式是否正确，可以使用JSONLint等在线工具来验证您的JSON数组。指定设置后，保存文件，一切就绪！

Sublime Text中的项目和文件管理

在处理项目时，无论是一系列博客文章还是Web应用程序的源代码，您的文件通常都组织在项目文件夹中。Sublime Text考虑并提供了一个用于管理文件和目录的功能图形界面。

假设您有一个名为“my-sublime-text-project”的文件夹，如下面的屏幕截图所示。如果将此文件夹拖放到Sublime Text中，您将能够直接在Sublime Text中创建新文件和文件夹。

Sublime Text项目

如您所见，“my-sublime-text-project”文件夹可以在“Folders”下的Sublime Text窗口的左侧看到。

Sublime Text中的文件和文件夹管理

右键单击项目文件夹会弹出一个子菜单，可让您创建新文件、重命名文件、创建和删除文件夹等。Sublime Text的内置文件管理功能无需使用 Finder 等外部工具来执行基本文件管理任务。

创建文件和文件夹

在Sublime Text中，项目是指导入的文件和文件夹的集合（例如我们之前导入的“my-sublime-text-project”文件夹。如果您单击菜单栏中的Project，您会看到有诸如“Open Project”、“Switch Project”和“Save Project As”。但是，没有创建新项目的选项。

这是因为当您创建新文件并导入文件夹时，会隐式创建Sublime Text项目。在上面的例子中，我们可以点击菜单栏中的Project，然后点击Save Project As来保存项目。

面向编辑作者的Sublime Text

突出文件管理

突出文件管理和项目管理功能如何组织内容。例如，作者可以为书中的每一章创建一个文件，而博主可以为不同类别的帖子创建不同的文件夹。

强大的搜索引擎和替换

Sublime Text具有强大的搜索和替换实现。它不仅支持正则表达式，还可以指定要搜索的文件和文件夹。例如，如果作者想要更改故事中人物的名字，他们可以指定搜索文件夹并在文件夹的所有内容上运行搜索。

非常可扩展

Sublime Text是可扩展的，它的MarkdownEditing包对于使用Markdown语法的作者来说是一个很好的工具。

面向开发人员的Sublime Text

丰富的插件生态系统

Sublime Text有一个丰富的插件生态系统，可以通过内置的包管理器访问。开发人员可以安装插件来改进他们的工作流程。例如，Formatter插件包括HTML、CSS、JS、Python和其他语言的格式化规则。

该插件可以配置为自动格式化源代码文件，这有助于在格式化方面保持代码整洁和标准化。

还有几个必须考虑的插件包括Package Control（安装插件所需）和Emmet。

多行编辑

Sublime Text提供多行编辑，可以通过在Mac上按住Command（在Windows上为Ctrl）并使用鼠标选择多行来访问。选择多行后，可以一次编辑所有行，甚至支持多行复制/粘贴。

拆分窗口支持

Sublime Text支持拆分窗口以同时查看和编辑多个文件。在处理项目时引用不同的文件时，这可能很有用。

支持构建系统

Sublime Text附带对构建系统的支持。构建系统允许您直接在Sublime Text编辑器的终端中运行代码，而无需外部终端。

例如，您可以创建一个构建系统来运行Python程序，并创建另一个构建系统来运行Go程序。在开发应用程序时，您可以选择构建系统并使用快捷方式直接从Sublime Text运行程序。

更多主题可定制性

您可以通过下载Sublime Text主题进一步增强您的编码体验。它们中的大多数已经捆绑了各种配色方案。

Sublime Text的主题和配色方案之间的区别在于，主题装饰了核心UI元素，如侧窗格、选项卡、菜单等，而配色方案负责语法高亮。

一些最好的主题包括：
小结

Sublime Text是当今最流行的代码编辑器之一。理所当然地，它为作家和开发人员提供了大量的工具可供使用。

没有什么比找到完美的代码编辑器更令人满意的了。如果您从未尝试过Sublime Text，那么值得一看。
2023年1月13日
构建自定义古腾堡区块：权威WordPress区块开发教程
许多人抱怨开始构建古腾堡区块和应用程序的障碍。学习曲线陡峭，主要是由于开发环境的安装和配置困难。此外，扎实的JavaScript、Node.js、React和Redux知识是这个相当复杂的秘诀的必备要素。

官方的WordPress区块编辑器手册为开发人员提供了大量信息，但您可能会发现自己迷失在这些细节的海洋中。

值得一提的是，Gutenberg项目的首席架构师Matías Ventura在接受WP Tavern采访时所报告的内容：

虽然有些人可以快速学习它，但这对人们来说仍然是一个很大的障碍。我认为这有几个层次；文档在组织和演示方面可能要好一个数量级。我希望我们可以在那里做更多的事情。

考虑到这一点，我们决定提供一个分步教程，旨在帮助我们的读者开始使用Gutenberg区块开发。
古腾堡区块开发先决条件

对于本教程，唯一需要的技能是对WordPress插件开发有很好的了解，并且至少对HTML、CSS、JavaScript和React有基本的了解。

这会是一个雄心勃勃的项目吗？你打赌它会的！

在完整性和简单性之间找到正确的折衷方案或决定包含哪些主题和省略哪些主题并不容易。

希望中高级读者能原谅我们没有深入研究某些概念，例如React状态、Redux存储、高阶组件等。这些主题需要额外的空间和注意力，并且可能对于开始区块开发来说太高级了（除非您是 React 开发人员）。

出于同样的原因，我们不会涵盖与Gutenberg区块开发相关的一些更高级的主题，例如动态区块和元框。

有了本文结尾您将获得的知识，您将能够立即开始享受乐趣并提高工作效率。

一旦您开始构建区块，您将准备好进一步提高您的技能并自行构建更高级的古腾堡区块。

什么是古腾堡区块？

自2018年12月首次发布以来，区块编辑器在各个方面都得到了极大的改进：更强大的API、更高级的用户界面、改进的可用性、大量新区块、全站点编辑的首次实现等等.

简而言之，即使古腾堡仍在大力开发中，它也已经走过了漫长的道路——如今，区块编辑器已成为可靠的功能性页面和网站构建器的成熟候选者。

从开发人员的角度来看，Gutenberg是一个基于React的单页应用程序(SPA)，它允许WordPress用户在WordPress中创建、编辑和删除内容。但是，这不应该让您想到传统内容编辑器的增强版。

我们想明确这一点：

Gutenberg不是常规的WYSIWYG编辑器。相反，它重新定义了WordPress中的整个编辑体验。

在古腾堡，内容被划分为区块，这些区块是用户可以用来创建文章和页面或整个网站的“砖块”。

但从技术上讲，什么是区块？

我们喜欢WordPress的定义：

“区块”是用于描述标记单元的抽象术语，这些标记单元组合在一起形成网页的内容或布局。这个想法将我们今天在WordPress中实现的概念与短代码、自定义HTML和嵌入发现结合到一个一致的API和用户体验中。

标题、段落、列、图像、画廊以及构成编辑器界面的所有元素，从侧边栏面板到区块工具栏控件，都是React组件。

那么，什么是React组件？W3Schools提供以下定义：

组件是独立且可重用的代码。它们的用途与JavaScript函数相同，但独立工作并通过render()函数返回HTML。

在WordPress 5.8中使用Gutenberg区块

虽然Gutenberg提供的编辑体验与经典的WordPress编辑器相比是全新的，但WordPress将您的内容片段存储在数据库中的方式根本没有改变。这是因为Gutenberg是一个在WordPress中运行的应用程序，但不会改变CMS的核心工作方式。

使用Gutenberg创建的文章（包括文章、页面和自定义文章类型）仍存储在wp_posts表中，与经典编辑器完全相同。

但是在使用Gutenberg创建的文章中，您会在表格中找到更多信息，这些信息代表了通过Classic Editor与Gutenberg创建的文章之间的根本区别。

这些信息看起来像HTML注释，它们有一个特定的功能：分隔区块：

代码编辑器视图中的博客文章。

区块分隔符告诉WordPress要在屏幕上呈现什么区块。它们还为JSON对象中的区块属性提供值。这些道具决定了区块应该在屏幕上呈现的方式：

wp_posts存储在表中的博客文章

设置您的WordPress开发环境

设置现代JavaScript开发环境需要扎实的高级技术知识，例如Webpack、React和JSX、Babel、ESLint等。

被吓倒了？不要！WordPress社区已经通过提供强大的工具来帮助您避免混乱的手动配置过程。

为简单起见，我们不会在本文中介绍转译（不过，我们建议您在了解区块开发的基础知识后熟悉一下）。相反，我们将介绍两种替代工具，您可以使用它们在几分钟内快速轻松地设置现代JavaScript开发环境。您可以选择对您的项目最方便的一个。

设置JavaScript开发环境以构建Gutenberg区块是一个三步过程：
让我们开始吧。

1. 安装Node.js和npm

在安装您的开发环境并注册您的第一个区块之前，您需要安装Node.js和Node包管理器 (npm)。

注：Node.js是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。npm，通常被称为Node包管理器，被认为是“世界上最大的软件注册表”。

您可以通过几种不同的方式，安装Node.js和npm。但首先，您可能需要检查该软件是否已安装在您的计算机上。

为此，请启动终端并运行以下命令：

node -v

node -v
```
node -v
```
如果结果为command not found，则您的计算机上未安装Node.js，您可以继续安装。

对于本文，我们选择了最简单的安装选项，即Node Installer。您需要做的就是下载与您的操作系统相对应的版本并启动安装向导：

Node.js下载页面

安装Node.js后，再次在终端中运行node -v命令。您还可以运行npm -v命令以确认您有可用的npm包。

您现在配备了以下工具：
- npxNode.js包运行器（请参阅文档）。这允许您运行npm命令而无需先安装它。
- npmNode.js包管理器（请参阅文档）。这用于安装依赖项和运行脚本。
下一步是安装开发环境。

2. 设置你的开发环境

在本地计算机上安装最新版本的Node.js和npm后，您将需要一个WordPress开发环境。

您可以使用本地开发环境，也可以使用官方WordPress工具。让我们来看看这两种选择。

选项 1：本地开发环境

您可以选择不同的本地开发工具，例如MAMP或XAMPP：

在本地环境中创建一个新的WordPress网站。

选项 2：wp-env

您也可以选择官方wp-env工具，它提供了一个本地WordPress开发环境，您可以直接从命令行启动。Noah Alen将其定义如下：

本地WordPress环境现在就像运行单个命令一样简单。wp-env是用于本地WordPress环境的零配置工具。它提供有关选项的决策，以便用户可以快速启动WordPress而不会浪费时间。事实上，我们的目标是让所有人都能轻松访问这些环境——无论您是开发人员、设计师、经理还是其他任何人。

如果您决定试一试，安装wp-env所需的工作量很小。只需按照以下步骤操作：

第 1 步：确认Docker和Node.js安装

为了满足技术要求，您首先需要在您的计算机上安装Docker和Node.js。那是因为wp-env创建了一个运行WordPress网站的Docker实例。对代码所做的任何更改都会立即反映在WordPress实例中。

第 2 步：从命令行安装@wordpress/env

在您的计算机上运行Docker和Node.js，您可以继续安装WordPress开发环境。

您可以全局或本地安装wp-env。要在全局范围内执行此操作，您需要从插件目录中运行以下命令（更多信息请参见下面的“重要”通知框）：

npm install -g @wordpress/env

npm install -g @wordpress/env
```
npm install -g @wordpress/env
```
让我们分解一下：
- npm install 安装包。
- -g附加到命令后全局安装指定的包。
- @wordpress/env是您要安装的软件包。
提示：默认情况下，在Mac或Linux上，节点包安装在/usr/local/lib/node_modules中。

如果当前用户对该目录没有写权限，则会发出EACCES错误。了解有关在全局安装包时解决EACCES权限错误的更多信息。

要确认wp-env已成功安装，请运行以下命令：

wp-env –version

wp-env –version
```
wp-env --version
```
您应该会看到当前wp-env版本，这意味着您现在可以使用插件文件夹中的以下命令启动环境：

wp-env start

wp-env start
```
wp-env start
```
您可以使用以下地址访问WordPress仪表盘：
- http://localhost:8888/wp-admin/
默认凭据如下：
- 用户名：admin
- 密码：password
设置你的区块插件

现在您需要一个入门区块插件来构建。但是，无需手动创建包含所有必要文件和文件夹的开发区块插件，您只需运行一个开发工具，即可提供开始区块开发所需的所有文件和配置。

同样，您有几个选项可供选择。让我们来看看每一个。

选项 1：使用@wordpress/create-block设置区块插件

@wordpress/create-block是用于创建Gutenberg区块的官方零配置工具：

创建区块是一种官方支持的创建区块的方法，用于为WordPress插件注册区块。它提供了一个没有配置的现代构建设置。它生成PHP、JS、CSS代码以及启动项目所需的所有其他内容。

它很大程度上受到create-react-app的启发。向@gaearon、整个Facebook团队和React社区致敬。

本地环境启动并运行后，您可以通过简单地运行命令npx @wordpress/create-block 来设置起始区块，它将提供创建插件脚手架和注册新区块所需的所有文件和文件夹。

让我们运行一个测试，看看它是如何工作的。

从命令行工具导航到/wp-content/plugins/目录并运行以下命令：

npx @wordpress/create-block my-first-block

npx @wordpress/create-block my-first-block
```
npx @wordpress/create-block my-first-block
```
当要求确认时，输入y继续：

使用@wordpress/create-block创建一个区块

该过程需要一些时间。完成后，您应该得到以下响应：

区块插件已创建

现在启动您的WordPress开发环境并转到WordPress仪表盘中的插件屏幕。一个名为“My First Block”的新插件应该已添加到您的插件列表中：

区块插件已成功安装

注：如果您使用wp-env工具并从包含插件的目录运行wp-env start，它将自动挂载并激活该插件。如果您从任何其他目录运行wp-env start，将创建一个通用的WordPress环境（另请参阅WordPress开发站点）。

如果需要，激活插件，创建一个新的博客文章，向下滚动区块插入器到小工具部分，然后选择你的新区块：

使用@wordpress/create-block创建的示例区块

现在返回终端并将当前目录更改为my-first-block：

cd my-first-block

cd my-first-block
```
cd my-first-block
```
然后运行以下命令：

npm start

npm start
```
npm start
```
这使您能够在开发模式下运行插件。要创建生产代码，您应该使用以下命令：

npm run build

npm run build
```
npm run build
```
选项 2：使用create-guten-block设置区块插件

create-guten-block是用于构建古腾堡区块的第三方开发工具：

create-guten-block零配置开发工具包 (#0CJS) 可在几分钟内开发WordPress Gutenberg区块，无需配置React、webpack、ES6/7/8/Next、ESLint、Babel等。

就像官方工具create-block一样，create-guten-block基于create-react-app，可以帮助您轻松生成您的第一个区块插件。

该工具包提供了创建现代WordPress插件所需的一切，包括以下内容：
- React、JSX和ES6语法支持。
- 幕后的webpack开发/生产构建过程。
- ES6之外的语言附加功能，例如对象扩展运算符。
- 自动前缀CSS，因此您不需要 -webkit或其他前缀。
- 一个构建脚本，用于将JS、CSS和图像与源映射捆绑在一起进行生产。
- 使用单个依赖项cgb-scripts对上述工具进行无忧更新。
请注意以下警告：

权衡是这些工具已预先配置为以特定方式工作。如果您的项目需要更多自定义，您可以“eject” 并自定义它，但是您需要维护此配置。

一旦你手头有一个本地WordPress网站，启动你的命令行工具，导航到你安装的/wp-content/plugins文件夹，然后运行以下命令：

npx create-guten-block my-first-block

npx create-guten-block my-first-block
```
npx create-guten-block my-first-block
```
在创建项目结构并下载依赖项时，您必须等待一两分钟：

使用create-guten-block创建Gutenberg区块

该过程完成后，您应该会看到以下屏幕：

使用create-guten-block成功创建Gutenberg区块

下一张图片显示了在Visual Studio Code中运行终端的项目结构：

Visual Studio Code中的区块插件

现在回到您的WordPress仪表盘。插件屏幕中应该会列出一个新项目——它是my-first-block插件：

使用create-guten-block创建的新插件的插件屏幕

激活插件并返回终端。将当前目录更改为my-first-block，然后运行npm start：

cd my-first-block

npm start

cd my-first-block
npm start
```
cd my-first-block
npm start
```
您应该得到以下响应：

2023年1月13日
什么是TTL及应如何选择正确的值
当用户访问您的网站时，您希望他们收到最新信息。

但是，您还需要快速加载您的网站。否则，您将面临跳出的风险，即用户放弃并迅速离开您的网站。

幸运的是，您可以通过调整网站的生存时间 (TTL) 来找到平衡点。您可以使用它来改善网站的加载时间并保持信息最新。

在本指南中，我们将了解TTL是什么以及它是如何工作的。我们还将检查它的用途以及如何为您的站点选择正确的TTL值。
什么是TTL？

TTL——正如我们已经提到的，它代表“生存时间”——是一种设置，它确定在路由器清除数据之前，您的数据（以数据包形式）在网络中有效和可用的时间。

我们也可以将此时间称为“跳数”，即它在不同路由器之间反弹的次数。

一旦TTL过期，路由器将需要再次检索信息及其更新。

内容交付网络 (CDN)也使用TTL来缓存您的数据。CDN是托管静态文件的全球服务器网络，因此您网站的访问者将收到最接近他们的信息。

这决定了CDN在检索更新信息之前将保留您的数据多长时间。

我们将在本文后面更深入地了解它的功能。现在，让我们检查一下域名系统 (DNS) 服务器、ping和Internet协议 (IP) 标头的上下文中的TTL是什么。TTL对这些应用程序中的每一个都有不同的作用，因此了解它们的区别很重要。

DNS中的TTL是什么？

DNS服务器充当Web服务器和域名之间的桥梁。当您输入“www.wbolt.com”之类的域名时，服务器无法解释此信息。他们以称为IP地址的数字读取数据。

所以DNS方便了域名和IP地址的转换，使用户能够访问网站。

充当网桥的DNS服务器

要了解DNS服务器和TTL的关系，我们首先需要看一下缓存。在这种情况下，缓存是将您网站的域名转换为其IP地址的存储。

每次用户想要访问您的网站时，都需要进行这种转换。如果转换存储在缓存中，则连接可以更快地发生，因为存在DNS记录。事实上，服务器几乎可以瞬间拉起记录。

在这种情况下，TTL确定DNS服务器在再次请求信息之前将保留此DNS记录的时间。它是控制DNS传播的因素之一，它决定了DNS更新所需的时间。

Ping中的TTL是什么？

Ping是衡量您的连接反应时间的指标。例如，它衡量您发出的请求需要多长时间才能返回。这种ping测量是测量网络延迟的方法之一，网络延迟是连接响应和延迟的通用术语。

当您运行ping测试时，报告可能包含TTL。此TTL值可以为您提供有关完成连接所需时间的更多信息。

运行ping测试

在此测试期间，ping记录来自四个单独数据包的结果。它显示花费的时间量和TTL，显示这些数据包花费了多少“跳”。

但是，此报告不会向您显示其他网站服务器设置的TTL。因此，您需要知道该值才能计算真正的TTL。

什么是TTL值？

当您为您的网站设置TTL值时，您选择一个以秒为单位的值。例如，600的TTL值相当于600秒或10分钟。

可用的最小TTL通常为30，相当于30秒。理论上，您可以将TTL设置为低至一秒。但是，大多数站点使用3600（一小时）的默认TTL。您可以应用的最大TTL为86,400（24 小时）。

从技术上讲，您可以设置最小和最大参数之间的任何TTL值。在本文的后面部分，我们将讨论如何为您的网站选择实现价值的最佳时间。

什么IPv6字段类似于IPv4数据包中的TTL字段？

IPv6和IPv4 是不同类型的IP。它们都通过一系列规则（或协议）路由数据包。这些IP包含使数据能够到达其预期目的地的信息。

IP标头包含数据包开头的信息。例如，它们具有来自源和目标的IP地址的信息以及其他详细信息。

IPv4是原始IP，自1984年以来一直可用。它有一个由数字和句点组成的32位地址。IPv6是较新的IP，它使用包含字母和数字的128位地址格式。

当您使用IPv4标头时，它使用TTL字段，但IPv6不使用。对于IPv6标头，它有一个名为Hop Limit的字段，其作用类似于TTL。在这里您可以看到两个IP标头的比较。

IPv6跃点限制

跳数限制确定数据包在路由器丢弃之前将移动多少“跳”。

TTL是如何工作的？

现在，让我们更深入地了解TTL的实际工作原理。我们已经知道，它的值决定了数据包在路由器拒绝之前将存在多长时间（或多少跳）。但是，此功能的方式比您想象的要复杂一些。

当您为数据包数据分配TTL时，它会将此数字作为数值（以秒为单位）进行携带。每次数据包到达路由器时，路由器都会从TTL值中取出一个数字，并将其传递到链中的下一步。

如果数据包被传递太多次，它的数值就会变为零。如果发生这种情况，它将无法建立整个连接，路由器将丢弃它。

然后，您将收到Internet控制消息协议 (ICMP)，这是一种错误消息。例如，如果您的数据的TTL为300，则它最多只能通过不同的路由器300次。

TTL有什么用？

到目前为止，我们已经看到TTL有各种应用。如果您有一个网站，您主要关心的可能是您的网站加载速度。如果您的内容加载速度太慢，您可能会失去访问者和潜在客户。此外，缓慢加载的网站不利于搜索引擎优化 (SEO)。

因此，让我们在缓存的上下文中分析TTL。您的网站包含一系列页面、代码、图像和其他可能需要很长时间才能加载的内容。如果所有这些内容都必须为每个用户重新加载，它会显着降低您网站的速度。

您可以使用更长的TTL使您的缓存站点在更新之前存在更长时间。因此，您的网站加载速度会更快，并且对服务器的压力也会更小。

然而，在某些情况下，短TTL也可能是有益的。例如，不断更新的网站可以从更短的TTL中受益。像Xe这样的网站使用实时货币转换，因此较长的TTL可能会使其数据冗余。

Tye Xe网站

此外，短TTL可以保护您的站点免受分布式拒绝服务 (DDoS) 攻击。当一个实体在短时间内用来自不同位置的数千个请求淹没您的网站时，就会发生这些攻击。较短的TTL有助于保护您的站点，因为频繁的DNS更新可用于阻止控件。

您可能还想在计划编辑您的站点之前更改您的DNS TTL，例如，如果您要添加新网站或更新服务器的IP地址。旧信息将在TTL期间缓存，因此您可能需要根据您的时间线减少它。

您应该如何选择TTL？

为您的需求确定合适的TTL可能具有挑战性。幸运的是，您可以遵循一些一般准则来查看最适合您网站的内容。

我们建议大多数网站的TTL为1-24小时。请记住，TTL值以秒为单位，因此相当于3,600到86,400秒。

此TTL值可以减少加载时间，从而改善访问者的用户体验并降低跳出率。一般规则越长越好，但请记住相应地安排任何网站维护。

如果您拥有一个注册网站，您可能希望选择大约一小时（3,600 秒）的TTL。这些站点是可能以“.org”或“.com”结尾的高级域。例如，Verisign是一个注册网站：

Verisign注册主页

我们建议在对您的站点进行任何操作更改之前将您的TTL更改为大约300秒（五分钟），尤其是在它们会影响DNS的情况下。否则，更新可能无法及时生效。

对于易受DDoS攻击的站点，我们还建议300秒的TTL。如果您所在领域的竞争激烈，竞争对手的网站可能会试图通过其中一种攻击使您失去行动。此外，有争议或举报的网站也是DDoS的潜在目标。

最后，我们推荐300秒的短TTL用于基于DNS的负载平衡。这是当多个服务器通过为服务器请求提供各种IP地址来共享流量时。通过这样做，系统减少了单个服务器的压力。

如何更改TTL？

希望到现在为止，您对您的网站所需的TTL值有一个很好的了解。现在我们可以看到如何在DNSPod网站上更改此值。

您可以使用DNSPod轻松更改DNS记录的TTL。DNSPod仪表盘侧栏中的DNS解析-我的域名菜单提供此可自定义设置。

在DNSPod仪表盘中查找DNS解析

导航到我的域名并添加您的域。单击所选域以添加和查看DNS记录。从那里，您可以单击添加NS记录>TTL。

在DNSPod中添加DNS记录 > TTL

从下拉菜单中，您可以选择一小时到四个星期的TTL。一小时是默认值。我们不建议超过24小时，除非您的DNS很少发生更改和更新。

小结

TTL是一项基本设置，可让您控制服务器存储站点信息的时间。您可以使您的TTL更长或更短，以减少页面加载时间、保持数据最新并避免DDoS攻击。

您可以将TTL设置为低至30秒或高达24小时。但是，对于大多数一般站点，1到24小时之间的TTL提供了极好的平衡。通过选择此值，您可以保持站点快速加载并仍显示当前数据。
2023年1月13日
如何提高WordPress中的PHP内存限制
你的插件不工作。您的网站未加载。您不断看到“Allowed memory size exhausted”错误，并且一直说增加您的PHP内存限制。那是什么，你如何解决它？

PHP内存限制的存在是为了阻止占用RAM的资源使您的网站崩溃。但有时它也可能导致问题，例如当您安装需要一点额外功能的插件并最终切断对您网站的访问时。

当您因内存不足而遇到白屏死机时，您需要立即修复此问题。让我们来看看PHP内存限制是什么，以及如果达到资源上限如何解决它。
什么是PHP内存限制？

PHP内存限制设置您网站上的任何脚本可以使用的最大内存量。但这究竟是什么意思？

您的网站由服务器提供支持，这些服务器只是用于保持网站后端运行的专用计算机。与普通计算机一样，它们使用处理器、存储和RAM（也称为内存）等组件。

RAM是服务器最重要的部分之一。每个程序和应用程序都会占用一点内存。程序越密集，占用的内存就越多。当您的内存不足时，您的网站将运行缓慢甚至拒绝加载。

Web应用程序（例如WordPress插件）是可能占用服务器内存的众多事物之一。通常，这些应用程序占用的空间非常小，除非您的主机给您的内存非常少，否则您永远不会遇到任何问题。

但是对于任何PHP应用程序的脚本可以在您的服务器上占用多少内存也有一个硬性上限。当其中一个脚本超过限制时，您就会开始遇到问题。

您会看到一个带有错误的白屏，甚至可能会禁止您访问整个网站。

为什么有内存限制？

想象一下，您的服务器出了点问题。也许一个程序陷入无限循环并不断占用越来越多的内存，或者攻击者诱骗您安装运行恶意脚本的东西以占用您的所有资源。

当PHP进程失控时，内存限制会在它们导致整个服务器崩溃或耗尽当月所有分配的资源之前对其进行硬性阻止。

大多数合法的PHP脚本都很小。每个单独的脚本应该只占用少量的RAM，除非你有一个不寻常的程序需要在一个脚本中比大多数程序作为一个整体占用更多的资源。这些类型的插件当然存在，但很少见。

如果您的内存不足，则很有可能存在损坏或恶意的PHP程序，因此会出现内存限制错误。

但有时你确实在使用需要额外内存的大型插件。一些Web主机还将PHP内存限制设置得非常低，因此即使您没有安装异常耗电的应用程序，也会导致出现错误。

无论哪种方式，您都会很快遇到内存耗尽错误。

内存耗尽错误

所以你遇到了内存耗尽错误。您可能会在整个站点中或在执行某些功能（例如提交表单）时遇到带有错误消息的白屏。

出现在WordPress中的内存限制耗尽错误

这是一个严重的问题，尤其是当它影响您的整个网站时。过去的每一个小时都会有很多迷路的游客。

罪魁祸首可能是一个非常大或配置错误的插件。因为WordPress插件是用PHP编码的，所以它们受PHP内存限制的限制。

您可以通过一一禁用插件来找到导致问题的插件，直到重新访问您的站点。一旦你确定了它，检查文档并查看它是否说明它需要运行多少内存。

如果没有迹象表明它应该是一个非常强大的插件，您可能需要向插件开发人员提交一张票，因为它可能是错误的。请记住，PHP内存限制仅影响单个脚本，而不影响整个插件。因此，脚本很有可能陷入无限循环或其他故障。

这个问题也可能在你身上。也许您的内存限制设置得太低，因此只有最小的插件才能正确运行。或者，也许您正在尝试安装一个插件，该插件要求您将限制提高到比正常水平更高的水平。

无论哪种情况，您都应该尝试增加PHP内存限制。现在让我们向您展示如何做到这一点。

如何在WordPress中增加PHP内存限制

在做任何事情之前，有一种简单的方法可以检查您当前的PHP内存限制，而无需挖掘任何文件。如果您运行的是WordPress 5.2或更高版本，请转到后端的工具 > 站点健康运行状况。

如果看不到，请安装运行Health Check & Troubleshooting。

在WordPress中查看站点健康信息

在信息选项卡下，您将看到您的PHP内存限制。如果它已经设置得相当高，那么您的一个插件可能只是被破坏了。

但是，如果您发现它非常低，则需要通过编辑wp-config.php文件来增加它。

这并不总能解决问题。最终，PHP内存限制由您的Web主机设置。有时，您的站点设置为使用的资源少于主机提供的资源，调整文件可以解决此问题。但是如果他们的硬编码限制太低，无论你手动设置多高，你都无法真正增加它。

但值得一试，所以让我们现在去编辑那个文件。

PHP内存限制是多少？

不同的服务器提供商所设置的限制都不太一样，稍微良心的服务器提供商可能会给出256MB的默认PHP内存限制。这对于99%的WordPress插件来说应该绰绰有余，而且实际上远远超过了大多数插件所应采用的。

它可能仍然值得通过并确保它没有在WordPress的设置中无意中设置得太低。有可能某些东西改变了数量并减少了您可以访问的资源数量。

如何通过FTP更改PHP内存限制

要编辑wp-config.php文件，您需要使用FTP或SFTP访问您的站点。这允许您编辑影响站点运行方式的敏感内部文件。

你只会改变一条线，所以应该很容易。首先安装FileZilla或您选择的其他FTP客户端。它是免费的，所以不用担心。在开始之前，您还应该备份您的网站。在编辑核心文件时很容易意外破坏某些东西。

打开FileZilla并输入您的凭据。片刻之后，您应该连接到您的站点。

单击公共文件夹并找到wp-config.php。如果找不到public或public-html，它可能被称为root、www或您的网站名称。

在FileZilla中查找wp-config

打开wp配置。注意不要编辑PHP内存限制行以外的任何内容，因为这是一个敏感文件，可能会破坏您的网站。浏览它，直到找到这一行：define(‘WP_MEMORY_LIMIT’, ‘256M’);

出现在wp-config中的WP内存限制

更改此处列出的数字，保存文件，然后关闭FileZilla。

如何在cPanel中更改PHP内存限制

有些主机不允许您通过FTP编辑文件。相反，他们可能会让您访问cPanel。如果您遇到这种情况，请不要担心——您也可以通过这种方式更改您的PHP内存限制。

第一步：使用主机提供的凭据登录cPanel。在主屏幕上，您将看到一个带有选择PHP版本按钮的软件部分。

在cPanel中选择PHP版本

单击它，然后在屏幕顶部，您将看到Switch to PHP options。向下滚动，直到看到带有下拉菜单的memory_limit 。单击它并将其更改为您想要的设置。单击应用，您就完成了。

不是每个人都会有选择PHP版本选项。相反，您可能会看到MultiPHP Ini Editor 。如果是这种情况，您的步骤会有所不同。

cPanel中的MultiPHP Ini编辑器

您需要单击它，然后在下一个窗口中，在Configure PHP INI basic settings下，您应该打开下拉列表并选择您的域。找到memory_limit部分并输入您想要的数字。单击应用以保存您的更改。

您也可以尝试使用cPanel的文件管理器。这与通过FTP访问您的站点非常相似。在主页的文件部分下，单击文件管理器。找到您的public/public-html文件夹（或任何可能被称为的文件夹）并打开wp-config.php。

找到上一节中概述的WP_MEMORY_LIMIT行，并将数字更改为您想要的。保存您的更改并确保应用它们，这就是您需要做的所有事情。

PHP内存限制应该是多少？

当您更改内存限制时，您的第一个冲动可能是将其设置为900MB 或类似的值——尽可能高。但这实际上可能是一个非常糟糕的主意。

如果您网站上的脚本中断，它可能会迅速失控并使您的整个服务器崩溃。即使您的站点托管在功能强大的硬件上，一个脚本占用所有内存仍可能导致严重问题。

错误配置的脚本异常繁重，但没有破坏到导致问题的程度，也可能被忽视。大多数PHP脚本都很小，内存限制错误是后端出现问题的警告信号。将其设置得太高，您可能会在不知不觉中搞砸脚本，使您的网站陷入困境。

您应该将PHP内存限制设置得尽可能低，同时仍然允许您的站点正常运行。

128MB是一个很好的基准。这是相当大的内存量，可以处理大多数密集型插件。如果您知道您将需要一些额外的功能，那么256MB甚至可以涵盖最重的插件。如果你确定你有一个真正的强者，512MB是你应该设置的绝对最大值。在90%的情况下，您永远不需要将内存限制提高到256 MB以上。

如果更改内存限制不起作用怎么办？

如果在编辑您的PHP文件后您仍然遇到内存错误，则问题之一是两个问题之一：您的主机分配的资源很少，或者您的服务器上有一个PHP脚本占用了太多的内存。

同样，您应该检查并禁用您的插件，直到您确定罪魁祸首。使用128-256MB内存，没有插件应该占用这么多空间而不在文档中的某处提及它。禁用它并通知插件作者发生了什么。

即使在所有插件都被禁用后仍然遇到错误？一定有一些冲突或其他PHP应用程序导致了问题。这超出了您自己能够处理的范围，因此请向您的网络托管服务商寻求帮助。

如果问题根本不是插件，那么责任可能在于您的主机将内存限制设置得太低。您可能正在使用共享主机，它因分配非常少量的内存而臭名昭著 – 这是可以理解的，因为如果一个站点使用过多的RAM，它会使整个系统陷入数十个其他网站的困境。

您在这里唯一的选择是升级到提供更多资源的计划。这可能最终代价高昂，特别是如果您只是想在新站点上安装一个密集的插件。如果您还没有很多访客，那么从升级中获得的所有其他资源都不会对您有太大帮助。

您还可以切换到提供更多内存的主机。

小结

PHP内存限制的存在有一个非常正当的原因：您不希望流氓进程占用比预期更多的RAM。但是，当您在使用合法插件时达到极限并遇到白屏死机时，这可能会很烦人。

最后，取决于您的主机您可以访问多少PHP内存。如果他们设置的标准太低，就不可能提高。

但是，有时您的网站使用的资源会比您真正可以访问的资源少。在这种情况下，可以增加你的记忆力。尝试将其设置为128或256MB，因为您不希望它太高。

如果这些方法都不起作用，则可能是缺少分配的资源导致了问题，而不是需要更改的设置。联系您的主机并询问如何获得更多，或切换到提供更大内存的主机，它可以为您提供比您需要的更多内存。
2023年1月13日

如何使用多种工具调试Node.js代码

Node.js是一个JavaScript运行时，基于与Google Chrome浏览器中使用的相同的V8引擎。它通常用于构建跨平台的服务器端和终端应用程序。Node.js在过去十年中变得越来越流行，因为它易于安装、实用、速度快，并且允许客户端Web开发人员在其他地方利用他们的技能。

但是，软件开发仍然是一项复杂的任务，您的Node.js代码有时会失败。本教程演示了各种工具来帮助调试应用程序并找出问题的原因。

Tips：Deno是一个替代的JavaScript运行时。它与Node.js相似，但更新，它消除了一些裂缝和不一致。下面的工具和信息通常可以应用于Deno应用程序和Node.js。

调试概述
设置适当的Node.js环境变量
使用Node.js命令行选项
将消息输出到控制台
使用第三方日志系统
使用V8检查器
使用Chrome浏览器调试Node.js代码
条件断点
日志点
使用VS Code调试Node.js应用程序
VS Code高级调试配置
其他Node.js调试选项

调试概述

“调试”是修复软件缺陷的各种方法的名称。修复错误通常很简单。查找错误的原因可能要复杂得多，并且需要花费数小时的时间。

以下部分描述了您将遇到的三种一般类型的错误。

语法错误

您的代码不遵循语言规则——例如，当您省略右括号或拼写错误的语句，如console.lag(x).

一个好的代码编辑器可以通过以下方式帮助发现常见问题：

对有效或无效语句进行颜色编码
类型检查变量
自动完成函数和变量名
突出显示匹配的括号
自动缩进代码块
检测无法访问的代码
重构杂乱的功能

VS Code和Atom等免费编辑器对Node.js、JavaScript和TypeScript（可转换为JavaScript）提供了很好的支持。在保存和测试代码之前，通常可以发现基本语法问题。

像ESLint这样的代码linter也会报告语法错误、缩进错误和未声明的变量。ESLint是一个Node.js工具，您可以通过以下方式全局安装：

npm i eslint -g

npm i eslint -g

您可以使用以下命令从命令行检查JavaScript文件：

eslint mycode.js

eslint mycode.js

…但是使用编辑器插件更容易，例如用于VS Code的ESLint或用于Atom的 linter-eslint，它们会在您键入时自动验证代码：

VS Code中的ESlint

逻辑错误

您的代码运行但未按预期工作。例如，用户在请求时没有注销；报告显示不正确的数字；数据未完全保存到数据库中；等等。

逻辑错误可能由以下原因引起：

使用错误的变量
不正确的条件，例如，if (a > 5)而不是if (a < 5)
未能考虑运算符优先级的计算，例如，1+2*3结果为7而不是9。

运行时（或执行）错误

错误只有在应用程序执行时才会变得明显，这通常会导致崩溃。运行时错误可能由以下原因引起：

除以已设置为零的变量
试图访问不存在的数组项
尝试写入只读文件

尽管以下开发技术可以提供帮助，但逻辑和运行时错误更难发现：

使用测试驱动开发： TTD鼓励您在开发函数之前编写测试，例如，当Z作为参数传递时，X从函数Y返回。这些测试在初始开发和后续更新期间运行，以确保代码继续按预期工作。
使用问题跟踪系统：没有什么比声称“您的软件无法运行”的电子邮件更糟糕的了！问题跟踪系统允许您记录特定问题、记录复制步骤、确定优先级、分配开发人员并跟踪修复进度。
使用源代码控制：Git之类的源代码控制系统将帮助您备份代码、管理修订并确定引入错误的位置。在线存储库，包括Github和Bitbucket，为小型或开源项目提供免费空间和工具。

您仍然会遇到Node.js错误，但以下部分描述了定位该难以捉摸的错误的方法。

设置适当的Node.js环境变量

在主机操作系统中设置的环境变量可以控制Node.js应用程序和模块设置。最常见的是NODE_ENV，通常在调试时设置为开发，或者在实时服务器上运行时设置为生产。在macOS或Linux上设置环境变量：

NODE_ENV=development

NODE_ENV=development

或在（经典）Windows命令提示符下：

set NODE_ENV=development

set NODE_ENV=development

或Windows Powershell：

$env:NODE_ENV=“development”

$env:NODE_ENV=”development”

$env:NODE_ENV="development"

在流行的Express.js框架中，将NODE_ENV设置为development会禁用模板文件缓存并输出详细的错误消息，这在调试时可能会有所帮助。其他模块可能提供类似的功能，您可以在应用程序中添加NODE_ENV条件，例如

// running in development mode?

const devMode = (process.env.NODE_ENV !== ‘production’);

if (devMode) {

console.log(‘application is running in development mode’);

}

// running in development mode?
const devMode = (process.env.NODE_ENV !== ‘production’);
if (devMode) {
console.log(‘application is running in development mode’);
}

// running in development mode?
const devMode = (process.env.NODE_ENV !== 'production');
if (devMode) {
console.log('application is running in development mode');
}

您还可以使用Node的util.debuglog方法有条件地输出错误消息，例如

import { debuglog } from ‘util’;

const myappDebug = debuglog(‘myapp’);

myappDebug(‘log something’);

import { debuglog } from ‘util’;
const myappDebug = debuglog(‘myapp’);
myappDebug(‘log something’);

import { debuglog } from 'util';
const myappDebug = debuglog('myapp');
myappDebug('log something');

此应用程序仅在NODE_DEBUG设置为 myapp 或 * 或 my* 等通配符时才会输出日志消息。

使用Node.js命令行选项

节点脚本通常使用node后跟入口脚本的名称来启动：

node app.js

node app.js

您还可以设置命令行选项来控制各种运行时方面。用于调试的有用标志包括：

--check语法检查脚本而不执行
--trace-warnings当JavaScript Promises未解析或拒绝时输出堆栈跟踪
--enable-source-maps使用TypeScript等转译器时显示源映射
--throw-deprecation使用已弃用的Node.js功能时发出警告
--redirect-warnings=file将警告输出到文件而不是stderr
--trace-exit调用时输出堆栈跟踪process.exit()。

将消息输出到控制台

输出控制台消息是调试Node.js应用程序的最简单方法之一：

console.log(`someVariable: ${ someVariable }`);

console.log(`someVariable: ${ someVariable }`);

很少有开发人员意识到还有许多其他控制台方法：

控制台方法	描述
`.log(msg)`	标准控制台消息
`.log('%j', obj)`	将对象输出为紧凑的JSON字符串
`.dir(obj, opt)`	漂亮打印对象属性
`.table(obj)`	以表格格式输出数组和对象
`.error(msg)`	错误信息
`.count(label)`	增加一个命名的计数器和输出
`.countReset(label)`	重置命名计数器
`.group(label)`	缩进一组消息
`.groupEnd(label)`	终止一个组
`.time(label)`	启动一个命名的计时器
`.timeLog(label)`	报告经过的时间
`.timeEnd(label)`	停止一个命名的计时器
`.trace()`	输出堆栈跟踪（所有函数调用的列表）
`.clear()`	清除控制台

console.log()还接受逗号分隔值的列表：

let x = 123;

console.log(‘x:’, x);

// x: 123

let x = 123;
console.log(‘x:’, x);
// x: 123

let x = 123;
console.log('x:', x);
// x: 123

…尽管ES6解构提供了类似的输出，但花费更少：

console.log({ x });

// { x: 123 }

console.log({ x });
// { x: 123 }

console.log({ x });
// { x: 123 }

console.dir()命令以与util.inspect()相同的方式漂亮地打印对象属性：

console.dir(myObject, { depth: null, color: true });

console.dir(myObject, { depth: null, color: true });

控制台争议

一些开发人员声称您永远不应该使用console.log()，因为：

您正在更改代码并且可能会更改某些内容或忘记删除它，并且
当有更好的调试选项时，就没有必要了。

不要相信任何声称他们从未使用过的人console.log()！记录既快又脏，但每个人都在某个时候使用它。使用您喜欢的任何工具或技术。修复一个错误比你找到它的方法更重要。

使用第三方日志系统

第三方日志系统提供更复杂的功能，例如消息传递级别、详细程度、排序、文件输出、分析、报告等。流行的解决方案包括cabinet、loglevel、morgan、pino、signale、storyboard、tracer和winston。

使用V8检查器

V8 JavaScript引擎提供了一个可以在Node.js中使用的调试客户端。使用节点检查启动应用程序，例如

node inspect app.js

node inspect app.js

调试器在第一行暂停并显示debug>提示：

$ node inspect .mycode.js

< Debugger listening on ws://127.0.0.1:9229/143e23fb

< For help, see: https://nodejs.org/en/docs/inspector

< Debugger attached.

Break on start in mycode.js:1

> 1 const count = 10;

3 for (i = 0; i < counter; i++) {

debug>

$ node inspect .mycode.js
< Debugger listening on ws://127.0.0.1:9229/143e23fb
< For help, see: https://nodejs.org/en/docs/inspector
<
ok
< Debugger attached.
<
Break on start in mycode.js:1
> 1 const count = 10;
2
3 for (i = 0; i < counter; i++) {
debug>

$ node inspect .mycode.js
< Debugger listening on ws://127.0.0.1:9229/143e23fb
< For help, see: https://nodejs.org/en/docs/inspector
<
ok
< Debugger attached.
<
Break on start in mycode.js:1
> 1 const count = 10;
2
3 for (i = 0; i < counter; i++) {
debug>

输入帮助以查看命令列表。您可以通过输入以下内容逐步完成应用程序：

cont 或 c : 继续执行
next 或 n：运行下一个命令
step 或 s：进入被调用的函数
out 或 o : 跳出函数并返回调用语句
pause：暂停正在运行的代码
watch(‘myvar’) : 观察一个变量
setBreakPoint() 或 sb()：设置断点
restart：重新启动脚本
.exit 或 Ctrl | Cmd + D：退出调试器

诚然，这种调试选项既费时又笨拙。仅在没有其他选项时使用它，例如当您在远程服务器上运行代码并且无法从其他地方连接或安装其他软件时。

使用Chrome浏览器调试Node.js代码

上面使用的Node.js检查选项启动了一个Web Socket服务器，它在localhost端口9229上进行侦听。它还启动了一个基于文本的调试客户端，但也可以使用图形客户端——例如内置于Google Chrome和基于Chrome的客户端Chromium、Edge、Opera、Vivaldi和Brave等浏览器。

要调试典型的Web应用程序，请使用–inspect选项启动它以启用V8调试器的Web Socket服务器：

node –inspect index.js

node --inspect index.js

笔记：

index.js被假定为应用程序的入口脚本。
确保您使用--inspect双破折号以确保您不会启动基于文本的调试器客户端。
如果您想在文件更改时自动重新启动应用程序，您可以使用nodemon而不是node。

默认情况下，调试器只接受来自本地机器的传入连接。如果您在其他设备、虚拟机或Docker容器上运行应用程序，请使用：

node –inspect=0.0.0.0:9229 index.js

node --inspect=0.0.0.0:9229 index.js

节点检查选项

您还可以使用--inspect-brk而不是--inspect在第一行停止处理（设置断点），以便您可以从头开始逐步执行代码。

打开基于Chrome的浏览器并chrome://inspect在地址栏中输入以查看本地和联网设备：

Chrome检查工具 2023年1月13日

如何增加本地Web服务器MAMP的上传大小
有许多工具可以让您设置本地开发环境来创建和测试WordPress网站。MAMP就是其中之一，它非常易于使用。

但是，如果您想充分利用它，则需要增加其默认上传大小。

由于WordPress是基于PHP构建的，因此该软件的设置可以决定您网站的运行情况。例如，使用过时的PHP版本可能会阻止您运行最新的WordPress版本。同样，内存限制较低可能会导致频繁的错误。

在本文中，我们将向您介绍MAMP，解释为什么增加上传大小是一个明智的想法，然后通过两个简单的步骤向您展示如何做到这一点。让我们开始吧！
MAMP简介

MAMP主页

MAMP是一种工具，可让您在macOS或Windows计算机上设置本地服务器环境。有了它，您可以在您的计算机上安装以下软件：
- Apache
- Nginx
- PHP
- MySQL
您可以使用许多其他工具在本地安装WordPress。但是，我们喜欢MAMP，因为它为您提供了一个直观的控制面板以及为您的Web服务器软件在Nginx和Apache之间切换的选项：

使用MAMP在Apache和Nginx之间切换。

无论您使用的是免费版本的MAMP还是MAMP PRO ，下面的说明都适用。您可以使用任一版本在本地安装WordPress。

为什么要增加Web服务器的PHP上传大小

每个PHP安装都使用一组变量或“指令”来管理其设置。这些是决定PHP如何处理文件上传的三个设置（就大小而言）：
1. memory_limit：这决定了您的服务器可以为每个PHP脚本分配多少内存。
2. post_max_size：此设置控制您的服务器允许的最大POST数据大小，并在WordPress文件上传中发挥作用。
3. upload_max_filesize：您在此处设置的值决定了上传到您网站的文件大小限制。
正如我们所提到的，WordPress是基于PHP构建的。因此，所有这些设置都会直接影响您的网站。如果您的PHP安装具有较低的内存限制，您将在上传文件和在您的站点上执行脚本时遇到问题。

没有适合每个Web服务器的理想PHP内存限制。但是，由于我们讨论的是本地开发环境，您可以完全自由地决定为您的设置分配多少资源。尽管大多数网络主机都会限制您的PHP内存限制（在合理范围内），但您的本地实例没有强制上限。

一些教程告诉您只增加PHP配置中的upload_max_filesize设置。但是，这可能会导致错误。当PHP文档表明您的post_max_size设置应该具有高于upload_max_filesize.

同样，memory_limit应该具有比post_max_size更高的值。只要您的PHP设置符合这些准则，您就应该是金子。

如何增加本地Web服务器MAMP的上传大小

在本教程中，我们将向您展示如何配置MAMP以增加其在Windows和macOS上的上传大小。我们还将使用MAMP控制面板来确保您成功更新了服务器设置。

第 1 步：修改您的php.ini文件

在MAMP中修改PHP设置很容易。为此，您需要编辑MAMP安装的php.ini文件。

您可以在以下两个位置之一访问该文件，具体取决于您使用的是Windows还是macOS：
1. Windows： C:/MAMP/conf/phpx.xx/php.ini
2. macOS： /Applications/MAMP/bin/php/phpx.xx/conf/php.ini
如果您导航到conf目录，您会注意到它包含多个用于不同PHP版本的文件夹。默认情况下，您的MAMP安装应使用最新的PHP版本，并且您需要访问与其对应的文件夹。

要仔细检查您使用的PHP版本，请打开MAMP控制面板，转到MAMP > Preferences > PHP，然后查看“Standard Version”旁边的版本号：

检查您在MAMP中使用的PHP版本

接下来，您可以返回conf目录并访问与该版本相关的文件夹。在里面，你会发现一个单独的php.ini文件。继续使用你最喜欢的文本编辑器打开它，你会看到如下内容：

一个php.ini配置文件

正如我们在上一节中解释的那样，您需要查找以下三个指令：
1. memory_limit
2. post_max_size
3. upload_max_filesize
我们建议将内存限制设置为128或256MB。这是该值在我们的php.ini文件中的样子：

增加你的PHP内存限制

要找到该指令，请使用文本编辑器的搜索功能并修改=符号后的值。

请注意，数字后跟一个“M”而不是“MB”。128和256MB都为您的WordPress安装提供了足够的资源来执行任何脚本或上传您需要使用的文件。如果您的计算机有足够的资源，您也可以走得更高，这对于现代设备来说应该不是问题。

现在对post_max_size和upload_max_filesize重复相同的过程，对前者使用更高的值。在大多数情况下，这两种设置都不需要超过10到20MB。毕竟，您很少会发现自己需要将这种大小的文件上传到WordPress网站。

在任何情况下，您都可以为任一指令设置所需的任何值，只要它们遵循我们之前概述的准则即可。

完成后，将更改保存到php.ini并关闭文件。然后您可以返回MAMP控制面板并单击Start Servers。

第 2 步：检查您的phpInfo页面

PHP可以生成一个名为phpInfo的页面，使您能够检查所有服务器配置设置，而无需浏览php.ini文件。

要访问您的MAMP的phpInfo页面，请打开该工具的控制面板并单击Open WebStart page按钮：

打开您的MAMP的WebStart页面

WebStart是MAMP设置的本地页面，它为您提供服务器设置的概览。您可以使用WebStart访问phpInfo页面，以及phpMyAdmin等工具。

对于本教程，我们只对前者感兴趣，所以继续点击页面顶部的phpInfo按钮：

使用WebStart访问您的phpInfo页面

页面加载后，您将看到所有PHP设置的概览，应如下所示：

通过MAMP的phpInfo页面检查您的“memory_limit”值

在上面的屏幕截图中，您可以看到我们将memory_limit值设置为128MB。

继续并使用浏览器的搜索功能找到所有三个指令并检查phpInfo是否反映了它们的新值。

小结

如果您使用Windows或macOS设备，MAMP提供了一种设置本地开发环境的最简单方法。如果您想为您的项目在Nginx和Apache之间切换，这也是一个很棒的解决方案。

但是，如果您打算将其用于WordPress开发，您可能需要增加其PHP上传大小。

幸运的是，配置MAMP以增加其上传大小很简单。您所要做的就是更新本地php.ini文件中的三个指令：memory_limit、post_max_size和upload_max_filesize.
2023年1月13日
如何使用Tailwind CSS快速开发新潮时髦网站
随着您作为开发人员的进步，您更有可能使用通过编写更少代码来帮助您完成更多工作的技术。像Tailwind CSS这样可靠的前端框架是实现这一目标的一种方法。

在本文中，我们将了解Tailwind CSS——一个有助于构建和设计网页的CSS框架。我们将首先解释如何在您的项目中安装和集成Tailwind CSS，查看一些实际应用程序，以及如何创建自定义样式和插件。
什么是Tailwind CSS？

Tailwind CSS

Tailwind CSS是一个实用程序优先的CSS（级联样式表）框架，带有预定义的类，您可以使用这些类直接在标记中构建和设计网页。它允许您以预定义类的形式在HTML中编写CSS。

我们将定义什么是框架以及“实用程序优先CSS”的含义，以帮助您更好地理解Tailwind CSS的全部含义。

什么是框架？

作为一个通用的编程术语，框架是一种工具，它提供了从现有工具的特性构建的可重用和现成的组件。创建框架的总体目的是通过减少工作来提高开发速度。

现在我们已经确定了框架的含义，它应该可以帮助您理解Tailwind CSS是基于CSS功能构建的工具。该框架的所有功能都源自以类形式组成的CSS样式。

什么是实用程序优先的CSS框架？

当我们说实用程序优先CSS时，我们指的是我们的标记 (HTML)中具有预定义功能的类。这意味着您只需编写一个附加了预定义样式的类，这些样式将应用于元素。

在您使用vanilla CSS（没有任何框架或库的CSS）的情况下，您将首先为您的元素指定一个类名，然后将不同的属性和值附加到该类，这反过来会将样式应用于您的元素.

我们将向您展示一个示例。在这里，我们将创建一个带有圆角的按钮和一个显示“Click me”的文本。这是按钮的样子：

点击按钮

我们将首先使用vanilla CSS执行此操作，然后使用Tailwind CSS中可用的实用程序类。

With Vanilla CSS

<button class=“btn”>Click me</button>

<button class=”btn”>Click me</button>
```
<button class="btn">Click me</button>
```
我们已经给按钮标签class btn，它将使用外部样式表进行样式设置。那是：

.btn {

background-color: #000;

color: #fff;

padding: 8px;

border: none;

border-radius: 4px;

}

.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}
```
.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}
```
With Tailwind CSS

<button class=“bg-black p-2 rounded”>Click me</button>

<button class=”bg-black p-2 rounded”>Click me</button>
```
<button class="bg-black p-2 rounded">Click me</button>
```
这都是实现与vanilla CSS示例相同的效果所必需的。没有创建您必须编写样式的外部样式表，因为我们使用的每个类名都已经具有预定义的样式。

使用Tailwind CSS的先决条件

在使用Tailwind CSS之前，您应该考虑满足一些先决条件，才能毫无困难地使用框架的功能。这里有几个：
- 良好的HTML知识、结构和工作原理
- 扎实的CSS基础——媒体查询、flexbox和网格系统
Tailwind CSS可以在哪里使用？

您可以在前端Web项目中使用Tailwind CSS，包括React.js、Next.js、Laravel、Vite、Gatsby等JavaScript框架。

Tailwind CSS的优缺点

以下是使用Tailwind CSS的一些优势：
1. 更快的开发过程
2. 由于实用程序相似，可帮助您更多地练习CSS
3. 所有实用程序和组件都可以轻松定制
4. 生产的整体文件大小通常很小
5. 如果您已经了解CSS，则易于学习
6. 学习的好文档
使用Tailwind CSS的一些缺点包括：
1. 对于大型项目，您的标记可能看起来杂乱无章，因为所有样式都在HTML文件中。
2. 如果你对CSS不太了解，学习起来并不容易。
3. 您被迫从头开始构建所有内容，包括您的输入元素。安装Tailwind CSS时，它会删除所有默认CSS样式。
4. 如果您希望最大限度地减少开发网站前端所花费的时间并且主要关注后端逻辑，那么Tailwind CSS不是最佳选择。
何时使用Tailwind CSS

Tailwind CSS最适合通过编写更少的代码来加快开发过程。它带有一个设计系统，有助于保持各种设计要求（如填充、间距等）的一致性；有了这个，您不必担心创建您的设计系统。

如果您希望使用易于配置的框架，您也可以使用Tailwind CSS，因为它不会强制您始终以相同的方式使用组件（导航栏、按钮、表单等）；您可以选择组件的外观。但是，如果您没有学习和实践过CSS，则永远不应该使用Tailwind。

Tailwind CSS与其他CSS框架的异同

以下是一些相似之处：
1. 它们可以帮助您更快地完成工作。
2. 它们带有预定义的类。
3. 它们是建立在CSS规则之上的。
4. 它们都易于学习和使用，具有CSS的工作知识。
现在让我们看看其中的一些区别：
1. Tailwind与大多数框架不同，因为您必须创建自己的组件。例如，Bootstrap具有导航栏、按钮等组件，但使用Tailwind，您必须自己构建所有这些。
2. 像Bootstrap这样的一些框架不容易定制，所以你不得不使用它们的设计模式。在Tailwind中，您可以控制一切的流程。
3. 使用Tailwind需要深入的CSS知识。编写类名是不够的，因为您必须将它们组合起来，就好像您正在编写vanilla CSS一样才能获得相同的结果。在大多数其他框架中，您只需要知道使用类名时将构建什么组件。
如何开始使用Tailwind CSS

在安装Tailwind CSS并将其集成到您的项目中之前，请确保：
1. 您已在计算机上安装了Node.js，以使用终端中的Node包管理器 (npm)。
2. 您的项目已全部设置为您创建的文件。
这是我们目前的项目结构：

-Tailwind-tutorial

-public

-index.html

-styles.css

-src

-styles.css

-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.css
```
-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.css
```
接下来，为您的项目启动一个终端并运行以下命令：

npm install -D tailwindcss

npm install -D tailwindcss
```
    npm install -D tailwindcss
```
上述命令将安装Tailwind CSS框架作为依赖项。接下来，通过运行以下命令生成tailwind.config.js文件：

npm install -D tailwindcss

npm install -D tailwindcss
```
    npm install -D tailwindcss
```
tailwind.config.js文件在创建时将为空，因此我们必须添加一些代码行：

module.exports = {

content: [“./src/**/*.{html,js}”, “./public/*.html”],

theme: {

extend: {},

},

plugins: [],

};

module.exports = {
content: [“./src/**/*.{html,js}”, “./public/*.html”],
theme: {
extend: {},
},
plugins: [],
};
```
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};
```
内容数组中提供的文件路径将使Tailwind能够在构建期间清除/删除任何未使用的样式。

接下来要做的是将“@tailwind”指令添加到src文件夹中的CSS文件中 – 这是Tailwind为您生成所有预定义实用程序样式的地方：

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
最后要做的是通过在终端中运行以下命令来启动构建过程：

npx tailwindcss -i ./src/styles.css -o ./public/styles.css –watch

npx tailwindcss -i ./src/styles.css -o ./public/styles.css –watch
```
    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
```
在上面的代码中，我们告诉Tailwind我们的输入文件是src文件夹中的样式表，并且我们使用的任何样式都必须构建到public文件夹中的输出文件中。--watch允许Tailwind监视您的文件以进行自动构建过程的更改；省略它意味着我们每次想要构建代码并查看所需的输出时都必须运行该脚本。

使用Tailwind CSS

现在我们已经为我们的项目安装并设置了Tailwind CSS，让我们看一些示例来全面了解它的应用程序。

Flexbox示例

要在Tailwind CSS中使用flex，您需要添加一个flex类，然后添加flex项的方向：

<div class=“flex flex-row”>

<button> Button 1 </button>

<button> Button 2 </button>

<button> Button 3 </button>

</div>

<div class=”flex flex-row”>
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
```
    <div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
```
三个紫色按钮

使用flex-row-reverse将反转按钮出现的顺序。

flex-col将它们堆叠在一起。这是一个例子：

<div class=“flex flex-col”>

<button> Button 1 </button>

<button> Button 2 </button>

<button> Button 3 </button>

</div>

<div class=”flex flex-col”>
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
```
<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
```
三个紫色按钮

就像前面的例子一样，flex-col-reverse颠倒顺序。

Grid示例

在网格系统中指定列和行时，我们采用不同的方法，通过传入一个数字来确定元素如何占用可用空间：

<div class=“grid grid-cols-3”>

<button> Button 1 </button>

<button> Button 2 </button>

<button> Button 3 </button>

<button> Button 4 </button>

<button> Button 5 </button>

<button> Button 6 </button>

</div>

<div class=”grid grid-cols-3″>
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
<button> Button 4 </button>
<button> Button 5 </button>
<button> Button 6 </button>
</div>
```
<div class="grid grid-cols-3">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
<button> Button 4 </button>
<button> Button 5 </button>
<button> Button 6 </button>
</div>
```
六个紫色按钮

颜色

Tailwind带有许多预定义的颜色。每种颜色都有一组不同的变化，最浅的变化是50，最暗的变化是900。

这是一张包含多种颜色的图片及其HTML十六进制代码来说明这一点

2023年1月13日
如何设置Nginx和Apach反向代理
反向代理位于Web服务器前面，并在所有请求到达源服务器之前接收它们。它的工作方式类似于转发代理，除了在这种情况下它是使用代理的Web服务器而不是用户或客户端。反向代理通常用于增强Web服务器的性能、安全性和可靠性。

例如，您可以在服务器上的域名example.com上托管一个非WordPress站点，并在服务器B上托管的 example.com/blog 上运行其WordPress博客。您可以通过为托管您的主站点的服务器添加反向代理来实现此目的。您可以配置反向代理，将博客的请求重定向到不同的服务器。

在本文中，您将了解反向代理服务器的基础知识、它们的工作原理、它们的主要优点以及如何使用它们来加速和保护您的WordPress站点。
什么是反向代理？

要了解什么是反向代理服务器，您首先需要了解它的作用并熟悉它的所有相关术语。

当您通过输入域名或单击链接正常浏览网页时，您的浏览器/设备会直接连接到网站的服务器并开始下载其资源。

通常如何在Internet上浏览

如果您想从您访问的网站匿名化您的IP地址，那么您可以使用代理服务器首先将您的所有请求发送给它。它会将您的请求转发到DNS解析器，然后从其源服务器下载网站的资源。

之后，它会将这些资源传递给您的设备。这称为转发代理。

转发代理服务器的工作原理

您对网站完全隐藏，因为它认为您的请求来自转发代理。

注：由于一些托管服务提供商统计站点访问的方式，他们要求用户设置一个标头以将他们的真实IP地址通知给源服务器。因此，隐私利益不适用于诸如此类的特定情况。

除了增强用户隐私外，转发代理主要用于绕过地理内容限制。例如，如果您想观看在您所在地区被阻止的视频，您可以使用转发代理和IP地址，在该IP地址上可以观看该视频。

转发代理的工作方式与虚拟专用网 (VPN) 几乎相同，但它们是具有独特用例的不同技术（尽管它们有时可能重叠）。

反向代理服务器与正向代理服务器

反向代理服务器充当源服务器的前端，以保持匿名性并增强安全性，就像用户/客户端如何使用正向代理来实现相同目的一样。它确保没有用户或客户端直接与源服务器通信。

反向代理服务器的工作原理

正向代理与反向代理之间的区别很小，但它们的工作方式不同。

两者可以一起工作，因为它们的功能之间没有重叠。通常，用户/客户端使用正向代理，而源服务器使用反向代理。

正向代理与反向代理服务器

由于服务器管理员可以控制反向代理的工作方式，因此您可以使用它来启用许多有用的功能。

我们将在本文后面列出它的所有好处。

为什么使用反向代理？

许多企业，尤其是大型企业，使用定制的网站，这些网站是根据他们的独特需求量身定制的，而不是在WordPress上运行。一些例子包括银行和保险网站。

在其他情况下，企业可能会将他们的网站托管在不允许他们安装任何外部软件（例如WordPress）的外部服务上。通常，这些是使用诸如Shopify等电子商务平台的中小型零售商。

由于WordPress具有强大的CMS功能，许多企业，包括拥有定制网站的大型企业，可能更喜欢使用WordPress托管他们的博客。

解决此问题的一种方法是在主网站的子域上安装WordPress并构建导航菜单，以便用户可以轻松地在主网站和博客之间切换。

由于子域表现为一个独特的域，它会影响您网站的SEO。尽管Google对子域和子目录一视同仁，但如果网站托管在子域中，则优化网站的搜索引擎排名要比托管在子目录中要花费更多的精力。

在网站上托管博客的两种方法

谷歌重申它平等对待子域和子目录，但一些SEO专家不同意。即使它不影响网站的SEO，托管在子目录中的网站也更容易维护。

这就是为什么您可以使用反向代理将请求重定向到托管在单独服务器上的站点博客。例如，银行可以在其服务器上安全地托管其主要网站，但他们也可以在另一家服务器提供商上单独托管其WordPress驱动的博客。

反向代理用例示例

将两个不同的站点统一在一个域名下是使用反向代理的主要优势之一。它可以帮助品牌保持其网站的组织性、专业性并保持信誉。

使用反向代理的好处

除了上述用例之外，反向代理还具有许多其他好处。下面的部分讨论了它们的一些主要优点。

负载均衡

单个源服务器无法处理具有数百万每日唯一访问者的网站的所有传入流量。在这些情况下，您可以在包含许多服务器的池中巧妙地分配流量。通常，所有服务器将托管相同的内容以消除单点故障，从而使网站更加可靠。

反向代理是一种很好的设置方式，因为它可以在传入流量到达源服务器之前接收它。如果源服务器过载或完全失败，它可以将流量分配给其他服务器，而不会影响站点功能。

反向代理还可以将传入请求定向到多个服务器，每个服务器执行其优化的特定功能。然后反向代理可以收集来自所有服务器的响应并将它们传递给客户端。

由于我们主要使用大多数流行的反向代理来进行负载平衡，因此它们也被称为负载平衡器。

全局服务器负载平衡 (GSLB)

GSLB是一种高级负载平衡方法，用于在世界各地战略性放置的许多服务器之间分配网站流量。它通常通过任播路由技术完成，其中反向代理根据客户端和服务器之间的最快传输时间选择服务器节点。

GSLB不仅大大提高了站点的可靠性和安全性，还减少了延迟和加载时间，从而增强了用户体验。您可以将GSLB与Spoon Feeding等其他网络优化技术结合使用，以进一步释放源服务器的计算资源。

尽管您可以在服务器上手动设置全局服务器负载平衡，但通常由Cloudflare和又拍云等专用CDN负责。

增强的安全性

反向代理可以掩盖原始服务器的IP地址和其他特征。因此，您网站的原始服务器可以更好地保持其匿名性，从而显着提高其安全性。

由于反向代理将在到达主服务器之前接收所有流量，因此任何攻击者或黑客都会发现很难将您的网站作为DDoS攻击等安全威胁的目标。

您可以使用严格的防火墙来加强反向代理的安全性，以抵御常见的网络攻击。如果没有安装反向代理，就很难删除恶意软件或开始删除。

像HAProxy这样的反向代理可以将基本的HTTP访问身份验证添加到没有启用它的 Web 服务器。您还可以使用反向代理为各种类型的请求添加集中式身份验证。

强大的缓存

您可以通过缓存静态和动态内容来使用反向代理来实现Web加速。这可以减少源服务器上的负载，从而使网站更快。

例如，如果您的源服务器在美国，并且来自欧洲的用户访问您的网站，那么您可以从欧洲的反向代理服务器提供您网站的缓存版本。由于反向代理比原始服务器更接近用户，因此网站加载时间会更短，从而使其表现出色。

Varnish和Nginx FastCGI是用于缓存Web内容的反向代理的突出示例。

卓越的压缩

服务器响应会占用大量带宽。在将它们发送到客户端之前压缩服务器响应（例如使用gzip）可以减少所需的带宽量，从而加快网络上的服务器响应。

反向代理非常适合压缩服务器响应，因为它位于源服务器和客户端之间。

优化的SSL加密

为每个客户端加密和解密SSL/TLS请求对于源服务器来说可能是非常繁重的。反向代理可以承担此任务以释放源服务器的资源用于其他重要任务，例如提供内容。

offload SSL/TSL加密和解密的另一个优点是减少地理上远离源服务器的客户端的延迟。

您还可以选择具有专用SSL/TLS加速硬件的反向代理来进一步优化此任务。这种反向代理称为SSL/TLS终止代理。Varnish等一些服务器不支持SSL/TSL协议，因此SSL/TSL终止反向代理可以帮助保护通过它们的流量。

更好的A/B测试

大多数A/B测试工具都要求您使用外部JavaScript库来加载它们的功能。但是，加载第三方脚本会减慢您的页面加载时间，并给用户带来不稳定的体验。

相反，您可以使用反向代理在服务器级别本身创建两个单独的流。例如，您可以使用Nginx的split_clients或sticky route方法来控制流量重定向。

您可以参考Nginx和freeCodeCamp的教程，了解更多关于使用反向代理执行A/B测试的信息。

监控和记录流量

反向代理捕获通过它的任何请求。因此，您可以将它们用作监控和记录流量的中心枢纽。即使您使用多个Web服务器来托管您网站的所有组件，使用反向代理也可以更轻松地监控您网站的所有传入和传出数据。

最受欢迎的反向代理

根据W3Techs的说法，几乎83%的网站不使用他们监控的反向代理服务。

网站使用的反向代理统计（来源：W3Techs.com）

在使用反向代理（如上所列）的17%网站中，您会注意到其中大多数是CDN。这是因为大多数反向代理默认隐藏它们的存在以作为安全预防措施。因此，您不能依赖像W3Techs这样的网站监控服务来查找哪些反向代理是最受欢迎的。

根据我们的研究和经验，当今最流行的反向代理是：

Nginx

Nginx是一个开源的Web服务器，也可以作为反向代理。除了用于托管网站外，它还是使用最广泛的反向代理和负载平衡解决方案之一。根据Netcraft的数据，2019年12月有超过4.79 亿台网络服务器在使用Nginx，使其成为网络服务器市场份额的领导者。

所有站点的Web服务器市场份额（来源：Netcraft）

Nginx提供了上面讨论的所有反向代理优势，以及更多。它提高了Web性能、安全性、可靠性和可扩展性。你可以使用它的配置文件来配置Nginx，它也是可热重载的。

但您也可以使用商业产品Nginx Plus来访问基于API的配置选项和其他适用于大型企业网站的功能。

Nginx在其参与的每个类别中都在Review Signal的顶级网络托管状态中名列前茅。使用Nginx的其他一些主要公司是MaxCDN、Cloudflare和Netflix。

将Nginx设置为基本的反向代理很简单。Nginx还为您提供各种指令来根据您的要求自定义服务器的反向代理。我们将在后面的部分讨论如何做到这一点。

Varnish

Varnish是一个带有内置缓存引擎的开源HTTP反向代理。它主要设计用于提供动态内容的高流量网站。您还可以将Varnish用作负载均衡器、Web应用防火墙 (WAF)以及边缘身份验证和授权服务器。

它适用于所有现代版本的Linux和FreeBSD，主要用作Nginx或Apache Web服务器的前端。Varnish强大且高度灵活的Varnish配置语言 (VCL)允许您定义各种功能，例如处理HTTP请求、缓存以及连接到一个或多个Web服务器。

出于这个原因，许多CDN使用Varnish作为快速交付内容的主要基础。

Varnish还支持Edge Side Includes (ESI)，这是一种帮助您在其他网页中重用一个网页的部分的语言。如果您的网站在不同页面中使用大量重复内容，ESI可以通过缓存常用部分来帮助您加快网站的页面加载时间。

您可以使用Varnish的各种模块 (VMOD)来扩展Varnish 。前往Varnish的官方教程，了解如何将Varnish设置为WordPress的反向代理。

Apache Traffic Server

Apache Traffic Server是一个开源缓存代理服务器。它因其快速、可扩展的特性而广受欢迎。它是雅虎开发的商业产品！很久以前，但他们将其开源并将其捐赠给Apache基金会进行维护。

Comcast、Akamai、LinkedIn、Yahoo和Apple等几个主要的内容网络和CDN都使用Apache Traffic Server来支持他们的技术。

您还可以使用Apache HTTP Server ( Apache httpd )，一个HTTP服务器守护程序，在您的Web服务器上设置反向代理。除了充当基本的Web服务器外，它还可以帮助您为用户提供静态和动态内容。您将在本文后面学习如何将Apache设置为反向代理。

HAProxy

HAProxy是一个开源的反向代理和负载均衡器。它旨在与大多数现有Web服务器架构集成，包括Linux发行版和云平台。与Nginx类似，HAProxy使用事件驱动的I/O模型，并支持跨多个工作进程拆分请求。

对于HTTP请求，HAProxy即使在高负载下也表现得非常好。互联网上一些流量最高的网站，例如Airbnb、Reddit、Instagram、Stack Overflow、Tumblr、GitHub和Imgur，都使用HAProxy来有效地交付他们的网站。

讨论如何实现HAProxy超出了本文的范围，但您可以参考他们的文档以了解其工作原理。

注意： Traefik和Envoy是HAProxy的另外两个开源替代品。它们既是高性能反向代理，又是具有许多高级功能的负载平衡器。

其他一些流行的反向代理是AWS Elastic Load Balancer、GLBC、DigitalOcean Load Balancer和Google Cloud Load Balancer。有关当今使用的顶级反向代理和负载均衡器的详尽列表，您可以查看Stackshare.io。

反向代理：WordPress网站的用例

为WordPress网站使用反向代理主要有三个用例。

加载“主站点”与“代理站点”

我们将仅在此示例中使用Nginx，因为它是当今用于WordPress网站的最流行的反向代理。但同样的基本原则也适用于其他反向代理。

反向代理通常难以安装、配置和支持。

1. 托管在同一台服务器上的主站点和代理站点

如果主站点和代理站点都托管在同一台服务器上，则主站点可以在WordPress安装上运行，而单独的WordPress安装为代理站点提供动力。

由于您可以访问站点及其共享Web服务器，因此您可以为主站点设置反向代理规则，然后将代理站点配置为从反向代理加载。

以下是用于通过反向代理加载子目录站点的标准Nginx反向代理指令：

location ^~ /subfolder/ {

proxy_pass http://subfolder.domain.com;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

}

location ^~ /subfolder/ {
proxy_pass http://subfolder.domain.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
```
location ^~ /subfolder/ {
proxy_pass http://subfolder.domain.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
```
在上面的代码中，您需要将/subfolder/占位符替换为实际的子目录名称（例如/blog/, /shop/）。此外，http://subfolder.domain.com子域应与用于将反向代理指向代理站点的URL匹配。

location指令包括插入符号和波浪号 ( ^~ ) 来告诉Nginx，如果它找到定义的字符串，它应该停止搜索进一步的匹配并使用此处列出的指令。在其文档中了解有关Nginx反向代理指令的更多信息。接下来，您需要配置代理站点以通过反向代理加载。以下是配置代理站点所遵循的标准步骤：
- 在加载代理站点的路径上创建一个子目录。所有代理网站的文件都移动到此子目录。
- 更新Web服务器的配置文件以将新子目录定义为代理站点的根目录。此外，您需要添加重写规则以从每个传入请求的请求URI中删除子目录。
- 更新代理站点数据库中的所有URL以匹配实时站点URL（例如example.com/blog）。
- 使用定义编辑代理站点的wp-config.php文件，$_SERVER['HTTP_HOST']将其指向主站点的URL。
- 如果您使用的是SSL证书，那么您需要在wp-config.php文件中定义严格的规则以避免重定向循环。
注意：代理站点不能创建与代理站点加载所在的同一子目录重复的URL。例如，代理站点example.com/blog无法在example.com/blog/blog.

2. 仅托管在您的服务器上的代理站点

如果您只能访问代理站点及其Web服务器，那么您需要联系主站点的服务器管理员并要求他们为您设置反向代理规则。

为此，您必须遵循上述相同的步骤，但在这种情况下，您必须在两个不同的服务器上配置规则。

要托管您的代理站点，请向该站点添加一个指向反向代理的域。通常，子域适合此目的（例如blog.example.com）通过子目录链接（例如）加载代理站点example.com/blog。

设置代理站点后，您可以联系服务器支持团队（DIY主机则需要自己动手）以配置代理站点以通过反向代理加载。此时，我们的支持团队将需要您服务器的真实 IP，以便以正确计算访问次数的方式完成设置过程。如果由于某些提供商（例如 AWS CloudFront）的动态IP限制而无法提供静态IP，您的计划将改为转换为基于带宽的类似计划。

3. 仅托管在您的服务器上的主站点

如果您只能访问主站点及其Web服务器，则应设置反向代理并配置其规则以从外部主机加载代理站点。安装和配置代理站点以通过反向代理加载是辅助服务器管理员的责任。

DIY主机可以添加本文前面列出的标准反向代理规则。如果需要，您还可以将任何其他自定义添加到这些规则中。

在这种情况下，您完全负责配置代理站点以通过反向代理正确加载它。

如何将Nginx设置为反向代理

如果您的是DIY服务器，那么您必须自己设置反向代理并将其配置为指向代理站点。

根据您的Web服务器的操作系统，您可以以不同的方式安装Nginx。对于Linux发行版，您可以根据您的Linux发行版的版本使用各种Nginx包。

在下面的示例中，我们将主站点安装在example.com域名中，而代理WordPress站点安装在blog.domain.com子域中。它们都由运行在Ubuntu 18.04上的Web服务器上的Apache提供支持。我们将在主服务器上安装和配置Nginx作为反向代理。

首先，通过SSH访问服务器的终端。然后使用该apt-get命令更新您的发行版的软件包列表并在您的Web服务器上安装Nginx。

sudo apt update

sudo apt install nginx

sudo apt update
sudo apt install nginx
```
sudo apt update
sudo apt install nginx
```
接下来，您需要将Nginx配置为代理Apache上托管的域的请求。为此，请创建一个新的虚拟主机文件。在这里，我使用nano编辑器添加代码，但您可以使用您选择的任何代码编辑器。

sudo nano /etc/nginx/sites-available/example.com.conf

sudo nano /etc/nginx/sites-available/example.com.conf
```
sudo nano /etc/nginx/sites-available/example.com.conf
```
然后通过添加以下server {...}和location块来设置Nginx指令以将请求转发到Apache：

server {

listen 80;

server_name example.com www.example.com;

index index.php;

root /var/www/example.com/public # fallback for index.php

location / {

try_files $uri $uri/ /index.php?$query_string;

}location /blog {

proxy_pass http://blog.domain.com;proxy_http_version 1.1;

proxy_cache_bypass $http_upgrade;

# Proxy headers

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection “upgrade”;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Forwarded-Host $host;

proxy_set_header X-Forwarded-Port $server_port;

# Proxy timeouts

proxy_connect_timeout 60s;

proxy_send_timeout 60s;

proxy_read_timeout 60s;

}

server {
listen 80;
server_name example.com www.example.com;
index index.php;
root /var/www/example.com/public # fallback for index.php
location / {
try_files $uri $uri/ /index.php?$query_string;
}location /blog {
proxy_pass http://blog.domain.com;proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
# Proxy headers
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
# Proxy timeouts
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
```
			2023年1月13日
		
```