V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
fantasticit163
V2EX  ›  分享创造

全栈开发实践: React.js 构建个人知识系统

  •  2
     
  •   fantasticit163 · 2021-06-13 10:36:40 +08:00 · 2417 次点击
    这是一个创建于 1020 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简介

    Wipi 是一个面向个人的开源的集成文章发表、页面创建、知识小册等功能的 CMS 。涉及到的技术如下:

    • MySQL:数据存储
    • next.js:前端页面框架
    • nest.js:服务端框架
    • AliyunOSS:对象存储

    访问链接

    功能点

    • 文章管理
    • 页面管理
    • 知识小册
    • 评论管理
    • 邮件管理
    • 访问统计
    • 文件管理
    • 系统设置

    更多功能,欢迎访问系统进行体验。

    预览

    • 文章列表
    • 文章详情
    • 动态页面
    • 知识小册
    • 后台管理
    • 文章编辑
    • 小册编辑

    项目运行

    数据库

    首先安装 MySQL,推荐使用 docker 进行安装。

    docker run -d --restart=always --name wipi -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:5.7
    

    然后在 MySQL 中创建数据库。

    docker container exec -it wipi  bash;
    mysql -u root -p root;
    CREATE DATABASE  `wipi` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
    

    本地运行

    首先,clone 项目。

    git clone --depth=1 https://github.com/fantasticit/wipi.git your-project-name
    

    然后,安装项目依赖。

    yarn
    
    • 启动项目
    yarn dev
    

    前台页面地址:http://localhost:3000。 后台管理地址:http://localhost:3001。 服务接口地址:http://localhost:4000

    首次启动,默认创建管理员用户:admin,密码:admin (可在 .env 文件中进行修改)。 [PS] 如服务端配置启动失败,请先确认 MySQL 的配置是否正确,配置文件在 .env。在生产环境中需要在后台正确设置系统的地址,否则二维码无法正确识别。本地开发环境中,如未填域名地址,默认为空。

    系统设置

    • 系统设置
    • 前台页面

    项目初次启动时,需要在后台进行系统设置。随着内容的丰富,页面内容也会丰富起来。

    配置文件

    默认加载 .env 文件,生产环境会尝试加载 .env.prod 文件。

    CLIENT_ASSET_PREFIX=/ # client 打包前缀地址(类似 webpack publicPath 配置)
    ADMIN_ASSET_PREFIX=/ # admin 打包前缀地址
    
    ADMIN_USER=admin # 默认管理员账户
    ADMIN_PASSWD=admin # 默认管理员密码
    DB_HOST=127.0.0.1 # 数据库地址
    DB_PORT=3306 # 数据库端口
    DB_USER=root # 数据库用户名
    DB_PASSWD=root # 数据库密码
    DB_DATABASE=wipi # 数据库名称
    

    项目部署

    生产环境部署的脚本如下:

    
    node -v
    npm -v
    
    npm config set registry http://registry.npmjs.org
    
    npm i -g pm2 @nestjs/cli lerna yarn
    
    yarn
    yarn run build
    yarn 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;
      }
    }
    

    源码链接

    9 条回复    2021-06-14 19:04:52 +08:00
    wellsc
        1
    wellsc  
       2021-06-13 10:59:49 +08:00
    啥都干啥都不精
    hs0000t
        2
    hs0000t  
       2021-06-13 11:14:14 +08:00 via Android
    x 个人知识系统
    v 博客
    zhengfan2016
        3
    zhengfan2016  
       2021-06-13 11:32:49 +08:00
    1k8 实习生仰望大佬,啥时候有大佬这般水平就好了😭
    justin2018
        4
    justin2018  
       2021-06-13 12:26:53 +08:00
    感觉真不错

    我准备当我的博客系统了

    楼主有计划支持 i18n 嘛 😁
    Frytea
        5
    Frytea  
       2021-06-13 16:23:24 +08:00 via Android
    我现在选择 wiki 系统的原则就是,颜值了
    fantasticit163
        6
    fantasticit163  
    OP
       2021-06-14 19:04:09 +08:00
    @justin2018 目前已经支持 client 的 i18n 设置了。
    fantasticit163
        7
    fantasticit163  
    OP
       2021-06-14 19:04:20 +08:00
    @zhengfan2016 慢慢来
    fantasticit163
        8
    fantasticit163  
    OP
       2021-06-14 19:04:37 +08:00
    @wellsc 搞着玩,毕竟不是专业的产品
    fantasticit163
        9
    fantasticit163  
    OP
       2021-06-14 19:04:52 +08:00
    @Frytea 急需一个设计师,哈哈哈哈哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5799 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:14 · PVG 14:14 · LAX 23:14 · JFK 02:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.