分类: WordPress开发

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

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

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

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

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

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

    调试概述

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

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

    语法错误

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

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

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

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

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

    npm i eslint -g
    npm i eslint -g
    npm i eslint -g

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

    eslint mycode.js
    eslint mycode.js
    eslint mycode.js

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

    VS Code中的ESlint

    VS Code中的ESlint

    逻辑错误

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

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

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

    运行时(或执行)错误

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

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

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

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

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

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

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

    NODE_ENV=development
    NODE_ENV=development
    NODE_ENV=development

    或在(经典)Windows命令提示符下:

    set NODE_ENV=development
    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
    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 }`);
    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.dir(myObject, { depth: null, color: true });

    控制台争议

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

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

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

    使用第三方日志系统

    第三方日志系统提供更复杂的功能,例如消息传递级别、详细程度、排序、文件输出、分析、报告等。流行的解决方案包括cabinetloglevelmorganpinosignalestoryboardtracerwinston

    使用V8检查器

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

    node inspect app.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
    <
    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>
    $ 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
    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
    node --inspect=0.0.0.0:9229 index.js

    节点检查选项

    节点检查选项

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

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

    Chrome检查工具

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

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

    有许多工具可以让您设置本地开发环境来创建和测试WordPress网站。MAMP就是其中之一,它非常易于使用。

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

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

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

     

    1. MAMP简介
    2. 为什么要增加Web服务器的PHP上传大小
    3. 如何增加本地Web服务器MAMP的上传大小

     

    MAMP简介

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

    MAMP主页

     

    MAMP是一种工具,可让您在macOS或Windows计算机上设置本地服务器环境。有了它,您可以在您的计算机上安装以下软件:

    您可以使用许多其他工具在本地安装WordPress。但是,我们喜欢MAMP,因为它为您提供了一个直观的控制面板以及为您的Web服务器软件在Nginx和Apache之间切换的选项:

     

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

    使用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”旁边的版本号:

     

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

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

     

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

     

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

    一个php.ini配置文件

     

    正如我们在上一节中解释的那样,您需要查找以下三个指令:

    1. memory_limit
    2. post_max_size
    3. upload_max_filesize

    我们建议将内存限制设置为128或256MB。这是该值在我们的php.ini文件中的样子:

     

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

    增加你的PHP内存限制

     

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

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

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

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

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

    第 2 步:检查您的phpInfo页面

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

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

     

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

    打开您的MAMP的WebStart页面

     

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

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

     

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

    使用WebStart访问您的phpInfo页面

     

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

     

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

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

     

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

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

    小结

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

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

    幸运的是,配置MAMP以增加其上传大小很简单。您所要做的就是更新本地php.ini文件中的三个指令:memory_limitpost_max_sizeupload_max_filesize.

  • 如何使用Tailwind CSS快速开发新潮时髦网站

    如何使用Tailwind CSS快速开发新潮时髦网站

    随着您作为开发人员的进步,您更有可能使用通过编写更少代码来帮助您完成更多工作的技术。像Tailwind CSS这样可靠的前端框架是实现这一目标的一种方法。

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

    1. 什么是Tailwind CSS?
    2. 什么是框架?
    3. 什么是实用程序优先的CSS框架?
    4. 使用Tailwind CSS的先决条件
    5. 如何开始使用Tailwind CSS
    6. 如何创建Tailwind 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十六进制代码来说明这一点

    从Tailwind的默认调色板自定义颜色

  • 如何设置Nginx和Apach反向代理

    如何设置Nginx和Apach反向代理

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

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

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

    1. 什么是反向代理?
    2. 使用反向代理的好处
    3. 最受欢迎的反向代理
    4. 反向代理:WordPress网站的用例
    5. 如何将Nginx设置为反向代理
    6. 如何将Apache设置为反向代理
    7. 反向代理的限制
    8. 在CDN和反向代理之间进行选择

    什么是反向代理?

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

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

    通常如何在Internet上浏览

    通常如何在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_clientssticky route方法来控制流量重定向。

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

    监控和记录流量

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

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

    网站使用的反向代理统计

    网站使用的反向代理统计(来源:W3Techs.com)

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

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

    Nginx

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

    所有站点的Web服务器市场份额

    所有站点的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超出了本文的范围,但您可以参考他们的文档以了解其工作原理。

    注意: TraefikEnvoy是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;
    }
    			
    		
  • 如何编辑本地电脑Hosts文件 – 在更新DNS之前预览站点

    如何编辑本地电脑Hosts文件

    您计算机上的hosts文件允许您覆盖DNS并手动将主机名(域)映射到IP地址。这可以在迁移过程中派上用场,因为您可能想查看您的网站在不同服务器上的外观,但可能DNS尚未传播。

    例如,CDN是一项不适用于临时URL的功能,除非您以这种方式手动配置它。因此,在迁移或进行DNS更改之前预览您的网站并尽可能接近它的一种简单方法是编辑您的本地电脑Hosts文件。

    如果您不习惯编辑主机文件,还可以为初学者提供免费工具选项。

    准备预览您的网站

    在您的计算机上编辑主机文件实质上意味着您正在伪造计算机上的DNS。但在编辑文件或使用我们推荐的免费工具之前,您必须先做两件事。

    1.将您的域添加到您的虚拟主机

    您首先需要将您的域添加到您的主机。如果您是宝塔用户,这可以在宝塔控制面板中轻松完成。只需单击进入域并添加主域。我们还建议您添加域名的www或非www版本。这将指示服务器将该域解析为其分配的内部IP。

    宝塔网站管理

    宝塔网站管理

    2. 找到你的SFTP/SSH IP地址

    您还需要复制分配给您的站点的SFTP/SSH IP地址。

    完成上述两个步骤后,您可以继续以下三个不同选项,了解如何在更改DNS之前预览您的网站,这包括免费在线工具或编辑您的主机文件。

    选项 1 – 预览网站而不编辑任何内容(初学者)

    如果您不习惯在下面的选项2或3中编辑主机文件,可以使用免费的在线SkipDNS工具预览您的网站,这是一种超级简单的方法。

    重要提示: SkipDNS是一项外部服务,旨在帮助您在更改DNS之前预览网站的外观。它不应用于评估您网站的速度或性能。为此,您应该使用下面的选项之一,或者您的临时URL。

    第 1 步

    只需浏览到skipdns.link并输入您的域名和IP地址(我们在上面向您展示了如何获取)。

    根据您是否已安装SSL证书,您可能还需要启用“灵活SSL”选项。

    如果它们正在运行,建议您暂时禁用它们,因为我们已经看到了一些遇到的问题:

    • CDN(如果您正在运行CDN启用程序之类的插件,请暂时停用此功能)
    • Adobe Fonts(如果可能,将其注释掉或从您的标题中删除,否则您的字体可能会出现损坏)

    如果您不确定如何执行此操作,您可以询问您的房东。或者使用下面的第二个选项,这是一种预览东西而不会破坏任何东西的好方法。

    跳过DNS

    跳过DNS

    第 2 步

    然后创建预览。点击“Check it”。

    如何编辑本地电脑Hosts文件 - 在更新DNS之前预览站点-3

    已创建SkipDNS预览

    第 3 步

    然后,您将获得一个临时URL,可用于在更改DNS之前查看您的WordPress站点。您可以浏览到您的临时URL并单击以确认一切正常。

    在DNS更改之前预览网站

    在DNS更改之前预览网站

    选项 2 – 如何在Windows上编辑Hosts文件

    选项2需要编辑您的Hosts文件。这将在更改DNS之前更接近地复制您的实时站点。与上面的临时URL相比,这样做的一个优点是您不必担心禁用CDN或Web字体。

    如果您想要一种快速简便的方法,您可以使用免费的应用程序,例如Hosts File Editor。这使您可以一次管理多个条目,并对它们进行过滤和排序。

    否则,您可以按照以下步骤在Windows上手动编辑Hosts文件。

    第 1 步

    hosts文件通常需要额外的访问权限。所以第一步是以管理员身份打开你的文本编辑器。只需单击您的开始菜单,搜索您的文本编辑器,右键单击它并选择“以管理员身份运行”。这可以在任何文本编辑器中完成,例如Notepad、Notepad++、Atom等。我们在下面的示例中使用 Sublime。

    以管理员身份打开文本编辑器

    以管理员身份打开文本编辑器

    第 2 步

    在您的文本编辑器中单击文件 > 打开并浏览到以下位置:

    C:WindowsSystem32driversetc

    第 3 步

    单击主机文件并“打开”。

    打开Hosts文件

    打开Hosts文件

    第 4 步

    在文件的最底部插入您的IP地址(您在上面获得)和您的域名(在我们的示例中,我们使用wpdev.ink)。如果要测试重定向,还可以添加www或非www版本。这是我们添加到主机文件中的示例。

    192.168.1.2 wpdev.ink 
    192.168.1.2 www.wpdev.ink

    添加上述内容后,保存文件。

    在Windows中编辑Hosts文件

    在Windows中编辑Hosts文件

    然后,您可以启动浏览器并导航到您插入的域。然后它将像在服务器上一样显示。您可以测试诸如登录您的WordPress管理仪表板、点击站点等。一旦您完全满意,您可以从主机文件中删除DNS信息。然后,您可以通过您的域名注册商或第三方DNS提供商将您的DNS指向服务器。

    选项 3 – 如何在Mac上编辑Hosts文件

    如果您想要一种快速简便的方法,我们建议您查看Gas Mask。这是一个免费的应用程序,可以用作主机文件管理器,主机文件编辑器,并在它们之间切换。

    Tips:如果您在最新版本的macOS上安装Gas Mask,您可能会遇到一条错误消息:“Gas Mask无法打开,因为Apple无法检查其是否存在恶意软件”。如果您遇到此错误,请导航至“系统偏好设置”、“安全和隐私”,然后单击“Gas Mask已被阻止使用,因为它不是来自已识别的开发人员”旁边的“仍然打开”。

    否则,您可以按照以下步骤在Mac上手动编辑主机文件。

    第 1 步

    单击屏幕底部的“Finder”图标。单击应用程序,然后单击实用程序。

    在MAC上打开实用程序

    在MAC上打开实用程序

    第 2 步

    单击“终端”应用程序并输入以下内容并按Enter(很可能还会提示您输入管理员密码)。

    sudo nano /private/etc/hosts

    Mac终端浏览到hosts文件

    Mac终端浏览到hosts文件

    第 3 步

    再次按Enter开始编辑文件。使用键盘上的箭头向下移动到底部。然后插入您的IP地址(您在上面获得)和您的域名(在我们的示例中,我们使用wpdev.ink)。如果要测试重定向,还可以添加www或非www版本。这是我们添加到主机文件中的示例。

    192.168.1.2 wpdev.ink 
    192.168.1.2 www.wpdev.ink

    然后按Command + O这将询问您是否要写入文件。然后按Enter。您应该会在屏幕底部看到书面确认。然后关闭终端。

    在Mac上编辑主机文件

    在Mac上编辑主机文件

    然后,您可以启动浏览器并导航到您插入的域。然后它将像在服务器上一样显示。您可以测试诸如登录您的WordPress管理仪表板、点击站点等。一旦您完全满意,您可以从主机文件中删除 DNS 信息。然后,您可以通过您的域名注册商或第三方DNS提供商将您的DNS指向服务器。

  • 如何实现WordPress网站降级(用于解决插件和主题问题)

    如何实现WordPress网站降级(用于解决插件和主题问题)

    在最新可用版本上运行WordPress安装、插件和主题是使用该平台的关键最佳实践。还建议使用最新版本的PHP。但是,在某些情况下,这是不谨慎或不可能的。

    如果您发现自己处于这种情况,您可能需要撤消更新并降级您的WordPress网站(或其中的一部分)。幸运的是,有一些方法可用于回滚您网站的每个元素。

    这篇文章将解释为什么您可能需要降级WordPress,以及如何安全地降级。我们将介绍恢复以前版本的WordPress,以及回滚插件、主题和PHP。

    1. 为什么要降级您的WordPress版本或其他功能
    2. 如何降级您的WordPress网站

    为什么要降级您的WordPress版本或其他功能

    运行最新版本的WordPress核心(在我们的例子中是WordPress 5.5 )、插件和主题是维护网站最重要的步骤之一。这些更新通常包括安全补丁,这些补丁对于防止对您的站点的恶意攻击至关重要,并且可能会增强性能和功能。

    因此,我们不建议永久降级WordPress或其任何组件。但是,在某些情况下,您可能希望暂时这样做。

    最常见的原因是由于插件或主题冲突。例如,如果您网站的某个元素与最新版本的WordPress核心不兼容,则降级安装可以让访问者在您使用长期解决方案时访问该功能。

    (建议阅读:如何修复WordPress中的错误“网站遇到技术问题。”)。

    如果两个插件之间或插件与您的主题之间发生冲突,降级WordPress本身将无济于事。相反,您需要回滚导致问题的插件或主题的版本,以便让您的网站重新启动并运行。

    此外,一些较旧的插件和主题可能与较新版本的PHP不兼容。如果有问题的插件或主题对您网站的功能至关重要,您可能希望在找到替代解决方案时降级PHP一段时间。

    简而言之,降级WordPress应该是一个临时的故障排除过程。一旦您更换了有问题的插件或主题,或者以其他方式解决了导致您网站冲突的问题,您将需要计划再次更新您的网站。

    如何降级您的WordPress网站

    降级WordPress网站的过程将取决于您要完成的工作。您可能会发现您需要恢复整个网站的先前版本,或者您只需要恢复单个插件或主题而不是WordPress本身。

    考虑到这一点,这里有六种不同的方式可以让您回滚您的网站。每个都解决了不同的需求,因此我们建议您通读所有这些,看看哪个最适合您的具体情况。

    1. 手动降级您的WordPress版本

    如果您遇到严重的冲突导致您无法访问网站的后端,手动降级WordPress可能是您最好或唯一的选择。在开始之前,您需要备份您的网站以确保安全。

    接下来,您应该停用所有插件。如果您可以访问WordPress后端,这很容易。只需选中每个插件旁边的复选框,然后使用批量停用选项:

    在后端批量停用WordPress插件

    在后端批量停用WordPress插件

    如果您无权访问仪表板,则可以使用安全文件传输协议 (SFTP) 和FileZilla等客户端手动停用插件。您还需要这些工具用于以后的步骤,因此如果您不熟悉它们,您可能需要花点时间了解它们的工作原理。

    然后,您需要下载相关版本的WordPress。我们建议尽可能使用最新版本,通常是第二个最新版本。您可以在WordPress发布存档中访问您需要的文件:

    WordPress发布档案

    WordPress发布档案

    然后,使用FTP和FileZilla(或其他客户端)访问您网站的文件并删除您的wp-adminwp-includes目录:

    通过FTP删除wp-admin和wp-includes

    通过FTP删除wp-admin和wp-includes

    完成后,上传您要安装的WordPress版本中的所有文件,wp-content目录除外。当询问您是否要覆盖文件时,选择Overwrite > Ok

    覆盖FileZilla中的文件

    覆盖FileZilla中的文件

    然后,导航到您网站的后端。您可能会看到一条消息,要求您更新数据库。如果是这样,请单击更新WordPress数据库提示。之后,照常登录您的网站。

    您现在应该可以访问并运行旧版本的WordPress:

    降级的WordPress安装

    降级的WordPress安装

    此时,您可以重新激活插件并着手解决原始冲突。

    您可能还想禁用自动更新 ,以防止WordPress在此期间安装另一个版本。当您的问题得到解决后,您可以从仪表板的更新屏幕返回到最新版本的WordPress 。

    2. 使用WP Downgrade运行以前版本的WordPress

    如果您觉得通过FTP删除核心文件比较复制,可以使用一个插件来降级WordPress,请在备份您的网站后继续安装WP Downgrade

    安装WP Downgrade插件

    安装WP Downgrade插件

    然后,导航到设置 > WP Downgrade并在相关字段中输入您的WordPress目标版本:

    设置WordPress目标版本

    设置WordPress目标版本

    单击Save Changes,然后转到更新屏幕。您会看到您的目标版本现在被列为“最新版本的WordPress”:

    重新安装WordPress 5.0

    重新安装WordPress 5.0

    单击立即重新安装按钮以完成降级。WordPress似乎会运行正常更新,然后您应该会看到目标版本的欢迎消息:

    WordPress 5.0欢迎信息

    WordPress 5.0欢迎信息

    完成故障排除后,要重新安装最新版本的WordPress,您需要返回Settings > WP Downgrade。您可以将目标版本更改回最新更新,然后重复上述过程。

    3.恢复以前的备份以撤消对您网站的更改

    另一种降级站点的方法是从站点运行早期版本的WordPress时恢复备份。当然,为了使其正常工作,您需要有一个可靠的备份系统 。

    您还需要确保正在恢复的站点副本没有丢失最近添加的任何关键内容。您不想在尝试降级 WordPress 时无意中丢失最新帖子。如果您的网站是高度动态的,那么这可能不是最佳选择。

    如果您选择继续,恢复备份的过程将根据您用于创建和存储文件的系统而有所不同。例如,宝塔客户可以利用我们的一键恢复过程。只需登录您的宝塔控制面板即可开始使用,然后单击数据库,找到网站对应数据库的备份栏,点击有备份,在弹窗中选择需要恢复的数据库即可:

    宝塔数据库恢复

    宝塔数据库恢复

    要恢复网站文件,则可以点击网站,在列表中选择您需要恢复备份的网站,点击备份栏下的有备份,下载备份覆盖现有的网站目录,您也可以直接在宝塔的文件直接恢复覆盖网站文件目录。

    宝塔网站文件恢复

    宝塔网站文件恢复

    注:如果你使用宝塔管理服务器,建议设置定时任务对网站文件及数据库进行定期备份。

    4. 手动降级插件或主题

    如果您需要降级插件或主题而不是WordPress核心,您可以使用类似于方法#1中的过程手动执行此操作。要开始使用,您需要检索要降级的旧版本插件或主题的文件。

    对于WordPress目录中的插件,您可以通过单击功能页面上的高级视图来找到旧版本:

    WordPress目录中插件页面上的高级视图链接

    WordPress目录中插件页面上的高级视图链接

    滚动到页面底部,然后从下拉菜单中选择您需要的版本并点击下载

    通过WordPress插件目录下载以前版本的插件

    通过WordPress插件目录下载以前版本的插件

    解压缩文件并将其保存到您的计算机。然后备份您的站点以防万一出现问题,并使用FTP和您的首选客户端连接到您的服务器。在那里,导航到wp-content > plugins

    接下来,您需要重命名插件现有版本的目录。然后上传您希望降级到的先前版本的文件夹:

    通过FTP上传旧版本的插件

    通过FTP上传旧版本的插件

    这应该会成功恢复您需要的旧版本的插件。此外,您可以轻松获取最新版本,以便在准备好时切换回它。

    不幸的是,这种方法对于主题和高级插件变得更加棘手。回滚它们的过程或多或少是相同的,但WordPress主题目录没有可供下载的早期版本。

    至于高级插件,以前的版本可能很容易访问,也可能不容易访问。如果您找不到所需的插件或主题版本,最好的办法是尝试联系开发人员寻求帮助。

    5. 使用WP Rollback回滚插件和主题更新

    幸运的是,有一种 更简单的方法可以降级插件和主题。您需要做的就是安装并激活WP Rollback

    安装WP Rollback插件

    安装WP Rollback插件

    该插件会定期更新,并在WordPress插件目录中获得令人印象深刻的五星级评级。一旦它启动并运行,导航到您的插件列表。

    现在,您将 在每个插件的标题下看到一个Rollback按钮,以及标准选项:

    启用回滚选项

    启用回滚选项

    如果单击此新选项,您将被重定向到可以选择目标版本的页面。然后选择Rollback按钮开始降级过程:

    选择插件回滚目标版本

    选择插件回滚目标版本

    回滚主题同样容易。导航到仪表板中的外观 > 主题 ,然后选择要降级的主题。现在在窗口底部会有一个Rollback按钮:

    回滚WordPress主题

    回滚WordPress主题

    在以下屏幕上,您可以选择目标版本并启动降级过程,就像您对插件一样。当您需要恢复相关插件或主题时,您可以从相关目录执行此操作。

    6. 恢复到旧版本的PHP

    2019年,WordPress对其PHP要求进行了一些更改。出于这个原因,以及使用最新版本的诸多好处,始终建议升级您网站的PHP。

    但是,一些没有得到很好维护的旧插件可能与新版本的PHP不兼容。理想情况下,您将始终使用从开发人员那里获得定期更新和支持的工具。

    但是,如果您有一个对网站功能至关重要的过时插件,但不能与最新版本的PHP一起使用,您可以执行降级。使用宝塔管理服务器的优势在于能够直接从他们的宝塔仪表板轻松切换PHP版本。

    为此,请登录您的宝塔管理后台。导航到软件商店,搜索php,然后安装您需要的PHP版本:

    宝塔安装PHP版本

    宝塔安装PHP版本

    然后点击网站,找到需要切换PHP版本的网站对应的操作“设置”,在弹窗中选择“PHP版本”,然后在PHP版本选择您所需要的版本,点击“切换”即可。

    切换网站PHP版本

    切换网站PHP版本

    如果您不是宝塔用户,或者您需要安装比通过PHP引擎功能提供的版本更早的版本的PHP,则需要使用命令行降级PHP

    这个过程更先进,风险也更大。在这种情况下,最好考虑立即更换有问题的插件或主题,而不是降级PHP并尝试进一步解决冲突。

    小结

    在对站点进行故障排除或执行其他关键任务时,有时需要降级WordPress 。虽然没有实现此目标的本机功能,但有多种方法可以恢复到您网站的先前版本。

    这篇博文涵盖了六种不同的方式来降级您的WordPress网站及主题、插件、PHP版本等:

    1. 手动降级您的WordPress网站。
    2. 使用WP Downgrade运行以前版本的WordPress。
    3. 恢复以前的备份以撤消对您网站的更改。
    4. 手动降级插件或主题。
    5. 使用WP Rollback进行回滚插件和主题更新。
    6. 恢复到旧版本的PHP。
  • 如何解决MAMP无法正常启动运行的问题

    如何解决MAMP无法正常启动运行的问题

    对于WordPress开发人员来说,拥有一个可用的本地暂存环境是必不可少的。MAMP是一种流行的解决方案,但一些常见问题可能会阻止平台正常运行。

    幸运的是,MAMP用户已经找到了解决这些问题的相当简单的解决方案,您可以使用它来让您的本地堆栈重新运行。通常,只需单击几下即可。

    在本文中,我们将回顾MAMP是什么、它为什么有用以及如何找到它的错误日志。然后,我们将引导您了解MAMP无法启动的五个常见解决方案。

    1. MAMP简介
    2. 如何检查您的MAMP错误日志
    3. 如果MAMP没有启动怎么办

    MAMP简介

    MAMP是几个流行的本地开发平台之一。它将您的计算机变成一个服务器环境,可以在您处理网站时托管网站:

    MAMP主页

    MAMP主页

    MAMP使用Apache、MySQL和PHP,使其与WordPress高度兼容。有一个免费版本,或者您可以付费购买包含安装程序和其他功能的专有版本 ,以帮助您快速设置您的第一个站点并改善您的工作流程。

    与本地托管的所有网站一样,您的MAMP开发或测试网站不会公开。这使您能够自由地构建或测试功能,而不必担心它会影响您的前端用户体验 (UX)。它还可以防止访问者偶然发现您半成品的网站。

    此外,本地开发不需要互联网连接,因此您可以在任何地方工作。本地网站也往往加载速度更快,这可能会在一定程度上提高您的工作效率。完成网站的构建或更改后,您可以将其迁移到实时服务器。

    我们在上一篇文章中介绍了如何安装MAMP  。在这个阶段,我们假设您已经在使用它但遇到了问题。

    如何检查您的MAMP错误日志

    查找MAMP错误日志非常简单。只需导航到保存安装的文件夹并打开日志文件夹。您应该会看到Apache、MySQL和PHP错误日志的文件:

    MAMP错误日志文件

    MAMP错误日志文件

    如果您遇到MAMP无法启动的问题,这应该是您的第一步。检查日志以查看是否有任何与问题相关的消息,以及它们是否提供了您可以采取的具体步骤来解决问题。这比试错法故障排除要快得多。

    如果MAMP没有启动怎么办

    MAMP用户遇到的一些常见问题包括Apache未启动和MySQL未启动。这两个问题都会阻止平台运行,使您无法访问本地站点。以下是一些可以帮助您解决这两个障碍的顶级解决方案,因此您可以重新开始工作。

    1.恢复您的文档根文件夹

    MAMP安装的文档根目录是存储虚拟主机的HTML、PHP和图像文件的位置。假设您有意或无意地更改或删除了您的文档根文件夹。在这种情况下,您可能会看到一条错误消息:“Apache couldn’t be started. Please check your MAMP installation and configuration”:

    Apache无法启动

    Apache无法启动。请检查您的MAMP安装和配置。

    要解决此问题,您只需恢复文档根文件夹或告诉MAMP您已将其移动到何处。此过程因您使用的是Mac还是Windows机器而异,因为文件路径可能略有不同。但是,您应该能够在任一操作系统 (OS) 上执行以下步骤。

    默认情况下,MAMP文档根目录位于macOS上的Applications/MAMP/htdocs或Windows上的C:MAMPhtdocs  。如果您知道您的新文档根文件夹在哪里,您可以通过导航到Applications (或C: )  >MAMP>conf>apache>httpd.conf打开您的MAMP配置文件,然后用新路径替换默认路径。

    打开httpd.conf后,搜索提及“DocumentRoot”并替换所有位置的默认路径。保存文件,然后停止并重新启动MAMP。

    或者,您可以通过MAMP控制面板选择新的文档根目录。打开Preferences窗口并选择Web Server选项卡:

    MAMP Web服务器首选项

    MAMP Web服务器首选项

    确保选择了Apache。然后,单击Document Root 旁边的Select按钮。这将打开一个Finder窗口,您可以在其中选择要用作文档根目录的文件夹。

    选择正确的文件夹后单击选择,然后在MAMP选项窗口中选择确定:

    在Web Server首选项窗口中确认MAMP文档根目录

    在Web Server首选项窗口中确认MAMP文档根目录

    这将重置您的文档根目录并自动重新启动MAMP。然后Apache应该能够启动。

    2. 改变你的监听端口

    默认情况下,MAMP在端口8888上运行 Apache。如果此端口正被其他应用程序使用,则Apache将无法启动。

    要解决此问题,您可以退出阻止Apache连接到端口8888的应用程序,或者更改MAMP配置文件中的侦听端口。

    如果您想发现哪个应用程序阻塞了端口,您可以使用命令行来执行此操作。您需要输入的命令会因您的操作系统而异:

    • macOS:sudo lsof -nP -iTCP:$PORT | grep LISTEN
    • Windows:netstat -ab | more

    这些应该返回一个进程标识符 (PID) 列表和它们正在运行的端口。您可以使用以下方法之一终止在您需要的端口上运行的进程以启动MAMP:

    • macOS:sudo kill -9 <PID>
    • Windowstaskkill /F /PID pid_number

    执行上述命令时,请确保将$PORT<PID>pid_number等占位符替换为适当的值

    如果要更改MAMP配置文件中的侦听端口,可以通过打开httpd.conf文件并将所有提及的“port 8888”更改为“port 8000”(或其他替代方法)来实现。保存文件,然后重新启动Apache。

    此外,您可以在Preferences>Ports中更改Apache端口:

    MAMP端口首选项

    MAMP端口首选项

    单击确定以保存您的更改。

    3.杀死所有MySQL进程并重新启动MAMP

    如果您的MAMP问题是由于MySQL而不是Apache,您可以尝试一些首选修复程序。该问题通常是由于在同一端口上运行了另一个MySQL服务。

    最简单的解决方案是杀死所有MySQL进程并重新启动MAMP。在macOS上,您可以使用Activity Monitor来执行此操作,您可以在计算机的Utilities文件夹中找到它。

    搜索“mysqld”,选择任何正在运行的进程,然后单击窗口左上角的X按钮退出它们:

    通过活动监视器杀死活动的MySQL进程

    通过活动监视器杀死活动的MySQL进程

    Windows用户需要从开始菜单打开资源监视器:

    Windows资源监视器应用程序

    Windows资源监视器应用程序

    搜索mysqld.exe文件,右键单击它,然后选择结束进程(End Process)。退出计算机上的所有MySQL进程后,停止并重新启动MAMP。

    4. 清除你的MySQL日志

    如果杀死计算机上所有活动的MySQL进程无法启动MySQL,您可以尝试删除MySQL日志文件。这些存储在您的MAMP的db/mysql57目录中:

    MAMP MySQL日志文件

    MAMP MySQL日志文件

    它们应该命名为ib_logfile0ib_logfile1等。备份日志文件,然后删除它们并重新启动MAMP。日志文件将在再次需要时自动重新生成。

    5.删除mysql.sock.lock文件

    MAMP必须将活动进程的进程标识符 (PID) 写入mysql.sock.lock 文件。如果此任务失败,则该文件将被留下而不是在该过程完成后被删除。

    这将阻止MySQL启动,因为它将空的mysql.sock.lock文件与包含正在运行的PID的文件相同。要解决此问题,您需要手动删除该文件。

    导航到您的MAMP文件( Mac上的Applications/MAMP 或Windows上的C:MAMP  )并查找tmp文件夹。然后选择mysql 文件夹,搜索mysql.sock.lock文件,删除。与日志文件一样, 下次需要时会自动创建一个新的mysql.sock.lock文件。

    小结

    MAMP是许多WordPress专业人士和爱好者的本地开发解决方案之一(注意:它不是唯一的)。但是,可能会出现一些问题,这些问题会阻止您的服务器启动,并最终延迟您的工作流程。

    在本文中,如果Apache或MySQL无法启动,我们将向您介绍五种可能的解决方案:

    1. 恢复您的文档根文件夹。
    2. 更改您的侦听端口。
    3. 杀死所有MySQL进程并重新启动MAMP。
    4. 清除您的MySQL日志。
    5. 删除mysql.sock.lock文件。
  • 什么是Localhost?以及它如何应用于WordPress?

    什么是Localhost?以及它如何应用于WordPress?

    在计算机网络中,“localhost”是指运行特定程序的计算机。例如,如果您在自己的计算机上运行程序(如Web浏览器或本地Web开发环境),那么您的计算机就是“Localhost”。另一方面,如果您谈论的是位于主机Web服务器上的MySQL数据库,那么您主机的Web服务器就是该场景中的“Localhost”。

    用最简单的术语来说,您基本上可以将localhost视为“这台计算机”的意思。 请记住,“这台计算机”适用于程序, 不一定适用于您实际使用的计算机。

    localhost通常将IP地址解析为127.0.0.1,也称为环回地址。由于其重要性,术语“localhost”是一个保留域名。也就是说,为避免混淆,不能注册顶级域名或二级域名中包含“localhost”的域名。

    使用WordPress遇到Localhost的2种常见情况

    在与WordPress相关的两个方面,您可能会遇到术语localhost:

    • 在本地环境中开发/测试WordPress网站
    • 设置/配置对WordPress站点数据库的访问

    首先,许多WordPress开发人员创建了一种称为“本地测试环境”的东西来构建WordPress网站。从本质上讲,这个环境模仿了一个实时网站,但在用户自己的计算机上是完全独立的。

    由于该站点仅存在于本地主机上,因此开发人员可以轻松地进行测试,而不必担心破坏可能正在接收外部流量的实时网站上的某些内容。网站完成后,开发人员可以将网站从他们的本地主机环境移动到实时服务器环境。

    除了WordPress开发和测试之外,如果您手动输入或编辑WordPress站点的数据库凭据,您也可能会遇到术语localhost。这可能在您编辑wp-config.php文件或使用插件时发生。

    下面,您将了解有关每种情况的更多信息……

    如何在本地安装WordPress(您的“本地主机”)

    您可以使用许多通用工具和特定于WordPress的工具来创建本地WordPress开发环境。使用这些工具中的任何一个,您实际上都可以在自己的计算机上创建一个独立的Web服务器。以下是一些最常见的WordPress本地开发工具:

    使用所有这些工具,您首先需要安装和配置它们以创建本地环境。这本质上是一个Web服务器localhost (也就是说,它是一个运行在“您的计算机”上的Web服务器)。本地服务器环境运行后,您可以像在主机上一样在其上安装WordPress。一些工具,如DesktopServer,还包括快速安装WordPress的内置机制。

    然后,您可以通过在浏览器地址栏中键入“localhost”来访问本地WordPress站点:

    本地开发环境示例

    本地开发环境示例

    为什么您的WordPress数据库在大多数情况下都位于本地主机

    正如您在本文开头所了解的,“localhost”是指运行程序的计算机。

    这就是为什么这对您的WordPress网站的数据库很重要:

    在99%的情况下,您的WordPress站点的数据库将与您的WordPress站点的其余文件位于同一台服务器上。因此,每当您编辑wp-config.php文件或插件询问您的“MySQL主机名”或“MySQL主机”时,您都可以输入“localhost”。

    例如,在安装WordPress时wp-config.php文件中的DB_HOST条目如下所示:

    wp-config.php文件中的本地主机

    wp-config.php文件中的本地主机

    同样,如果您使用Duplicator之类的插件迁移WordPress网站,那么当插件要求您输入数据库的主机值时,您可以输入“localhost”:

    Duplicator插件中的localhost使用

    Duplicator插件中的localhost使用

    在这两种情况下,您基本上是在告诉WordPress(或 WordPress 插件)查找WordPress所在的同一服务器的数据库。 除非您是开发人员,否则您不太可能每天都遇到localhost一词,但了解localhost与WordPress的关系确实会派上用场。

    记住——为了更容易记住localhost是什么,想想像“这台计算机”或“运行这个程序的计算机”这样的短语。就是这么简单!

  • 如何解决MAMP本地开发环境“Localhost Refused to Connect”错误

    如何解决MAMP本地开发环境“Localhost Refused to Connect”错误

    本地开发和测试服务器是任何WordPress开发人员工具库中最重要的工具之一。这些久经考验的解决方案使您能够快速轻松地构建网站,而不会有破坏实时Web服务器的风险。但是,他们可能偶尔仍会遇到问题。

    MAMP是一种流行的本地Web开发工具,用于构建WordPress网站,但它有时会成为localhost问题的牺牲品。幸运的是,如果您遇到常见的“localhost refused to connect”消息,您可以采取一些步骤来解决此错误。

    在本文中,我们将探讨MAMP的localhost错误是什么,以及导致问题的原因。然后,我们将分享七种解决此连接问题的方法。

    1. MAMP简介(以及“本地主机拒绝连接”错误)
    2. 如何解决MAMP的“本地主机拒绝连接”错误

    MAMP 简介(以及“本地主机拒绝连接”错误)

    MAMP是一个由开源软件和专有软件组成的解决方案堆栈。MAMP这个名字来源于它的组件:macOS、Apache、PHP、MySQL或MariaDB,以及Perl或Python。但是,MAMP不限于这些元素。例如,您可能会选择使用Nginx而不是Apache

    MAMP在您的Windows或macOS计算机上安装本地服务器环境,通常用于开发动态网站。MAMP也被使用WordPress等内容管理系统 (CMS) 的开发人员广泛使用:

    您可以使用MAMP开发没有实时Web服务器的网站

    您可以使用MAMP开发没有实时Web服务器的网站

    使用MAMP,您可以在计算机上设置本地开发环境。这消除了通常与配置独立Web服务器相关的时间、成本和复杂性。换句话说,它非常适合快速测试项目或开发网站而不会破坏实时服务器。

    但是,您在使用MAMP时仍可能遇到问题。当您尝试访问localhost时,您可能会看到以下错误消息:“localhost denied to connect”。

    这通常发生在您的端口配置出现问题时。例如,另一个服务可能会阻止MAMP尝试使用的端口,或者您可能正在尝试完全访问错误的端口。当MAMP无法启动服务器时,您也可能会遇到此错误。

    如何解决MAMP的“本地主机拒绝连接”错误(7种方法)

    MAMP是用于在本地环境中开发和测试项目的流行解决方案。但是,如果您无法连接到localhost,您将很难从该工具中获得任何价值。如果您遇到“localhost拒绝连接”错误,这里有七个修复程序可以帮助您重新连接并重新开始工作。

    1. 尝试不同的Web浏览器

    您的连接问题可能是特定于浏览器的。每个网络浏览器都有独特的设置和行为。

    特别是,某些浏览器会自动重定向到与任何HTTP网址等效的超文本传输​​协议安全 (HTTPS) 。如果您没有为Web项目启用安全套接字层 (SSL),则此重定向可能会触发localhost错误。

    在进行更复杂的修复之前,您可能需要尝试通过其他Web浏览器访问您的localhost。这可以帮助您测试问题出在MAMP还是您正在使用的浏览器上。

    如果您在备用浏览器中没有遇到localhost错误,这表明问题是特定于浏览器的。在这种情况下,我们建议检查您的浏览器设置以查找可能导致MAMP出现问题的任何配置。例如,您可能会发现您的浏览器默认将HTTP请求重定向到HTTPS。

    解决此重定向问题的步骤将根据您使用的内容而有所不同。例如,Chrome用户可以通过访问chrome://net-internals/#hsts来禁用此重定向:

    检查您的浏览器是否有自动HTTPS重定向

    检查您的浏览器是否有自动HTTPS重定向

    接下来,滚动到以下部分Delete domain security policies,然后输入您的 localhost 域。然后,您可以选择Delete,这应该会禁用Chrome对您的本地主机的重定向。

    2. 允许传入连接

    如果您无法通过localhost访问Web服务器,则您的防火墙可能会阻止连接。您通常可以通过修改防火墙设置以允许MAMP尝试访问的端口的传入连接来解决此问题。或者,您可以允许整个MAMP应用程序的连接。

    如果您是macOS用户,您可以通过导航到Apple > System Preferences… > Security & Privacy来编辑防火墙设置。然后您可以选择Firewall选项卡:

    macOS防火墙设置

    macOS防火墙设置

    要为整个MAMP应用程序启用传入连接,请选择Firewall Options。然后,您可以单击+ 图标,选择MAMP,然后选择Add。然后MAMP将被添加到您的允许应用程序列表中。

    允许MAMP的所有传入连接

    允许MAMP的所有传入连接

    此时,请检查以确保MAMP应用程序配置为Allow incoming connections,然后单击OK。您的防火墙现在将允许MAMP的所有传入连接。

    如果您使用的是Windows Defender,您应该在安装MAMP时收到防火墙通知。但是,您可以随时更改您的Windows防火墙权限,方法是导航到开始 > 设置 > 搜索“防火墙和网络保护”对防火墙设置进行必要的更改。

    3. 检查MAMP的文档根目录

    当您访问本地主机时,MAMP会显示文档根目录的内容。默认情况下,它位于/Applications/MAMP/htdocs,并且包含index.html 或index.php文件。

    如果您移动或删除此索引文件,MAMP将不会加载任何内容。如果您错误地编辑索引文件,MAMP也可能难以显示任何内容。这可能会导致一系列错误,包括“localhost拒绝连接”消息。

    您可以通过前往/Applications/MAMP/htdocs/来确定您是否无意中修改或移动了此重要文件夹。如果它不包含index.htmlindex.php文件,则可能会导致您的localhost错误。

    还值得检查一下MAMP是否从正确的文件夹加载内容。如果您使用的是免费版本的MAMP,您可以在MAMP主窗口中检查根文档的位置:

    检查MAMP文档根目录

    检查MAMP文档根目录

    如果您使用的是MAMP Pro,则此过程略有不同。您可以通过选择Hosts > General来验证根目录的位置。此屏幕将显示您的文档根文件路径:

    检查MAMP设置中的文档根目录

    检查MAMP设置中的文档根目录

    如果您怀疑文档根目录可能存在问题,您只需选择打开方式, 然后选择您喜欢的文件管理器。这会将您直接带到文档根目录,您可以在其中检查文件夹的内容并进行任何必要的更改。

    4.更改端口设置

    MAMP等服务器程序需要对特定网络端口的独占访问权限。这使得多个程序可以在同一台机器上运行。

    每个服务器都有一个默认端口。Apache Web服务器通常使用端口80,而MySQL数据库服务器使用端口3306。默认情况下,MAMP使用端口8888、8889和7888。但是,这些端口可能已经被其他程序或软件使用。

    在这种情况下,您可以将MAMP配置为使用备用端口。如果您使用的是免费版本,则可以通过导航到MAMP > Preferences检查端口设置。然后选择Ports选项卡:

    检查MAMP端口设置

    检查MAMP端口设置

    如果您使用的是MAMP Pro,您会在Ports & User选项卡中找到这些选项 。然后,您可以看到MAMP正在使用的确切端口:

    检查MAMP Pro端口设置

    检查MAMP Pro端口设置

    如果MAMP已在使用备用端口,您可以尝试通过选择MAMP default来恢复默认设置。如果您是Pro用户,您可以单击Set default MAMP Ports按钮。这会将Apache、Nginx和MySQL的端口重置为8888、7888和8889。

    或者,MAMP有一个803306按钮,可以将端口设置为最常用的值。修改端口设置后,直接在浏览器的地址栏中输入新的端口号可能会获得积极的结果,如http://<localhost>:8888/。

    如果您仍然遇到localhost错误,您可以尝试将MAMP配置为使用完全随机的端口号,例如8814。然后您可以直接在Web浏览器中输入此地址 ( http://localhost:8814/ ) 以查看它是否解决了您的本地主机问题。

    5. 验证您的Apache Web服务器是否正在运行

    Apache是最常用的Web服务器之一。MAMP和MAMP Pro都提供此选项。但是,如果Apache服务器没有运行,您将很难连接到您的localhost。

    您可以通过查看MAMP应用程序右上角的Stop/Start按钮来查看您的Apache服务器是否正在运行如果Apache Web服务器处于活动状态,此按钮将为绿色。如果您是MAMP Pro用户,您可以通过在左侧菜单中选择“Apache”来执行验证:

    检查Apache Web服务器安装

    检查Apache Web服务器安装

    MAMP Pro用户还可以通过选择InfoStatus查看有关其Apache服务器的更多信息。如果服务器正在运行,这两个按钮将启动一个选项卡,其中包含有关Apache配置的更多信息。

    Apache服务器状态

    Apache服务器状态

    如果您的Apache Web服务器未运行,则另一个MySQL服务可能正在使用相同的端口。如果您怀疑是这种情况,一种解决方案是退出您机器上的所有httpd进程。退出httpd进程的具体步骤会因您的操作系统而异。

    Mac用户可以使用活动监视器识别和退出httpd进程。在Activity Monitor工具栏中,选择View > All Processes

    查看活动监视器中的所有进程

    查看活动监视器中的所有进程

    Search 字段中,键入“httpd”。选择列表中的每个结果,然后单击 活动监视器左上角的停止图标:

    在macOS中退出httpd进程

    在macOS中退出httpd进程

    退出每个httpd进程后,重新启动MAMP并尝试重新启动Apache Web服务器。

    如果这不能解决您的问题,则您的httpd.conf.temp文件可能已损坏。一些MAMP Pro用户在重命名此文件后报告了积极的结果。

    在本地计算机上,导航到~/Library/Application Support/appsolute/MAMP PRO/templates。然后,您可以将httpd.conf.temp重命名为http.conf.temp.bak。重新启动MAMP,并检查您的Apache服务器现在是否成功运行。

    6. 重启Apache Web服务器

    您还可以通过重新启动Apache Web服务器来解决“localhost拒绝连接”错误。要停止服务器,请 通过导航到应用程序 > 实用程序 > 终端来启动Mac的终端

    在macOS中启动终端

    在macOS中启动终端

    或者,Windows用户可以启动命令提示符。然后运行以下命令:“sudo apachectl stop”。在终端或命令提示符窗口中,您应该看到以下消息:Operation now in progress

    如果您修改了MAMP的端口设置,最好将它们恢复为默认值 (80/3306)。您可以导航到MAMP > Preferences… > Ports  (MAMP) 或Ports & User  (MAMP Pro)。在结果窗口中,选择MAMP default 

    接下来,切换回终端或命令提示符,并运行以下命令:“sudo apachectl restart”。然后,您可以通过选择MAMP右上角的“Start / Stop”图标来重新启动Apache Web服务器。

    7.重新安装MAMP

    最后但同样重要的是,您可以通过卸载然后重新安装MAMP来解决此问题。请注意,卸载程序将删除位于db文件夹中的所有数据库。

    如果您使用的是MAMP Pro,则该文件夹位于/Library/Application Support/appsolute/MAMP PRO/db中。如果要保留此信息,可以在卸载MAMP之前将文件移动到安全位置。

    我们还建议记下您的Apache、MySQL和DynDNS端口号,因为某些内容管理系统 (CMS) 依赖于端口。您可以通过在MAMP的左侧菜单中选择Hosts然后打开General选项卡来找到此信息。

    要卸载MAMP Pro,请选择MAMP PRO > Uninstall MAMP Pro。如果出现提示,请输入您的管理员用户名和密码:

    卸载MAMP Pro

    卸载MAMP Pro

    卸载MAMP后,您将看到以下消息:MAMP Pro has been uninstalled successfully。您现在可以转到计算机的/Applications 文件夹,然后删除MAMP 文件夹。

    现在您已经完全删除了MAMP,是时候重新安装它了!您可以从官方网站下载MAMP的新副本 ,然后正常安装该应用程序。

    成功安装MAMP后,您可能需要恢复数据库。在您最喜欢的文件管理器中,导航到/Library/Application Support/appsolute/MAMP PRO/db。然后,您可以将db文件拖到该文件夹​​中。

    小结

    MAMP本地服务器环境对于 构建和测试您的网站非常有用。但是,如果您遇到“localhost拒绝连接”错误,您必须在继续之前解决它。

    幸运的是,如果您确实遇到了这个问题,您可以采取一些步骤来解决它。我们建议通过尝试通过替代Web浏览器访问您的项目来测试问题是否是特定于浏览器的。您还可以通过修改防火墙设置和MAMP的端口配置来获得积极的结果。

  • 如果解决XAMPP无法正常运行问题

    如果解决XAMPP无法正常运行问题

    XAMPP对于正在寻找localhost解决方案的WordPress开发人员来说是一个有用的平台。但是,当您使用此工具时,可能会出现一些问题。这些错误可能会阻碍您的工作流程,并让您不确定如何让XAMPP再次运行,尤其是因为表面上看起来一切正常。

    幸运的是,一旦您确定了XAMPP没有为您启动的原因,通常只需进行一些调整即可修复它。然后,您可以立即开始处理最新的开发项目。

    在本文中,我们将为刚接触该平台的人提供XAMPP的简要概述。然后,我们将向您展示如何检查错误日志并解决三个可能导致本地服务器无法启动的常见问题。

    1. XAMPP简介
    2. 如何检查您的XAMPP PHP错误日志
    3. 如果XAMPP不工作,如何修复

    XAMPP简介

    XAMPP是一个免费的本地开发工具。它本质上用作您计算机上的服务器,您可以使用它来托管网站。

    请注意,这些站点不对开放Internet上的用户公开可用。相反,它们旨在用于本地开发和测试目的。如果您愿意,您可以在每个项目完成后将其迁移到实时服务器。

    XAMPP是一个方便的解决方案,因为它可以防止访问者在您的项目仍在进行中时找到它。另外,由于该站点托管在您的计算机上,因此它的性能应该是一流的,您可以离线工作。

    您可以在任何主要操作系统 (OS) 上使用XAMPP,包括Windows、macOS和Ubuntu Linux。它使用开源的Apache服务器和MySQL,并带有几个内置工具,例如phpMyAdminFileZilla

    特别是对于WordPress,XAMPP是顶级localhost解决方案之一, 因为它满足所有内容管理系统 (CMS) 的要求。这些包括:

    • PHP 7.4
    • MySQL 5.6
    • HTTPS支持
    • Apache或NGINX服务器

    如果您对安装XAMPP感兴趣,可以查看我们关于在本地安装WordPress的教程,其中包括此任务的说明。

    如何检查您的XAMPP PHP错误日志

    如果您正在使用XAMPP在本地开发WordPress站点,并且您无法启动平台,您的第一步应该是检查您的错误日志。这可能会为您指明问题原因的方向。

    如果您知道问题发生的原因,您应该能够比通过反复试验更快地解决问题。根据您的操作系统和版本,使用不同的路径访问日志。幸运的是,有一种简单的方法可以找到您的设置路径。

    在Windows上,XAMPP活动日志显示在控制面板对话框的下半部分。您还可以通过单击Apache Config按钮旁边的Logs按钮来访问错误日志 :

    XAMPP控制面板包括PHP及其其他组件的日志

    XAMPP控制面板包括PHP及其其他组件的日志

    在macOS上,单击 控制面板中的“Log”选项卡以查看活动日志:

    macOS XAMPP控制面板的日志选项卡

    macOS XAMPP控制面板的日志选项卡

    然后,您可以查看日志以查看是否有任何可疑之处,并按照提供的任何指令解决问题。

    在某些情况下,访问您的PHP日志也可能是有益的,尽管这通常比Apache或MySQL更有助于解决WordPress错误。

    要找到您的PHP错误日志,请通过在浏览器的地址栏中键入http://localhost打开XAMPP仪表板。在那里,单击屏幕顶部的PHPInfo :

    XAMPP仪表板中的PHPInfo链接

    XAMPP仪表板中的PHPInfo链接

    然后搜索“error_log”。这将显示您需要在地址栏中输入以查看日志的路径:

    在PHPInfo中定位error_log路径

    在PHPInfo中定位error_log路径

    您应该能够在http://localhost之后简单地在浏览器中键入此路径以查看PHP日志。

    访问XAMPP-VM for Mac PHP日志

    对于Mac用户,实际上有两个版本的XAMPP——“XAMPP for macOS”和“ XAMPP-VM ”。后者使您能够使用虚拟机在Mac上运行XAMPP for Linux。

    了解您使用的版本很重要,因为它决定了您如何访问我们将在本文中引用的关键文件。例如,如果您在OS X上使用XAMPP,您可以简单地打开Finder,转到Applications > XAMPP,然后查找logs文件夹以找到您的PHP日志。

    但是,如果您使用的是XAMPP-VM,您首先需要打开XAMPP控制面板,单击Volumes选项卡,然后选择Mount

    macOS XAMPP-VM控制面板的Volumes选项卡

    macOS XAMPP-VM控制面板的Volumes选项卡

    然后,当您启动Finder时,单击左侧菜单中的IP地址并打开lampp文件夹。在这里您可以找到所有XAMPP文件,包括PHP错误日志。

    如果XAMPP不工作,如何修复

    如果您的错误日志未提供有关问题原因的信息,您可以尝试这些解决方案以使XAMPP再次运行。这些提示还详细说明了您的错误日志可能显示的一些说明。

    1. 解决Apache端口冲突

    如果Apache无法启动,您将无法访问您的XAMPP仪表板或您在平台上安装的任何站点。端口冲突可能是根本问题。

    默认情况下,Apache通过端口80连接。如果您看到一条错误消息,指出此端口已在使用中,则另一个应用程序正在阻止连接(Skype是一个常见的违规者)。

    如果单击XAMPP控制面板中的Netstat按钮,它应该会显示所有当前正在使用的端口,以及哪些应用程序正在使用它们。如果XAMPP Apache没有启动,你可能想检查一下:

    使用Netstat检查活动端口

    使用Netstat检查活动端口

    如果您知道哪个程序是问题所在,并且可以通过删除阻碍端口的应用程序来解除对端口的阻塞,这将立即解决问题。但是,您也可以更改XAMPP的Apache侦听端口,以便在保持其他平台不变的情况下进行连接。

    首先,您需要找到您的httpd.conf文件。此过程略有不同,具体取决于您的操作系统和您使用的XAMPP版本。

    在Windows上更改XAMPP Apache端口

    在Windows上,打开XAMPP控制面板并单击Config 按钮:

    访问Apache的配置文件

    访问Apache的配置文件

    然后选择httpd.conf。在此文件中搜索读取“Listen 80”的行,并将其更改为“Listen 8080”。这将使您能够通过端口8080而不是默认选项连接到Apache。

    您还需要查找读取的行ServerName localhost:80,并将其更改为ServerName localhost:8080. 保存并关闭文件。

    然后尝试再次启动Apache。如果这是您唯一的问题,那么平台应该按预期运行。但是,请注意,如果您有一个通过XAMPP托管的WordPress安装,您需要找到所有提及的“localhost”并将其替换为“localhost:8080”,包括数据库中的那些。

    在Mac上更改XAMPP Apache端口

    如果您正在为macOS运行XAMPP,您可以通过在Finder中转到Applications > XAMPP来找到您的httpd.conf文件。找到文件后,您可以执行与我们为Windows用户描述的相同的步骤来更改您的端口。

    对于使用XAMPP-VM的用户,请向上滚动到我们解释如何访问错误日志的部分,以了解如何查找XAMPP文件。访问lampp目录后,您会在apache2 > conf中找到httpd.conf。

    2.访问localhost时地址中包含监听端口

    通常,您只需 在浏览器的地址栏中键入http://localhost即可访问XAMPP托管的站点或仪表板。该平台通过其默认侦听端口80自动连接到Apache。

    但是,如果您更改了XAMPP安装的侦听端口(或其他有权访问您计算机的人这样做),它将无法连接。如果存在Apache端口冲突,您也可能会看到这种情况,如上所述。

    这个问题可能会让人很困惑,因为XAMPP控制面板可能会显示Apache和MySQL都在运行。但是,您将无法访问您的站点或PHPInfo或phpMyAdmin等工具。

    此错误可能有几种不同的形式。如果您尝试访问本地WordPress站点,您可能会看到404错误页面。Chrome用户可能会看到ERR_CONNECTION_REFUSED  :

    Chrome中的ERR_CONNECTION_REFUSED页面

    Chrome中的ERR_CONNECTION_REFUSED页面

    幸运的是,解决方案相当简单。您只需将侦听端口附加到地址即可。例如,如果您使用最常见的替代端口,您将输入http://localhost:8080而不仅仅是http://localhost

    但是,如果您希望 即使更改了Apache侦听端口也能够简单地输入localhost ,您可以这样做。

    更改Windows上的默认端口

    Windows用户将XAMPP Apache默认端口更改为他们的新侦听端口,这样您就不必在地址栏中指定它。为此,请单击XAMPP控制面板中的Config > Service and Port Settings > Apache

    为Apache设置新端口

    为Apache设置新端口

    然后将Main Port值替换为您配置的新Apache端口并保存更改。

    在macOS上设置端口转发

    在macOS上,这个过程完全不同。在您的控制面板中,单击Network选项卡。在这里可以设置端口转发规则:

    访问macOS上的XAMPP网络选项

    访问macOS上的XAMPP网络选项

    您需要添加一条新规则,将流量重定向到默认端口到新的Apache侦听端口。如果单击Add,您将能够在相关字段中输入这些值:

    在macOS上为XAMPP添加新的端口转发规则

    在macOS上为XAMPP添加新的端口转发规则

    从列表中选择规则并单击Add按钮开始使用它。

    3. 改变你的MySQL端口

    最后,有时由于MySQL而不是Apache的问题,XAMPP无法正常工作。但是,问题仍然经常是端口冲突,这意味着现在您应该对如何修复它有一个很好的想法。

    在这种情况下,您需要访问php.ini文件而不是配置文件。导航到您的XAMPP仪表板并单击本文前面所述的PHPInfo将使您能够找到此文件的安装路径:

    在PHPInfo中找到php.ini路径

    在PHPInfo中找到php.ini路径

    或者,如果您使用XAMPP for Windows,您可以通过单击Config > PHP (php.ini)从控制面板访问此文件:

    XAMPP PHP.ini文件

    找到并打开php.ini后,查找已读取的行port = 3306,并将它们更改为已读取port = 3307。保存并关闭文件,然后重新启动MySQL。

    小结

    XAMPP是一个有用的工具,可以在您的角落使用,但对阻止您访问本地WordPress站点的某些错误进行故障排除可能会令人沮丧。幸运的是,这些通常是端口冲突,您可以快速实施解决方法。

    在本文中,我们向您展示了如果XAMPP由于Apache或MySQL的问题而无法工作时该怎么做:

    1. 通过将监听端口更改为8080来解决Apache端口冲突。
    2. 访问localhost时在地址中包含监听端口。
    3. 如果另一个应用程序阻塞了默认端口3306,请将您的MySQL端口更改为3307。