本文使用 next.js
、nest.js
和 MySQL
从 0 到 1 搭建了一个完整的前后端分离项目。其中,使用 next.js
通过服务端渲染前台页面和后台管理系统,使用 nest.js
提供了 restful api
接口,使用 typeorm
操作 MySQL
数据。
monaco
作为文章、页面的编辑器,支持 Markdown
语法更多功能,欢迎访问系统进行体验。
首先安装 MySQL
,推荐使用 docker 进行安装。
docker run -d --restart=always --name wipi-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql
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
配置,同时设置 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;
}
}
遇到问题,善用搜索引擎。
1
ppxpps 2021-02-21 20:17:20 +08:00
暗黑模式 logo 旁边的字儿是黑色的,看不清
|
2
Kasumi20 2021-02-21 23:12:15 +08:00
厉害厉害
|
3
dioxide 2021-02-21 23:18:46 +08:00
支持一下, 很有参考意义.
|
5
fengsi 2021-02-22 09:07:55 +08:00
楼主您好,请问能请教一下您评论系统该如何设计比较好呢?一直对这块比较困惑
|
9
huoxingren 2021-07-01 11:53:35 +08:00
@custw 想请问一下,每修改一个组件或者页面布局,都需要服务器端重新 build 嘛,重新 run start 没起效果,重新 build 好像有点麻烦啊
|
10
huoxingren 2021-07-01 11:54:07 +08:00
@huoxingren next.js 部署方面的烦恼
|