全棧開發實踐:使用 next.js + nest.js 開發完整前後端分離專案

程式設計師 custw • at 2021-02-22 14:12:21 • 4 Views

Wipi

簡介

本文使用 next.jsnest.jsMySQL 從 0 到 1 搭建了一個完整的前後端分離專案。其中,使用 next.js 通過服務端渲染前臺頁面和後臺管理系統,使用 nest.js 提供了 restful api 介面,使用 typeorm 操作 MySQL 資料。

連結

功能點

  • 文章建立、釋出、更新,以及相應標籤、分類管理
  • 文章搜尋
  • 頁面建立、釋出、更新
  • 評論管理
  • 郵件通知
  • 系統訪問統計( ip + user-agent )
  • 使用者管理(管理員、訪客)
  • 檔案上傳(上傳到 阿里 OSS )
  • 動態 SEO 、標題、Logo 、favicon 等設定
  • 使用 vscode 的 monaco 作為文章、頁面的編輯器,支援 Markdown 語法

更多功能,歡迎訪問系統進行體驗。

預覽

  • 前臺首頁
  • 前臺文章
  • 前臺搜尋
  • 前臺歸檔
  • 後臺首頁
  • 後臺設定
  • 後臺文章管理
  • 後臺編輯器
  • 後臺評論管理

本地啟動

  • 安裝依賴

首先安裝 MySQL,推薦使用 docker 進行安裝。

docker run -d --restart=always --name wipi-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql
  • clone 本專案。
git clone --depth=1 https://github.com/fantasticit/wipi.git your-project-name

然後安裝專案 node 依賴。

lerna bootstrap
  • 啟動專案
lerna run dev

前臺頁面地址:http://localhost:3000。 後臺管理地址:http://localhost:3001。 服務介面地址:http://localhost:4000

首次啟動,預設建立管理員使用者:admin,密碼:admin (可在 server/src/config 檔案中進行修改)。 [PS] 如服務端配置啟動失敗,請先確認 MySQL 的配置是否正確,配置檔案在 server/src/config

專案部署

在伺服器使用 pm2 進行部署即可,可以檢視 deploy.sh 檔案。具體內容如下:


node -v
npm -v

npm config set registry http://registry.npmjs.org

npm install pm2 -g
npm i -g @nestjs/cli
npm i -g lerna

lerna bootstrap
lerna run build
lerna run pm2

pm2 startup
pm2 save

nginx 配置

採用反向代理進行 nginx 配置,同時設定 proxy_set_header X-Real-IP $remote_addr; 以便服務端獲取到真實 ip 地址

upstream wipi_client {
  server 127.0.0.1:3000;
  keepalive 64;
}

# http -> https 重定向
server {
  listen  80;
  server_name 域名;
  rewrite ^(.*)$  https://$host$1 permanent;
}

server {
  listen 443 ssl;
  server_name 域名;
  ssl_certificate      證書存放路徑;
  ssl_certificate_key  證書存放路徑;

  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://wipi_client; #反向代理
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

資料

遇到問題,善用搜尋引擎。

Total: 8
  • ppxpps 2021-02-22 14:12:21
    暗黑模式 logo 旁邊的字兒是黑色的,看不清
  • Kasumi20 2021-02-22 14:12:21
    厲害厲害
  • dioxide 2021-02-22 14:12:21
    支援一下, 很有參考意義.
  • custw 2021-02-22 14:12:21
    @ppxpps 這個 logo 是一張圖片,有時間重新設計下 😅
  • fengsi 2021-02-22 14:12:21
    樓主您好,請問能請教一下您評論系統該如何設計比較好呢?一直對這塊比較困惑
  • custw 2021-02-22 14:12:21
    @fengsi 可以參考一下 b 站的評論系統設計,或者 v 站的評論設計,當然還是要看你自己的需求是什麼樣的
  • JustSong 2021-02-22 14:12:21
    @custw 貌似你沒有 watch 自己的倉庫?我提了個 issue,不知道你是否能收到通知
  • custw 2021-02-22 14:12:21
    @JustSong 已回覆
Add a reply
For Commenting you need to Login. If you dont have a Account you need to Register.