假设你已经构建了一个 Next.js 应用,现在想要将其部署到 Linux 服务器上。我将引导你完成这些步骤。
在这里插入图片描述
首先,你需要确保你的服务器已安装 Nginx。

如果没有,你可以使用几个简单的命令进行安装。完成后,你需要为应用设置一个域名。你可以从域名注册商处购买域名,也可以使用免费域名提供商(如 Freenom)。在你的服务器上,可以通过运行以下命令安装 nginx:

sudo apt-get update
sudo apt-get install nginx

接下来,使用 Git 将 Next.js 应用存储库克隆到你的服务器。

可以通过运行以下命令来执行此操作:

git clone <your_app_repository_url>

我使用的是Xftp7,给服务器直接传了个压缩包,毕竟node包和原项目下的一些依赖项不需要拷贝。

随后安装应用程序所需的任何依赖项并构建应用程序,然后才能部署它。

为此,请导航到应用程序目录并通过运行以下命令安装其依赖项:

npm install

安装依赖项后,运行以下命令来构建应用程序:

npm run build

一旦你的应用程序准备就绪,将需要设置 PM2。

这是一个进程管理器,可帮助你让应用在后台运行,并在应用崩溃时重新启动。PM2 易于安装和使用,是确保你的应用始终可供用户使用的绝佳方式。要安装 PM2,请运行以下命令:

npm install -g pm2 

接下来,通过运行以下命令使用 PM2 启动应用程序:

pm2 start npm --name "your-app-name" -- start 

这将启动应用程序并将其命名为“your-app-name”。如果应用程序崩溃,PM2 将自动重新启动它。

你可以通过pm2 list查看应用程序的状态

在这里插入图片描述
修改项目

更新项目,只需要传入文件重新npm run build后暂停pm2进程守护pm2 stop <name>
进行npm run start再重启pm2 restart <name>即可完成更新。

我一共上传了两个项目,第一个项目启动在默认端口3000上,
第二个项目则需要手动设置端口

PORT=3003 npm run start
PORT=3003 pm2 start npm --name "your-app-name" -- start 

接下来,你需要设置 Nginx 来代理对你的应用的请求。

这听起来可能很复杂,但实际上非常简单。你只需要创建一个新的 Nginx 配置文件,粘贴一些代码,然后重新启动 Nginx。
通过运行以下命令创建一个新的 Nginx 配置文件

server {
    listen 80;
    server_name your-domain-name.com www.your-domain-name.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

将“your-domain-name.com”替换为你的实际域名。保存配置文件并退出文本编辑器。

接下来,通过运行以下命令在 sites-enabled 目录中创建指向配置文件的符号链接:

sudo ln -s /etc/nginx/sites-available/your-app-name.com /etc/nginx/sites-enabled/ 

最后,通过运行以下命令重新启动 Nginx:

sudo systemctl restart nginx

设置 Nginx 并且的用程序准备就绪后,你要确保您域名正确指向您的服务器。

更新 DNS 记录的方法如下:

登录您购买域名的域名注册商网站。
查找您的域的 DNS 管理部分。
添加指向您服务器 IP 地址的“A”记录。如果您不确定如何查找您服务器的 IP 地址,请参阅您的服务器提供商的文档。
如果您想在域名中使用“www”,您也可以添加指向域名的 CNAME 记录。
保存更改并等待最多 24 小时以使 DNS 更改在互联网上传播。
一旦您的 DNS 更改传播出去,您就需要设置 Certbot。

此工具可帮助您为域名设置 SSL 加密。SSL 加密很重要,因为它有助于保护用户的数据免遭窥探。要安装 Certbot,请运行以下命令:

sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

接下来,运行以下命令来生成 SSL 证书:

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

将“your-domain-name.com”替换为您的实际域名。按照提示生成您的 SSL 证书。

更新 Nginx 配置文件

生成 SSL 证书后,您需要更新 Nginx 配置文件以使用 HTTPS 而不是 HTTP。运行以下命令打开 Nginx 配置文件:

sudo nano /etc/nginx/sites-available/your-app-name.com 

将文件内容替换为以下代码:

server {
    listen 80;
    server_name your-domain-name.com www.your-domain-name.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain-name.com www.your-domain-name.com;

    ssl_certificate /etc/letsencrypt/live/your-domain-name.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain-name.com/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

将“your-domain-name.com”替换为您的实际域名。保存配置文件并退出文本编辑器。

通过运行以下命令重新启动 Nginx:

sudo systemctl restart nginx 

最后,你需要测试你的应用,以确保一切正常

现在,你的应用应该可以通过 HTTPS 在您的域名上访问。通过在网络浏览器中访问你的域名来测试它。

恭喜!
您刚刚使用 Nginx、PM2、Certbot 和 Git 在 Linux 服务器上部署了 Next.js 应用程序。乍一看,这可能看起来很艰巨,但只要有一点耐心和毅力,任何人都可以做到。祝你好运!

祝你编码愉快🧑🏽‍💻


文章参考:https://dev.to/j3rry320/deploy-your-nextjs-app-like-a-pro-a-step-by-step-guide-using-nginx-pm2-certbot-and-git-on-your-linux-server-3286

目前部署Next.js项目的教程挺多但是质量参差不齐,这是一篇非常有用的指南,解决了我很多问题,希望能帮到你们!😄

Logo

一起探索未来云端世界的核心,云原生技术专区带您领略创新、高效和可扩展的云计算解决方案,引领您在数字化时代的成功之路。

更多推荐