Wipi
簡介
本文使用 next.js、nest.js 和 MySQL 從 0 到 1 搭建了一個完整的前後端分離專案。其中，使用 next.js 通過服務端渲染前臺頁面和後臺管理系統，使用 nest.js 提供了 restful api 介面，使用 typeorm 操作 MySQL 資料。
連結
- Github 原始碼
- 前臺頁面
- 管理系統：支援訪客註冊，也可使用賬戶：
wipiwipi123456
功能點
- 文章建立、釋出、更新，以及相應標籤、分類管理
- 文章搜尋
- 頁面建立、釋出、更新
- 評論管理
- 郵件通知
- 系統訪問統計（ 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;
}
}
資料
- next.js 原始碼： https://github.com/vercel/next.js
- next.js 文件： https://nextjs.org/
- nest.js 原始碼： https://github.com/nestjs/nest
- nest.js 文件： https://nestjs.com/
遇到問題，善用搜尋引擎。
