All Articles

在 VPS 上部署 Gatsby 博客的经验分享

部署 Gatsby 博客到 VPS(虚拟私人服务器)是一个充满挑战的过程。在这篇文章中,主要是记录自己的博客部署流程以及一些踩坑要点,可能对别人不大具有参考价值,不喜勿喷。

准备工作

在开始之前,确保你已经准备好以下几样东西:

  • 一个 VPS 实例(如 AWS EC2、DigitalOcean Droplet 等,这里使用的UCloud 双11买的云主机)
  • 域名(可选,如果你打算使用自定义域名)
  • 基本的命令行知识

步骤 1:设置 VPS

首先,登录到你的 VPS,并更新系统:

sudo yum update

步骤 2:安装 Node.js 和 npm

由于 CentOS 默认的 Yum 仓库中可能不包含最新版本的 Node.js,我们将使用 NVM(Node Version Manager)来安装和管理 Node.js 版本。

  1. 安装 NVM:

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
  2. 激活 NVM 环境(或重新登录):

    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
  3. 安装 Node.js:

     # 这里安装的是node的21版本
     nvm install 21

步骤 3:安装 Gatsby CLI

使用 npm 全局安装 Gatsby CLI:

npm install -g gatsby-cli

步骤 4:克隆你的 Gatsby 项目

使用 Git 克隆你的 Gatsby 项目到 VPS:

git clone <你的仓库URL>
cd <你的项目目录>

步骤 5:安装依赖和构建项目

在项目目录中,安装依赖并构建你的 Gatsby 站点:

npm install
gatsby build

踩坑记录

问题 1:Node.js 版本不兼容

现象:Gatsby 需要较新版本的 Node.js,而 VPS 上的版本过旧。

解决方案:使用 NVM 安装并使用合适的 Node.js 版本。

问题 2:Gatsby 插件路径问题

现象:在 VPS 上运行 Gatsby 时,某些插件没有找到正确的路径。

解决方案:检查并确保所有的依赖都已正确安装。在某些情况下,可能需要手动指定插件的路径或重新安装问题插件。

步骤 6:运行 Gatsby

使用 Gatsby CLI 在服务器上启动你的站点:

gatsby serve --host 0.0.0.0 --port 8000

步骤 7:配置 Nginx(可选)

如果你有 Nginx,可以配置它作为反向代理来提供你的 Gatsby 站点。

步骤 8:使用 GoDaddy 配置 DNS 映射

如果你的域名是通过 GoDaddy 注册的,你需要配置 DNS 以将域名指向你的 VPS IP 地址:

  1. 登录到你的 GoDaddy 账户。

  2. 转到“我的产品”页面,然后找到你的域名。

  3. 在域名设置中,找到 DNS 管理或 DNS 设置部分。

  4. 添加或修改 A 记录,将域名指向你的 VPS IP 地址:

    • 类型:A
    • 名称:@(代表根域名)
    • 值:你的 VPS IP 地址
    • TTL:默认或自定义
  5. 保存更改。请注意,DNS 更改可能需要一些时间(最多 48 小时)来全球生效。

步骤 9:配置 Nginx

配置 Nginx 作为反向代理来提供你的 Gatsby 站点。以下是一个基本的 Nginx 配置示例:

  1. 打开或创建一个新的 Nginx 配置文件:

    sudo nano /etc/nginx/sites-available/yourdomain.com
  2. 添加以下配置:

    server {
        listen 80;
        server_name yourdomain.com www.yourdomain.com;
    
        location / {
            proxy_pass http://localhost:8000; # 确保这里的端口与 Gatsby serve 使用的端口匹配
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
  3. 激活配置文件:

    sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
  4. 测试 Nginx 配置是否正确:

    sudo nginx -t
  5. 重新加载 Nginx 以应用更改:

    sudo systemctl reload nginx

结论

部署 Gatsby 博客到 VPS 是一个涉及多个步骤的过程,可能会遇到各种挑战。使用Gpt还是挺方便的,最终成功部署站点。希望我的经验能帮助你顺利完成部署!

to补充

大致流程:代码同步->编译 npm install -> 部署 npm build && npm serve 或者 npm run start -> 配置dns映射 -> 配置nginx端口转发 -> 配置https

为什么花了一天时间

  1. dns映射花了些时间
  2. vps上一个graphQL语法问题花了差不多一下午纠结
  3. develop模式占用内存过高,然后production模式编译需要至少2g内存,需要去配置虚拟内存
sudo fallocate -l 1G /swapfile  # 创建一个 1GB 的交换文件
sudo chmod 600 /swapfile       # 设置正确的权限
sudo mkswap /swapfile          # 设置交换区
sudo swapon /swapfile          # 启用交换区

然后在/etc/fstab添加行

/swapfile swap swap defaults 0 0

即时生效,这样就多了虚拟内存了(多亏了chatgpt,终于解决我多年无法在vps上部署博客的问题了)

复盘

  • 【专注问题,多使用chatgpt了解原理,不奢求快速从网上找到解法】不了解原理直接上手还是浪费不少时间,需要静下心结合chatgpt去思考原理,才好推敲解决问题(尤其是那个graphQL查询问题,实际挺好解决的)
  • 【效率偏低,需要提前构思】走一步看一步容易丢了节奏,提前计划好然后把路先探一遍会事半功倍。
  • 【专注问题,持续扎深】今天因为计划就是把博客搞定所以全身心投入到此,突破问题还是有成就感的,但是实在是花了太久了,说明在linux运维操作方面还是没有理解透,所以经常踩坑,需要对问题深入理解,不能浮于表面。

Published Dec 25, 2023

Software Engineer from China, currently more attention to the automation field of ai interaction