Wipi

简介

本文使用 next.js、nest.js 和 MySQL 从 0 到 1 搭建了一个完整的前后端分离项目。其中，使用 next.js 通过服务端渲染前台页面和后台管理系统，使用 nest.js 提供了 restful api 接口，使用 typeorm 操作 MySQL 数据。

链接

Github 源码
前台页面
管理系统：支持访客注册，也可使用账户：wipi wipi123456

功能点

文章创建、发布、更新，以及相应标签、分类管理
文章搜索
页面创建、发布、更新
评论管理
邮件通知
系统访问统计（ 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; } }