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

·  阅读 2627
在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
复制代码

解析域名

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

image.png

配置 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/目录执行以下命令,并访问 域名 给nextjs 目录及打包生成的目录.nexjs文件夹可写权限

// 执行
pm2 start npm --name "nextjs" -- run build && pm2 save
复制代码

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

image.png

文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞👍收藏加关注😊,希望点赞多多多多...

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改