在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/

文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊👍收藏加關注😊，但願點贊多多多多...