[第二部分] 以最简单的方式在 Namecheap 上部署和配置你的网站
- Published on
- /6 mins read/---
在前一部分，我指导你购买并连接了域名到托管，并激活了SSL证书。
在这一部分，我将向你展示如何将代码推送到服务器并让你的网站上线 🚀
服务器上有什么 👀？
要了解服务器上的文件夹结构，请前往cPanel（我在上一篇文章中向你展示了如何访问）。在文件部分打开文件管理器。
这就是服务器上的文件夹结构！默认情况下，我们会在根目录：/home/<cpanel-用户名>。
我们需要关注的文件夹是 ./public_html，它包含网站的所有源代码（html、css、js）。我们的主要目标是将所有代码文件放在这里。
文件管理器允许直接上传文件但不允许上传文件夹 💆♂️。这就是为什么我使用Namecheap推荐的工具，即FileZilla。
授权 FileZilla
FileZilla 将通过使用 FTP（文件传输协议）访问服务器来连接并 🚚 推送代码到服务器。
为了让一个中间人 👷🏽♂️ 帮助我们将文件上传到服务器，我们需要授予该工具访问权限 => 创建一个FTP账户，FileZilla 将使用此账户为我们上传代码。
创建FTP账户非常简单：
- 前往cPanel，在文件部分点击FTP账户。
- 输入用户名和密码（别忘记了 😅）。
注意 ⚠️： 创建FTP账户时，确保将此账户的 访问目录 设置为 根目录。否则，此账户将无权访问 ./public_html 文件夹 😅
设置 FileZilla
下载并安装FileZilla后，我们将使用刚创建的FTP账户连接到服务器。
快速连接是连接服务器的最简单方式。你需要4条信息：
- 主机名：
ftpes://<主机名>（别忘记ftpes://前缀！）
（主机名就在cPanel的URL中）。
- 用户名：你刚创建的FTP账户用户名，格式为：
<ftp账户名>@<你的域名> - 密码
- 端口：默认是
21。
输入所有信息并点击快速连接。 你应该看到一个成功信号以继续。
（如果你看到端口消失了，别担心，FileZilla 会自动处理 😤）
将代码推送到服务器
复杂的部分完成了 🙈🙉，现在是时候将你的代码推送到服务器了！
在FileZilla中，有2个部分：
本地站点：包含你机器上的所有文件夹。导航到包含你代码的文件夹（确保是构建后的代码）。在我的情况下，是
./public文件夹（可能是./build、./dist、./public... 取决于你的应用配置）。远程站点：显示服务器上的所有文件夹。导航到
./public_html。
选择本地中的所有文件并将它们拖拽到远程... 完成了 🎉
现在只需打开你的网站，检查结果，如果有任何错误就修复它们 😆😆😆
双因素认证（可选）
双因素认证（2FA）是你Namecheap账户的额外安全层（你需要通过两层认证才能访问你的资源，所以即使你的账户被盗用也不用担心，因为第二层在单独的设备上）。
第一层是你的用户名/密码，第二层可以是以下之一：
- U2F（通用第二因子）：使用物理设备如钥匙来解锁账户。
- TOTP（基于时间的一次性密码）：通过认证应用在另一个设备上使用短期密码，如：Google Authenticator、Authy...
- 短信认证：在你的手机上使用短信。
我选择了通过Google Authenticator应用的TOTP。
在你的手机上下载应用，然后前往cPanel并在安全部分打开双因素认证，扫描二维码，就完成了！
从现在开始，每当你登录时，Namecheap 都会要求提供应用中的TOTP代码以确保安全。
总结
我希望这个教程能帮助你更多地了解服务器以及如何托管自己的网站。
如果你不想购买托管，你可以使用其他免费托管服务如：Github Page、Heroku、Netlify、Vercel...（它们都支持构建工具和配置，所以你只需要连接你的源代码就可以了）。
部署愉快！