Sign in Subscribe
9 min read

从 MBP 本地到阿里云部署：我的网站上线全过程

从 MBP 本地到阿里云部署：我的网站上线全过程
Photo by Ales Nesetril / Unsplash

自动化部署 Ghost 站点之后，仍然觉得对于网站构建方面知识和实操不够，因此决定自己从0开始从头部署网站，本篇博客主要目的是：将简单的静态网站部署到阿里云服务器上。

本过程我使用到：

  • 个人主机：MBP Pro 2021
  • 一台服务器：阿里云服务器
  • 一个域名：lorden.xyz

引言

本篇文章目的是将一个简单的静态网站部署到云服务器上，并通过一个全新的子域名访问。这个想法最终成功实现，整个过程让我对前端部署和 Linux 服务器管理有了更深的理解。

阶段一：本地开发与 Git 初始化

1. 本地网站编写

首先，我在我的个人主机上完成了静态网站的所有代码编写，包括 HTML、CSS、JavaScript 以及图片资源等。这些都是网站的核心内容，是最终用户在浏览器中会看到的一切。

2. Git 仓库初始化与首次提交

为了更好地管理我的代码版本，我在项目根目录初始化了一个 Git 仓库：

Bash

git init
git add .
git commit -m "Initial commit of the static website"

Git 是我的代码时光机，它能追踪我所有文件修改的历史，方便我随时回溯或管理不同版本。

3. 连接 GitHub 远程仓库

作为一个优秀的版本控制平台，GitHub 是我存储代码的远程堡垒。我在 GitHub 上创建了一个新的空仓库 a-new-site。然后，在本地终端将我的本地仓库与 GitHub 上的远程仓库关联起来：

Bash

git remote add origin https://github.com/ImLorden/a-new-site.git

origin 是这个远程仓库的别名，便于我后续操作。

4. 首次推送到 GitHub

最后，我将本地的代码首次推送到 GitHub 仓库：

Bash

git push -u origin main

-u 参数帮我建立了本地 main 分支与远程 origin/main 分支的关联，以后 git push 就更方便了。这次推送也初步验证了我本地网络到 GitHub 的连通性和认证是否正常。

阶段二：服务器准备与 SSH 连接（阿里云服务器）

这是整个过程中“踩坑”最多的一个阶段，但也因此积累了宝贵的经验。

1. 服务器防火墙与 SSH 服务检查

在连接服务器之前，我习惯性地检查了服务器自身的状态：

Bash

sudo ufw status # 确认ufw防火墙非活跃
sudo systemctl status ssh # 确认SSH服务正常运行

这些检查帮助我排除了服务器内部防火墙和 SSH 服务本身的问题。

2. 解决 SSH 连接超时问题

最开始，我尝试从公司 Wi-Fi 连接阿里云服务器，但总是遇到 SSH 连接超时。经过一番排查，我发现：

  • 阿里云安全组配置正确： 22 端口已开放，源 IP 也设置为允许所有 IPv4 访问。这排除了服务器外部防火墙的问题。
  • 关键发现： 我尝试使用手机热点连接时，SSH 竟然成功了！

结论： 问题不在服务器，也不在我本地电脑，而是公司网络的防火墙限制了出站的 SSH 连接。这提醒我们，在排查网络问题时，要考虑网络环境的差异。

3. 处理 SSH 主机识别变更警告

通过手机热点连接后，我遇到了一个 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 的警告。这是因为我的服务器可能重装过系统或 IP 变动，导致本地 ~/.ssh/known_hosts 文件中保存的服务器指纹与当前服务器的不匹配。

解决方案很简单，删除本地冲突的指纹即可：

Bash

ssh-keygen -R 47.109.159.2 # 替换为你的服务器IP

4. 建立服务器 SSH Key 并最终成功连接

为了后续 git clone 能稳定且无需密码地从 GitHub 拉取代码，我决定为服务器（root 用户）生成 SSH Key，并将其添加到 GitHub。

首先，我检查了 root 用户是否已有 SSH Key：

Bash

ls -l ~/.ssh/id_rsa.pub
ls -l ~/.ssh/id_ed25519.pub

发现并没有。于是我生成了一个新的 ED25519 类型密钥：

Bash

ssh-keygen -t ed25519 -C "your_email_for_github@example.com"
# 一路回车接受默认设置

接着，我复制了生成的公钥内容：

Bash

cat ~/.ssh/id_ed25519.pub

然后登录 GitHub，进入 Settings -> SSH and GPG keys，点击 New SSH key，将复制的公钥粘贴进去并保存。

完成这些步骤后，我终于成功通过 SSH 连接到了我的阿里云服务器！

Bash

ssh root@47.109.159.2
# 首次连接可能会提示信任指纹，输入yes

阶段三：网站文件部署到服务器（Nginx 配置）

服务器连接成功后，就开始了网站部署的核心环节。

1. 确认 Web 服务器为 Nginx

我发现服务器的 /var/www/html 目录下有一个 index.nginx-debian.html 文件，这表明服务器使用的 Web 服务器是 Nginx。这意味着我需要按照 Nginx 的方式来配置网站。

2. 子域名解析（DNS 配置）

我的主域名 lorden.xyz 已经用于个人博客，所以决定为这个新网站使用一个子域名：new.lorden.xyz。

我在阿里云控制台的“云解析 DNS”中，为 lorden.xyz 域名添加了一条 A 记录：

  • 主机记录： new
  • 记录类型： A
  • 记录值： 我的服务器公网 IP 地址 47.109.159.2

这步是为了让互联网知道 new.lorden.xyz 这个子域名应该指向我的阿里云服务器。

3. 服务器端网站文件克隆

在服务器上，我创建了新的网站存放目录，并尝试克隆 GitHub 仓库：

Bash

mkdir -p /var/www/new-static-site
cd /var/www/new-static-site/
git clone git@github.com:ImLorden/a-new-site.git .

这里我特别使用了 git@github.com:... 这种 SSH 协议的克隆方式，它比 HTTPS 协议在某些国内网络环境下更稳定，能够有效避免之前遇到的下载忙碌或 RPC 错误。

4. 文件权限设置

这是部署静态网站非常关键的一步！Nginx 通常以 www-data 用户身份运行，它需要权限来读取你的网站文件。

Bash

sudo chown -R www-data:www-data /var/www/new-static-site/
sudo chmod -R 755 /var/www/new-static-site/

我将网站目录及其内部所有文件的所有者和所属组都设置为了 www-data，并赋予了正确的读写执行权限，确保 Nginx 能够正常访问。

5. Nginx 虚拟主机配置与启用

为了让 Nginx 知道如何处理 new.lorden.xyz 的请求，我创建了一个 Nginx 虚拟主机配置文件：

Bash

sudo nano /etc/nginx/sites-available/new.lorden.xyz.conf

文件内容如下：

Nginx

server {
    listen 80;
    listen [::]:80;
    server_name new.lorden.xyz; # 确保这里是您的子域名

    root /var/www/new-static-site; # 网站文件实际存放的目录
    index index.html index.htm; # 主页文件

    location / {
        try_files $uri $uri/ =404;
    }
}

保存并退出后，我启用了这个配置：

Bash

sudo ln -s /etc/nginx/sites-available/new.lorden.xyz.conf /etc/nginx/sites-enabled/

接着，测试 Nginx 配置语法是否正确：

Bash

sudo nginx -t

如果显示 syntax is ok，就可以重新加载 Nginx 服务使其生效：

Bash

sudo systemctl reload nginx

6. 配置 HTTPS 安全访问

网站上线后，为了提供安全连接和提升用户信任，配置 HTTPS 是必不可少的。我使用了 Let's Encrypt 提供的免费证书，并通过 Certbot 工具自动化配置：

Bash

sudo apt update
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d new.lorden.xyz

Certbot 会引导我输入邮箱、同意服务条款，并询问是否将 HTTP 流量自动重定向到 HTTPS。我选择了重定向（选项 2）。Certbot 随后会自动完成证书的获取、Nginx 配置的修改和服务的重启。

期间，我遇到了网站显示“不安全”的问题，即使 Certbot 报告成功。 经过排查，发现是浏览器缓存导致的问题，在无痕模式下访问是正常的。这提醒我，在部署更新后，强制刷新浏览器缓存是多么重要！

阶段四：网站上线与后续更新维护

经过以上所有步骤，我的网站 https://new.lorden.xyz/ 终于能够安全、正常地访问了！

后续网站更新流程（手动模式）

为了保持对部署流程的熟练度，我决定暂时不考虑自动化部署，继续保持手动更新。以下是我的更新流程：

  1. 在本地 MBP Pro 上进行修改并提交：
    • 在本地项目目录进行代码修改。
    • git status 查看修改。
    • git add . 暂存修改。
    • git commit -m "Your meaningful commit message" 提交修改到本地仓库。
    • git push origin main 推送到 GitHub 远程仓库。
  2. 在阿里云服务器上同步更新：这样，服务器上的网站文件就会自动更新到最新版本了。对于静态网站，通常无需重启 Nginx。
    • 通过 SSH 连接到服务器：ssh root@47.109.159.2
    • 进入网站根目录：cd /var/www/new-static-site/
    • 拉取最新代码：git pull origin main

结语

从 MBP 本地编写代码，到通过 Git 和 GitHub 进行版本控制，再到阿里云服务器部署 Nginx 并配置 HTTPS，最后实现网站的持续更新，整个过程让我收获颇丰。希望这篇博客能为你提供一些实用的指导和启发，如果你也想搭建自己的网站，不妨动手尝试一下！

Published by:

Jay Lorden
i