如何將檔案上傳到 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 user@x.x.x.x: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 user@x.x.x.x: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 協議的擴充套件，允許更高階的檔案管理。