不用vercel如何在VPS上部署你的Next.js项目

一般大家部署Next.js项目会直接用vercel的服务，毕竟它一键部署，方便且迅速，什么配置都不用操心。但是，除了使用vercel的平台，我们也可以通过虚拟专用服务器（VPS）自行部署Next.js项目。下面分享一下在VPS上部署Next.js项目的方法。

1. VPS基础配置

选择VPS服务商（本例以Hostinger服务商为例）
登陆HOSTINGER VPS面板，选择VPS的位置，一般选择United States，你也可以选择离你服务的用户近的主机位置。
配置操作系统。此时有三个选项：
- OS with Control Panel 带控制面板的系统
- Plain OS 没有控制面板的系统
- Applications 带有应用程序的系统，包含wordpress，Nextcloud，Node.js
  建议选择第一个，这样能更轻松地管理多个应用程序或多个站点。
选择应用程序CloudPanel。
不用勾选任何其他的软件。
为控制面板设置密码。
设置SSH访问密码，等待几分钟后，完成设置。
接下来进行域名购买，也可以后面再设置。
此时，我们进入VPS控制面板，记下IP address后面会用到。

2. 项目环境配置

在VPS控制面板的SSH access中可以找到一行：

Terminal ssh root@xx.xx.xx.xxx

我们需要在电脑终端中运行它。你可以使用vs code运行，或者单独打开终端操作。

打开独立终端，输入你的VPS上的IP地址

ssh root@xx.xx.xx.xxx

出现独立安全问题，选择yes。输入之前设置的SSH访问密码（不是VPS面板的密码）。登陆成功后，能看到云面板的信息。

检查git是否正常安装。
- 输入 pwd 查看当前工作目录，可以看到我们处于/root目录下。
- 输入ls，检查此处的文件。
- 输入node -v，会发现服务器没有安装node.js。
- 先查询git是否安装，输入git，发现git已经预先安装。
安装NPM。

   apt install NPM
   npm -v

安装完毕后，检查当前安装的版本，如果出现版本号，说明安装成功。

安装Node.js

   npm install -g n //安装指定版本
   n lastest //安装最新版本
   node -v

可以看到最新的node.js版本。NEXT.js的应用此时默认运行地址为localhost：3000，也就是我们的VPS的IP地址。

新增Nginx站点配置

nginx -v

先检查nginx是否已经安装。添加站点配置文件(文件名你自己定义，假设为Nextjs-app)。运行以下代码，这将打开一个编辑器

sudo nano /etc/nginx/sites-availables/Nextjs-app.conf

在编辑器中粘贴以下代码片段：

server {
    listen 80;
    server_name xx.xx.xx.xxx; # VPS IP address

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_headr Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

粘贴完毕后回车，退出编辑。

检查文件是否有效，输入以下命令：

ls /etc/nginx/sites-availables/

如果返回文件名如Nextjs-app.conf，这便完成了nginx的一个站点的配置。

启用服务器配置
输入以下内容，创建一个链接：

sudo ln -s /etc/nginx/sites-availables/Nextjs-app.conf /etc/nginx/sites-enabled/

检查站点启用路径中的内容：

ls etc/nginx/sites-enabled/

结果应该显示：Nextjs-app.conf default.conf

3. Next.js项目安装

mkdir /var/www/Nextjs-app

cd /var/www/Nextjs-app

输入 ls，可以看到目录现在是空的。

git clone https://github.com/yourname/Nextjs-app.git

cd Nextjs-app
npm install

安装应用，但此时会出错。解决这个问题的方法，就是退出ssh并重新登录。

exit

退出ssh，然后再次登陆:

ssh root add

再次进入你的项目目录：

cd /var/www/Nextjs-app/Nextjs-app/

再次运行

npm install

构建应用程序:

npm run build

由于更新了配置，所以需要重新启动Nginx

sudo service nginx restart

运行生产版本:

npm run start

部署完毕。此时就可以在浏览器输入你的VPS IP地址访问你的Next.js应用程序。

1. VPS基础配置#

2. 项目环境配置#

3. Next.js项目安装#

1. VPS基础配置

2. 项目环境配置

3. Next.js项目安装