如何将文件上传到web服务器

如何将文件上传到web服务器

本文将指导你如何使用各种文件传输工具将网站文件上传到服务器。无论你是使用SFTP客户端、Rsync还是GitHub，这里都有详细的步骤和注意事项，帮助你轻松完成网站部署。

前提：你需要了解什么是web服务器以及域名的工作原理。同时，你需要具备搭建基本环境和编写简单网页的能力。

概要

如果你已经创建了一个简单的网页（可以参考HTML基础教程获取示例），你可能想要将其部署到web服务器上。本文将介绍如何使用SFTP客户端、Rsync和GitHub等工具来实现这一目标。

SFTP

有多种SFTP客户端可供选择。我们的示例将使用FileZilla，因为它免费且支持Windows、macOS和Linux系统。要安装FileZilla，请访问FileZilla下载页面，点击下载按钮，然后按照常规方式通过安装文件进行安装。

备注：当然还有很多其他的选择。有关详细的信息，请参阅发布工具。

打开FileZilla应用程序，你应该看到如下界面：

登录

在这个示例中，我们假设我们的托管提供商（将托管我们的HTTP Web服务器的服务）是一个虚构的公司“Example Hosting Provider”，其URL如下所示：

mypersonalwebsite.examplehostingprovider.net

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

恭喜在 Example Hosting Provider 开设帐户。

你的账户是：
demozilla

你的网站将在：
demozilla.examplehostingprovider.net

要发布到此帐户，请使用以下凭据通过 SFTP 进行连接：
- SFTP 服务：
sftp://demozilla.examplehostingprovider.net
- 用户名：
demozilla
- 密码：
quickbrownfox
- 端口：
5548
- 要在 web 上发布，请将文件放入
Public/htdocs
目录中。

让我们查看一下此网页：

http://demozilla.examplehostingprovider.net/

——正如你所见，现在这里什么也没有：

备注：根据你的托管服务提供商的不同，大部分时间你会看到一个页面，内容如下：“此网站由 [托管服务] 托管”。

要将SFTP客户端连接到远程服务器，请执行以下步骤：

1. 在主菜单中选择文件>站点管理器……。
2. 在站点管理其窗口，点击新建站点按钮，然后填写站点名称为demozilla。
3. 将托管服务提供商提供的SFTP服务器地址填入主机字段。
4. 在登录类型下拉框中选择常规，然后在相关的字段中填写提供的用户名和密码。
5. 填写正确的端口号和其他信息。

窗口看起来应该像这样：

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

注意：请确保你的托管服务提供商为你提供的空间是支持SFTP（安全FTP）连接的。FTP本质上是不安全的，你不应该使用它。

本地和远程视图

在连接后，你的屏幕应该如下所示（我们已连接到我们自己的一个示例以供你参考）：

让我们来看看你所看到的：

• 在左边，你会看到你的本地文件。导航到你存储网站的目录（本例中为mdn）。
• 在右侧，你会看到远程文件。我们登录到了我们远程的FTP根目录（在这种情况下，users/demozilla）。
• 现在你可以忽略底部和顶部区域。它们分别是你的计算机和SFTP服务器之间连接状态的消息日志，以及SFTP客户端和服务器之间每次交互的实时日志。

上传到服务器

你应该记得，我们的主机提供商告诉我们，我们的文件必须存储在Public/htdocs目录中。你需要在右侧窗格中导航到指定的目录。这个目录实际上是你网站的根目录——index.html文件和其他的资源文件将存放在该目录中。

找到正确的远程目录来放置文件后，要将文件上传到服务器，请将它们从左侧窗格拖放到右侧窗格中：

文件都上传成功了吗？

到目前为止，很好，但文件真的在线吗？你可以在浏览器中返回你的网站（例如http://demozilla.examplehostingprovider.net/）进行仔细检查：

瞧！我们的网站已经上线了！

Rsync

Rsync是一种本地到远程的文件同步工具，通常在大多数基于Unix的系统（如macOS和Linux）上都可用，但也存在Windows版本。它被视为比SFTP更高级的工具，因为它默认是在命令行中使用的。下面展示了一个基本的命令：

rsync [-options] SOURCE user@x.x.x.x:DESTINATION

• -options：破折号后跟一个或多个字母，例如-v用于详细展示错误消息，而-b用于进行备份。你可以在rsync手册页中查看完整的列表（搜索“Options summary”）。
• SOURCE：是要从中复制文件的本地文件或目录的路径。
• user@：是你要将文件复制到远程服务器上的用户的凭据。
• x.x.x.x：是远程服务器的IP地址。
• DESTINATION：是你要将目录或文件复制到远程服务器上的位置的路径。

你需要从托管服务提供商那里了解此类详细信息。参见如何使用Rsync在服务器之间拷贝或同步文件以了解更多信息和示例。

当然，对于FTP等，最好使用安全连接。对于Rsync，你可以使用-e选项指定SSH的详细信息，以通过SSH建立连接。例如：

rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION

你可以在如何通过Rsync Over SSH来拷贝文件中了解详细信息。

Rsync图形工具

有适用于Rsync的图形工具（对于那些不习惯使用命令行的人）。Acrosync就是一款这样的工具，而且可在Windows和macOS上使用。同样地，你必须从托管服务提供商那里获取连接凭据，不过你现在可以通过图形化界面来输入它们。

GitHub

GitHub允许你通过GitHub Pages（gh-pages）发布网站。我们已经在我们的Web入门指南的发布网站中介绍了这一内容，所以我们不再重复。

但是，值得注意的是，你也可以在使用自定义域名的情况下，在GitHub上托管网站。请参阅配置GitHub Pages站点的自定义域以获取详细的指南。

其他上传文件的方法

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

• Web界面：作为远程文件上传服务前端的HTML界面。由你的托管服务提供。
• WebDAV：是一个HTTP协议的扩展，允许更多的高级文件管理功能。

本文原文来自Mozilla开发者网络