如何将文件上传到 Web 服务器？

本文将向您展示如何使用文件传输工具将您的网站发布到网上。

先决条件 您必须了解什么是 Web 服务器以及域名是如何工作的。您还必须了解如何设置基本环境以及如何编写简单的网页。
目标 了解如何使用各种可用的文件传输工具将文件推送到服务器。

摘要

如果您已经构建了一个简单的网页（请参阅HTML 基础知识以获取示例），您可能希望将其发布到 Web 服务器上。在本文中，我们将讨论如何使用各种可用选项（如 SFTP 客户端、RSync 和 GitHub）来实现这一目标。

SFTP

有很多 SFTP 客户端。我们的演示涵盖了FileZilla，因为它免费且适用于 Windows、macOS 和 Linux。要安装 FileZilla，请访问FileZilla 下载页面，点击大的“下载”按钮，然后按照通常的方式从安装程序文件安装。

注意：当然还有很多其他选择。请参阅发布工具以获取更多信息。

打开 FileZilla 应用程序；您应该会看到类似以下内容

Screenshot of the user interface of Filezilla FTP application. Host input has focus.

登录

在本例中，我们假设我们的托管服务提供商（提供我们 HTTP Web 服务器的主机服务）是一家名为“示例托管服务提供商”的虚构公司，其 URL 如下所示：mypersonalwebsite.examplehostingprovider.net。

我们刚刚开通了一个帐户，并从他们那里收到了以下信息

恭喜您在示例托管服务提供商开通帐户。

您的帐户是：demozilla

您的网站将显示在demozilla.examplehostingprovider.net

要发布到此帐户，请使用以下凭据通过 SFTP 连接

  • SFTP 服务器：sftp://demozilla.examplehostingprovider.net
  • 用户名：demozilla
  • 密码：quickbrownfox
  • 端口：5548
  • 要发布到 Web，请将您的文件放入Public/htdocs目录。

让我们先看看http://demozilla.examplehostingprovider.net/ - 正如您所见，目前那里什么也没有

Our demozilla personal website, seen in a browser: it's empty

注意：根据您的托管服务提供商的不同，大多数情况下，当您第一次访问您的 Web 地址时，您会看到一个页面，上面写着“此网站由[托管服务]托管”。

要将您的 SFTP 客户端连接到远程服务器，请按照以下步骤操作

  1. 从主菜单中选择文件 > 站点管理器…。
  2. 在站点管理器窗口中，按下新建站点按钮，然后在提供的空间中填写站点名称为demozilla。
  3. 在主机：字段中填写您的主机提供的 SFTP 服务器。
  4. 在登录类型：下拉菜单中，选择普通，然后在相关字段中填写您提供的用户名和密码。
  5. 填写正确的端口和其他信息。

您的窗口应该如下所示

Screenshot of default landing page of a fictitious website when the file directory is empty

现在按下连接以连接到 SFTP 服务器。

注意：确保您的托管服务提供商为您的托管空间提供 SFTP（安全 FTP）连接。FTP 本身不安全，您不应该使用它。

这里和那里：本地和远程视图

连接后，您的屏幕应如下所示（我们已连接到我们自己的示例以供您参考）

SFTP client displaying website contents once it has been connected to the SFTP server. Local files are on the left. Remote files are on the right.

让我们检查一下您看到的内容

  • 在左中间窗格中，您会看到您的本地文件。导航到您存储网站的目录（例如mdn）。
  • 在右中间窗格中，您会看到远程文件。我们已登录到我们的远程 FTP 根目录（在本例中为users/demozilla）
  • 目前您可以忽略底部和顶部窗格。它们分别是显示您计算机和 SFTP 服务器之间连接状态的消息日志，以及您 SFTP 客户端与服务器之间每次交互的实时日志。

上传到服务器

我们的示例主机说明告诉我们“要发布到 Web，请将您的文件放入Public/htdocs目录。”您需要在右窗格中导航到指定的目录。此目录实际上是您网站的根目录 - 您的index.html文件和其他资源将存储在此处。

找到要放置文件的正确远程目录后，要将文件上传到服务器，您需要将它们从左窗格拖放到右窗格。

它们真的在线了吗？

到目前为止，一切顺利，但文件真的在线了吗？您可以通过在浏览器中返回到您的网站（例如http://demozilla.examplehostingprovider.net/）来再次检查

Here we go: our website is live!

我们的网站上线了！

Rsync

Rsync 是一种本地到远程的文件同步工具，通常在大多数基于 Unix 的系统（如 macOS 和 Linux）上可用，但 Windows 版本也存在。

它被认为比 SFTP 更高级的工具，因为默认情况下它是在命令行中使用的。一个基本的命令如下所示

bash
rsync [-options] SOURCE [email protected]:DESTINATION
  • -options 是一个连字符后跟一个或多个字母，例如-v表示详细错误消息，-b表示创建备份。您可以在rsync 手册页（搜索“选项摘要”）中查看完整列表。
  • SOURCE 是您要从中复制文件的本地文件或目录的路径。
  • user@ 是您要复制文件的远程服务器上用户的凭据。
  • x.x.x.x 是远程服务器的 IP 地址。
  • DESTINATION 是您要将目录或文件复制到的远程服务器上的位置的路径。

您需要从您的托管服务提供商处获取此类详细信息。

有关更多信息和进一步示例，请参阅如何使用 Rsync 在服务器之间复制/同步文件。

当然，与 FTP 一样，使用安全连接是一个好主意。在 Rsync 的情况下，您指定 SSH 详细信息以通过 SSH 建立连接，使用-e选项。例如

bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE [email protected]:DESTINATION

您可以在如何通过 SSH 使用 Rsync 复制文件中找到更多所需详细信息。

Rsync GUI 工具

Rsync 提供了 GUI 工具（对于那些不太习惯使用命令行的人）。Acrosync 就是这样一个工具，它适用于 Windows 和 macOS。

同样，您需要从您的托管服务提供商处获取连接凭据，但通过这种方式，您将拥有一个 GUI 来输入它们。

GitHub

GitHub 允许您通过GitHub Pages (gh-pages) 发布网站。

我们在发布您的网站文章（来自我们的Web 入门指南）中介绍了使用它的基础知识，因此我们不会在这里重复所有内容。

但是，值得知道的是，您也可以在 GitHub 上托管网站，但可以使用自定义域名。请参阅在 GitHub Pages 中使用自定义域名以获取详细指南。

其他上传文件的方法

FTP 协议是一种众所周知的发布网站的方法，但并非唯一的方法。以下是一些其他可能性

  • Web 接口。充当远程文件上传服务的 Frontend 的 HTML 接口。由您的托管服务提供。
  • WebDAV。HTTP 协议的扩展，允许更高级的文件管理。