Vercel太贵了？手把手教你把Next.js应用部署到Hostinger VPS上

Vercel 的定价可能让你感到沮丧。如何在 Hostinger VPS 上部署你的 Next.js 应用以获得更好的性能和降低成本。

将一个 Next.js 应用程序部署到 Hostinger VPS 托管环境可以是一个无缝的过程，只要操作得当，这个过程可以非常顺利。下面是一个详细的步骤指南来帮助你有效地部署你的应用程序。

前提条件

在开始之前，请确保你已经具备了:

• 一个 Hostinger 的 VPS 托管计划。
• 与你的 VPS 相连的 域名（可选但推荐）。
• 基本了解 Linux 命令和 SSH。
• 准备好部署的 Next.js 应用程序。
• 一个本地的终端或 SSH 客户端（例如 PuTTY）。

第一步：通过 SSH 连接到您的 VPS

1. 登录 Hostinger 进入您的Hostinger 控制面板并导航到您的 VPS 主机服务。
2. 查看您的VPS 详情
3. 连接 SSH 打开您的终端或 SSH 客户端并运行以下命令：

ssh root@<您的VPS IP地址>

将 <your-vps-ip> 替换为你的 VPS IP 地址。按提示输入你的密码。

步骤 2：更新并配置 VPS 服务器

1. 更新系统软件包 运行以下命令来更新服务器上的软件包：

运行以下命令来更新软件包列表并升级所有软件到最新版本：

apt update && apt upgrade -y

安装需要的工具或使用Hostingers VPS预设模板，如 Node.js

确保你已经安装了 curl 和 wget，

    apt install curl wget -y # 安装curl和wget工具 (-y表示自动确认安装)

第三步：安装 Node.js 和 npm

1. 通过NodeSource安装Node.js，获取Node.js的最新稳定版本。

运行以下命令来安装Node.js 18.x: curl -fsSL https://deb.nodesource.com/setup_18.x | bash - 和 apt install nodejs -y.

检查安装：

运行 node -v 和 npm -v 来检查 Node.js 和 npm 的版本号。

安装 pm2 来帮你管理应用。

运行以下命令来全局安装 pm2：

npm install -g pm2

这里，npm 是 Node.js 的包管理工具，-g 表示全局安装，而 pm2 是一个进程管理工具，用于保持应用的持续运行。

第 4 步：为部署做准备您的 Next.js 应用程序

1. 启动您的 Next.js 应用，在您的本地机器上启动您的 Next.js 应用程序。

运行构建命令：npm run build。

确保应用在本地运行良好后再进行下一步。

将文件传到VPS：

使用 scp 将你的应用上传至VPS（虚拟专用服务器）:

    scp -r /path/to/your/app root@<VPS的IP地址>:/var/www/your-app

进入应用列表

通过 SSH 登录到你的 VPS 并进入你的应用所在的文件夹 （SSH）

    cd /var/www/your-app

安装所需的依赖项

跑

运行：npm install 命令

第5步：运行你的 Next.js 应用程序

启动应用 使用pm2启动你的应用就可以了。

pm2 start npm --name "nextjs-app" -- start
# 启动名为“nextjs-app”的npm进程

设置自动启动以在重启时运行

保存 pm2 任务的方法：

使用PM2保存应用 (pm2 save)，然后启动PM2 (pm2 startup)。

步骤 6：使用 Nginx 来配置反向代理

安装一下 Nginx 吧

跑：

    apt install nginx -y

运行以下命令以安装Nginx，其中-y参数表示自动确认安装（无需用户输入）。

为您的应用配置 Nginx 服务器

支持我一下，给我点书钱taboola="taboola" 书

打开 Nginx 配置文件（config 文件）。

    nano /etc/nginx/sites-available/nextjs
    （打开并编辑 Next.js 的 nginx 配置文件）

请添加下面的配置：

    server {  
        listen 80;  // 监听80端口
        server_name your-domain.com;  // 设置服务器名称为your-domain.com

;

        location / {  
            proxy_pass http://localhost:3000;  # 将请求代理到本地主机的3000端口  
            proxy_http_version 1.1;  # 设置代理的HTTP版本为1.1  
            proxy_set_header Upgrade $http_upgrade;  # 设置 Upgrade 头为 $http_upgrade 的值  
            proxy_set_header Connection 'upgrade';  # 设置 Connection 头为 'upgrade'，用于支持 WebSocket 升级请求  
            proxy_set_header Host $host;  # 设置 Host 头为当前主机  
            proxy_cache_bypass $http_upgrade;  # 当 $http_upgrade 存在时，绕过代理缓存  
        }  
    }

开启配置

把文件链接到sites-enabled目录下。

ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/ # 创建一个符号链接，将 nextjs 配置文件从 sites-available 目录链接到 sites-enabled 目录

重启一下 Nginx

应用这些更改。

运行命令 systemctl restart nginx (systemctl (系统管理工具) restart nginx (网络服务器)) 来重启nginx服务。

恭喜🎉 您的 Nextjs 网站已经上线，可以通过访问您的域名或机器 IP 地址来查看

步骤 7 (可选的)：通过 SSL 保护您的应用安全

开始安装 Certbot（这是一个用于获取和安装 SSL 证书的工具）

跑

使用以下命令安装certbot和python3-certbot-nginx，并自动确认安装：

    apt install certbot python3-certbot-nginx -y

获得一个SSL证书

执行吧：

    certbot --nginx -d your-domain.com -d www.your-domain.com

在命令行中输入以上命令来为你的域名安装Certbot: certbot --nginx -d your-domain.com -d www.your-domain.com

SSL自动续订

在 crontab 中添加:

    crontab -e

如果你想编辑 crontab 文件，你可以使用命令 crontab -e。

添加这一行：

0 3 * * * certbot renew --quiet # 每天凌晨3点静默续期certbot证书

第8步：测试你的应用程序

打开应用 打开你的浏览器并访问该网址：

http://your-domain.com

查看日志

使用 pm2 logs 查看错误：

运行 `pm2 logs` 命令，这将显示 PM2 应用程序的日志

最后

遵循此详细指南，您成功将 Next.js 应用部署到了 Hostinger 的 VPS 托管 服务器上。通过使用 Nginx 作为反向代理和 SSL 提供安全，您的应用现在已上线，并准备好为全球用户提供服务。

希望这篇文章对你有帮助，希望对你有用😊

给我点书买📙