创建可从公共地址访问的本地服务器

在 10 年的大部分时间里，我一直在开发网站，而我最大的问题之一始终是本地开发和将本地站点同步到实时测试。使用本地环境很好，因为它很快，但从远处看不到，转移到某个地方意味着数据库操作、重命名表、值等。

在本文中，我将向您展示一种运行本地服务器的简单方法，您可以通过手机和其他移动设备本地访问该服务器，还可以通过 Internet 进行广播，这意味着与客户共享您的工作，而不会留下美好的 ol’本地主机。

不久之前，我在 Hongkiat 上写了一篇关于使用 Vagrant 的文章，所以我在这里只介绍基础知识。欲了解更多信息，请查看文章！

要开始，您需要获取并安装VirtualBox和Vagrant。两者都是免费的，用于创建将运行您的服务器的虚拟机。

现在，创建一个文件夹来存储您的网站。让我们在主用户目录中使用一个名为“Websites”的目录。那将是/Users/[username]/Websites在 OS X 和C:/Users/[username]/WebsitesWindows 上。

创建一个名为wordpress. 这是我将创建虚拟机的地方。这个想法是每个文件夹中Websites都有一个单独的虚拟机。虽然您可以根据需要在一台虚拟机上放置任意多个网站，但我更喜欢按平台对它们进行分组——例如：WordPress、Laravel、Custom

出于本教程的目的，我将创建一个 WordPress 网站。

在WordPress文件夹中，我们需要创建两个文件，Vagrantfile和install.sh. 这些将用于设置我们的虚拟机。Jeffrey Way 创建了两个很棒的入门文件；你可以获取他的Vagrantfile和install.sh文件。

接下来，使用终端导航到WordPress目录并键入 vagrant up. 这将需要一段时间，因为需要下载然后安装该框。喝杯咖啡，在等待的时候查看这篇关于60 多个 WordPress 技巧的帖子。

该过程完成后，您应该能够访问192.168.33.21并查看正确提供的页面。您的内容文件夹应该是 WordPress 目录中的 html 文件夹。您现在可以开始添加文件、安装 WordPress 或您想要的任何其他内容。

不要忘记阅读完整的Vagrant 指南，了解有关创建虚拟主机、映射域等的更多信息mytest.dev。

在构建站点时，您应该考虑响应能力。可以通过缩小浏览器窗口在某种程度上模拟小屏幕，但这只是不一样的体验，特别是如果你在混合中使用视网膜屏幕。

理想情况下，您会希望在移动设备上打开本地网站。如果您的设备位于同一网络上，这并不难做到。

为了完成这项工作，我们将使用Gulp和Browsersync。Gulp 是一个用于自动化开发的工具，Browsersync 是一个很棒的工具，它不仅可以创建本地服务器，还可以跨设备同步滚动、点击、表单等。

安装 Gulp 非常简单。前往入门页面以获取说明。一个先决条件是 NPM（节点包管理器）。最简单的方法是安装 Node 本身。前往Node 网站获取说明。

使用npm install --global gulp命令全局安装 gulp 后，您需要将其添加到您的项目中。这样做的方法是npm install --save-dev gulp在项目的根文件夹中运行，然后gulpfile.js在那里添加一个文件。

现在让我们在该文件中添加一行代码，表明我们将使用 Gulp 本身。

var gulp = require('gulp');

如果您对 Gulp 可以做的所有很酷的事情感兴趣，比如连接脚本、编译 Sass 和 LESS、优化图像等等，请阅读我们的Gulp 指南。在本文中，我们将专注于创建服务器。

Browsersync 有一个 Gulp 扩展，我们可以分两步安装它。首先，让我们使用 npm 下载它，然后将它添加到我们的 Gulpfile 中。

npm install browser-sync gulp --save-dev在终端的项目根目录下发出命令；这将下载扩展。然后，打开 Gulpfile 并向其中添加以下行：

var browserSync = require('browser-sync').create();

这让 Gulp 知道我们将使用 Browsersync。接下来我们将定义一个任务来控制 Browsersync 的工作方式。

1个
2个
3个
4个
5个

gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "192.168.33.21"
  });
});

添加后，您可以gulp browser-sync在终端中键入以启动服务器。您应该会看到类似下图的内容。

那里有四个单独的 URL，它们的含义如下：

本地：本地 URL 是您可以访问运行它的机器上的服务器的地方。在我们的例子中，您可以使用192.168.33.21或者您可以使用 Borwsersync 提供的那个。
外部：这是您可以在连接到网络的任何设备上用来访问网站的 URL。它可以在您的本地机器、手机、平板电脑等设备上运行。
UI：此 URL 指向当前运行的服务器的选项。您可以查看连接、设置网络限制、查看历史记录或同步选项。
外部用户界面：这与用户界面相同，但可从网络上的任何设备访问。

现在我们已经完成了这个阶段，您可能会想：为什么要使用 Browsersync？也可以从任何设备访问 URL 192.168.33.21。在这种情况下，您需要将 WordPress 安装到此 URL。

我通常使用虚拟主机并拥有 wordpress.local 或 myproject.dev 之类的域。这些在本地解析，因此您无法在手机上访问 wordpress.local 并看到与在本地计算机上相同的结果。

到目前为止一切顺利，我们现在有了一个可以从网络上的任何设备访问的测试站点。现在是时候走向全球并通过互联网传播我们的工作了。

ngrok是一种可用于创建到本地主机的安全隧道的工具。如果您注册（仍然免费），您将获得受密码保护的隧道、TCP 和多个同步隧道。

转到ngrok 下载页面并获取所需的版本。您可以从它所在的文件夹运行它，或将它移动到允许您从任何地方运行它的位置。在 Mac/Linux 上，您可以运行以下命令：

sudo mv ngrok /usr/local/bin/ngrok

如果您收到此位置不存在的错误消息，只需创建丢失的文件夹即可。

值得庆幸的是，这部分非常简单。通过 Gulp 运行服务器后，查看它使用的端口。在上面的示例中，本地服务器正在运行，http://localhost:3000这意味着它正在使用端口 3000。在新的终端选项卡中，运行以下命令：

ngrok http 3000

这将为您的本地主机创建一个可访问的隧道，结果应该是这样的：

您在“转发”旁边看到的 URL 是您可以用来从任何地方访问您的网站的网址。

归根结底，我们现在可以做三件事：

这将使您能够专注于开发，而不是竞相保持本地和测试服务器同步、迁移数据库和其他令人担忧的任务。

如果您有不同的本地工作方法和分享结果，请告诉我们！