在Linux阿里云服务器上部署Nextjs项目

概述

最近在作一个Nextjs项目,官网教程最后一步是部署Next.js项目，可是网上大部分文章描述的并不清晰，并且大部分为 Copy 转载，对新手并不友好，所以本身针对服务器部署进行了整理，方便有本身部署需求的朋友👬🏻

须要准备

• 按照Nextjs官网的教程准备一个简单的Next.js APP
• 服务器安装 Node Nginx PM2，配置环境
• 运行程序，保证服务器能正常访问

服务器安装 node

此处不表，网上教程较多，本文以部署 Nextjs 为主要目标

安装PM2

安装PM2进行线程管理,PM2官网文档

//全局安装PM2
npm install pm2 -g

//建立软链接 node 路径
ln -s /root/node-v10.14.2-linux-x64/bin/pm2 /usr/local/bin/

// 查看进程
pm2 list

//启动 引号内是线程名
pm2 start npm --name "nextjs" -- run start

//结束线程
pm2 delete nextjs

复制代码

部署项目

按照Nextjs官网的教程准备一个简单的Next.js APP

网址：Nextjs官网

作到打开localhost:3000能访问到页面就行。

而后使用 FTP 软件，将项目上传到服务器中 /var/www/nextjs/ 修改 package.json

"scripts": {
    "dev": "next dev",
    "build": "next build && PORT=3000 npm start",
    "start": "next start -p $PORT",
    "lint": "next lint"
  },

复制代码

// 执行并安装相关包
   npm install 
   //或者
   yarn install
复制代码

解析域名

到域名服务商控制台将域名解析指向到项目部署的服务器

配置 Nginx 配置文件

在nginx目录下的conf.d文件夹下 添加文件wxlvip.conf 该配置文件因每一个服务器安装的服务不一样，位置也可能会有所不一样，按照我的路径进行修改便可

server {
    listen       80;
    server_name  www.wxlvip.com;
   
   location / {
       #root项目文件的绝对路径
       root /var/www/nextjs;
       proxy_pass http://127.0.0.1:3000/;#改为本身的host 及 端口
       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;
    }
}
复制代码

记得修改完成后，重启服务器。

运行项目并访问

进入/var/www/nextjs/目录执行如下命令，并访问 域名

pm2 start npm --name "nextjs" -- run build
复制代码

🕯️： 项目已经在运行了。
接下来打开绑定的域名，正常访问项目。
看看个人www.wxlvip.com/

文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞👍收藏加关注😊，但愿点赞多多多多...