如何快速为Web开发人员创建工作环境或设置开发环境以在Windows上工作或学习HTML，CSS，PHP。

（文章发表在Linkedin上 ）

这是我对汇编程序和反向程序书籍作者的文章的翻译。 现在它主要在美国出版。 我认为这不仅对初学者有用。

新手程序员总是想知道从哪里开始学习如何创建网站。 在Internet上进行搜索可提供许多不同的信息，但不幸的是，它只会使初学者更加困惑。 拥有5年以上的教学经验，我已经多次看到学生如何休息计算机游戏并决定成为Web开发人员，试图建立开发环境。 他们开始整理布局程序。 他们抓住了Sublime Text，Notepad ++，Visual Studio Code，NetBeans或PHPStorm。 我们试图在本地计算机（例如Denver，Xampp，Open Server等）上安装WAMP（代表Windows，Apache，MySQL和PHP）。 但是由于新手开发人员没有系统性的知识，也没有调优经验，其中很少有人设法建立一个方便的开发环境，而成功的人则意识到，演奏变得更加困难，因为许多其他已安装的程序使得难以享受游戏中的流畅度。

这篇文章之所以诞生，是因为多年来向每个学生讲解如何正确，方便地做所有事情。

我想再说一遍，我们将在Windows中配置工作环境，以研究HTML，CSS网站及其与PHP的关系。 我们将这种计算机称为工作计算机，以便新手Web开发人员习惯于他们的计算机是他们的收入来源的想法。

开始使用

我相信，既然您决定成为一名Web开发人员，那么首先要做的就是在计算机上安装Git。 Git是一个分布式版本控制系统。 相信我，这个系统可以为您节省不止一次，尤其是当您意识到某些问题很严重时。 多亏了git，您可以清楚地控制发生的时间，而git将使您有机会回滚到已编辑文件的先前版本。 方便吧？

要安装，下载并安装Windows版Git（ https://gitforwindows.org/ ），我们保留所有路径和默认设置。 安装后，重新启动计算机。

现在，您可以通过命令行或PowerShell使用Git。

我遵守的规则是，您只需要在工作的计算机上安装git和IDE，即“集成开发环境”。 其他所有内容都应在服务器版本中运行。 您无法为自己设置其他WAMP。 我强调我是在专门谈论WAMP程序集。 我将解释我的观点。 WAMP组件既方便又好用，但前提是您清楚地了解在服务器和站点上执行的操作以及执行的原因。 初学者仅仅因为他们的经验还不能。 是的，在许多论坛上，包括Full Stack Developers在内的Web开发人员都向初学者提供了提示，我经常不得不阅读WAMP程序集非常方便。 但是根据这样的建议，您可以立即将专业人员与刚刚迈出Web开发第一步的人区分开。 专业人士永远不会建议初学者学习Web开发以安装WAMP程序集。

在这里。 WAMP程序集中的环境与Web主机所具有的实际环境有很大不同，您的最终站点将位于该环境上。 Web主机环境通常是基于类似UNIX的系统（Linux，CentOS等）的系统，而IIS Web服务器则很少，并且在使用WAMP程序集时，我们得到的Windows环境与实际环境无关。没有环境。 在我的实践中，我见证了WAMP建筑何时会干扰人们。 例如，一个新手Web开发人员来到我们的团队，使用WAMP组件在家用计算机上开发站点。 他的任务很简单，即从完成的版面制作页面并在其上制作工作反馈表。 几天后，他带来了交钥匙解决方案。 我们将其上载到测试服务器，该服务器是生产服务器的精确副本，并且发现该表格不起作用，并且未显示某些图像。 是的，经验丰富的开发人员会立即了解发生了什么事情，但是初学者对此一无所知，他感到恐慌。 他立即说：“我听不懂，一切都在我家里。” 我请他检查页面从何处加载图片，并检查php脚本中的绝对路径。 当他修复它时，一切正常。 但这是一个简单的反馈表，如果这是一个在线商店网站，则有400页？ 或另一个例子。 我不得不以某种方式处理公司从自由职业者那里订购的网站的部署-开发人员。 开发人员向一家公司订购了名片站点。 当该开发人员在其工作用的笔记本电脑上向客户显示完成的订单时，一切正常，但是当此站点转移到托管提供商时，该站点无法正常工作，并且某些页面根本就没有出现。 经验丰富的开发人员也了解问题所在，但是由于缺乏必要的经验，因此尚未提供给初学者。 事实证明，在Windows中不支持.htaccess，已经注册了CMS正常运行所需的指令，一切正常。 但这只是一个名片网站，如果它是一个带有管理面板，封闭区域等的在线商店？ 这里为了避免所有这些，我建议所有学生使用，如果不是一个完整的100％生产环境，那么至少要非常接近它，而WAMP组件无法提供。

我在两个最喜欢的环境中工作：NetBeans和PHPStorm。 谁喜欢它取决于您。 我建议同时使用它们并尝试对其进行处理。 NetBeans是免费的，单个开发人员的PHPStorm成本为89美元，但是有30天的试用期，您可以在工作中查看它。

我将以IDE PHPStorm为例讨论自定义。 从官方网站上下载IDE PHPStorm到我们的工作计算机上 。 这里没有什么复杂的，它只是一个Windows程序，我们默认保留所有路径。 已安装。

就像我说过的，一切都应该在与主机相同或非常接近的环境中开发。 为此，我们需要通过从官方网站下载VirtualBox来在计算机上安装VirtualBox。 也没有什么复杂的，放入并重新启动计算机。

然后有两种发展方式

第一种方法是在VirtualBox内手动创建虚拟机，在其中安装Linux Server，然后在服务器上启动Apache，MySQL和PHP。 此外，对于调试，我们还需要在此安装Xdebug来调试PHP，同时了解虚拟机内部的依赖关系，并考虑到主机计算机上工作文件夹的依赖关系。 当您获得经验时，做起来似乎并不困难，但是对于那些刚开始迈向WEB开发的人，这些都是不必要的困难。

因此，存在第二条发展道路 。 从官方站点下载Vagrant在您的计算机上安装。 Vagrant是一个可帮助您管理虚拟机的应用程序。 安装好了吗？ 如果您收到有关PowerShell版本不匹配的错误，请更新Management Framework 。 安装好了吗？ 太好了

接下来，下载带有流浪者配置的档案，该档案是我在“ Ubuntu Server 16.04”的基础上准备的，并建议用于学生。 我们为自己创建一个工作文件夹，在其中创建我们的网站。 例如，这将是驱动器“ C”上的“ webdev”文件夹。 怎么做？ 对于已经安装Git的用户，请在资源管理器中打开“ C”驱动器，然后右键单击并选择“ Git Bash Here” 。

A．

控制台将打开，我们在其中输入命令： git clone https://github.com/abyss-soft/webdev并按“输入”。

之后，带有以下文件树的就绪工作文件夹出现在磁盘上：

请注意，我们将开发的带有我们网站的文件夹位于以下路径： C：\ webdev \ www \ webdev.local

将来，您可以用站点的文件替换此文件夹中的所有文件，从而为站点提供现成的开发环境。

我还建议您在https://github.com上注册，并将“ Fork”设置为我的存储库“ https://github.com/abyss-soft/webdev ”，这样您就可以将其保存到自己身上，并且它将始终存在。

对于那些不想安装git的人，这里是直接链接：

1. 直接链接： https ： //github.com/abyss-soft/webdev/archive/master.zip
2. 链接到github： https : //github.com/abyss-soft/webdev
3. 流浪者盒子链接： https : //app.vagrantup.com/alex-panov/boxes/webdev

接下来，运行命令行解释器，为此，我们按Win + R（按这种方式-按住alt之后空格左右的位置带有Windows徽标的按钮）并且不释放它，请按R）并输入命令“ cmd”（不带引号）。 在打开的窗口中，通过输入cd c：\ webdev命令进入创建的文件夹。

转到文件夹，输入vagrant up命令。 控制台不会关闭。 当我们工作并且需要关闭虚拟服务器时，我们将输入vagrant halt命令。

第一次启动可能会花费很多时间-图像将被下载，在后续启动期间，此步骤将不会进行，图像将从缓存中保留下来。 接下来，虚拟机将启动。

在虚拟机本身中，我们在/etc/php/7.0/apache2/php.ini中具有PHP.ini文件，并具有以下设置：

----------工作：-------

[xdebug]

zend_extension =“ / usr / lib / php / 20151012 / xdebug.so”

xdebug.remote_autostart =开启

xdebug.remote_enable =开启

xdebug.remote_connect_back =开启

xdebug.remote_port = 9000

xdebug.remote_host = 192.168.33.31

xdebug.idekey = PHP_IDE_CONFIG

其中xdebug.remote_host = 192.168.33.31是运行PHPStorm的主机的地址。
等待加载，我们将在文件“ hosts”（位于C：\ Windows \ System32 \ drivers \ etc）中写入以下行： 192.168.33.33 webdev.local

接下来，启动您喜欢的浏览器，并点击链接webdev.local

如果一切都按预期进行，那么我们将看到一个带有文本“ PHP计算：”的页面，该页面显示我们的测试站点已加载到服务器上的虚拟机中并可以正常工作。

接下来，我们需要将远程PHP解释器连接到PHPStorm。
为此，运行PHPStorm并创建一个新项目：

该程序将告诉我们该文件夹中已经存在文件，并询问是否要在此文件夹中创建项目：

点击“是”

接下来，单击菜单“文件”->“设置..”：

并转到“ 语言和框架”部分，然后在此部分中选择“ PHP”。 在本节中，您需要通过单击[...]在CLI Interpreter子句中为IDE分配一个解释器。

在打开的窗口中，单击绿色的“ +”，设置任何名称，例如“ Remote PHP 7”，然后选择“ Remote ...”项。

在出现的窗口中，选择“ Vagrant”，然后指定文件“ C：\ webdev”的路径

然后单击确定。

出现此窗口，在其中可以看到PHP版本和调试器版本：

接下来，在“ PHP”部分中，选择“ 服务器（PHP->服务器）” 。 单击绿色的“ +”，然后输入任何名称，例如“ webdev.local”和主机名：“ webdev.local”。 端口号为“ 80”，调试器设置为“ XDebug”。 确保启用“ 使用路径映射”复选框...指示路径的对应关系：

为了更方便地进行调试，或者为了使调试器不会在任何PHP文件的第一行弹出，您需要在此处禁用此功能：

转到PHPStorm，在“运行”菜单中，选择“ 编辑配置...”。

在打开的表单中，单击绿色的“ +”，然后选择应用程序类型PHP Web Application 。 在服务器字段中输入一个名称，例如“ WebApplication”，选择我们刚刚创建的服务器的名称，开始URL，还可以选择xdebug会话将在其中打开的浏览器。

重要！

仅当PHPStorm启用了窃听时才触发调试。 为此，请单击右上角的“ 开始侦听PHP调试连接 ”：

我们还需要在浏览器中安装其他扩展程序。 为此，请访问带有浏览器调试扩展的JetBrains官方页面，并为您的浏览器下载所需的扩展。

在浏览器中安装扩展程序后，让我们打开其设置并指定idekey ，我们已经在设置中指定了它： PHP_IDE_CONFIG

在PHPStorm中，激活侦听器（在“ 开始侦听PHP调试连接”的右上角），然后单击“ 运行WebApplication” 。 开始在PHPStorm级别进行调试。

接下来，我们激活调试扩展。 为此，请转到我们的网站http：//webdev.local的地址，输入后，单击错误图标（已经在浏览器中），然后在“ Google Chrome”中选择“ 调试”项

或在Mozilla Firefox中

之后，图标将变为绿色。

完成这些设置后，您可以安全地设置断点并调试PHP站点。 在PHPStorm中安装断点之后，您需要在浏览器中刷新页面，并查看其在加载模式下挂起，并且断点在PHPStorm中起作用。

例如，将断点放在一行上

$ x = 2;

然后单击“运行WebApplication”：

如您所见，调试器在断点处停止，并向我们显示变量（变量）：

如果按F8键，将看到调试器逐步移动，显示所有变量：

这样，我们安装并调整了可以充分工作的工作环境。