V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
custw
V2EX  ›  程序员

全栈开发实践:使用 next.js + nest.js 开发完整前后端分离项目

  •  
  •   custw ·
    fantasticit · 60 天前 · 1771 次点击
    这是一个创建于 60 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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;
      }
    }
    

    资料

    遇到问题,善用搜索引擎。

    8 条回复    2021-02-22 14:04:53 +08:00
    ppxpps
        1
    ppxpps   60 天前
    暗黑模式 logo 旁边的字儿是黑色的,看不清
    Kasumi20
        2
    Kasumi20   60 天前
    厉害厉害
    dioxide
        3
    dioxide   60 天前
    支持一下, 很有参考意义.
    custw
        4
    custw   60 天前
    @ppxpps 这个 logo 是一张图片,有时间重新设计下 😅
    fengsi
        5
    fengsi   59 天前
    楼主您好,请问能请教一下您评论系统该如何设计比较好呢?一直对这块比较困惑
    custw
        6
    custw   59 天前
    @fengsi 可以参考一下 b 站的评论系统设计,或者 v 站的评论设计,当然还是要看你自己的需求是什么样的
    JustSong
        7
    JustSong   59 天前
    @custw 貌似你没有 watch 自己的仓库?我提了个 issue,不知道你是否能收到通知
    custw
        8
    custw   59 天前
    @JustSong 已回复
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1635 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:50 · PVG 00:50 · LAX 09:50 · JFK 12:50
    ♥ Do have faith in what you're doing.