wipi Download - wipi Source code download

wipi

AI Source Code

1.0.0

Download

Wipi

Introduction

Wipi is an open source CMS system for individuals that integrates functions such as article publishing, page creation, knowledge booklets, etc. The technologies involved are as follows:

MySQL : Data storage
next.js : Front-end page framework
nest.js : server-side framework
AliyunOSS : Object Storage

Link

Github source code
Front Desk Page
Management system: Support visitor registration

Functional Points

Article Management
Page Management
Knowledge Booklet
Comment Management
Email Management
Visit statistics
File Management
System Settings

For more functions, please visit the system for experience.

Preview

Project operation

database

First, install MySQL , it is recommended to use docker for installation.

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

Then create the database in MySQL .

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

Run locally

First, the clone project.

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

Then, install the project dependencies.

 # 全局安装 pnpm
npm i -g pnpm

pnpm install

Start the project

pnpm run dev

Front desk page address: http://localhost:3001 . Background management address: http://localhost:3002 . Service interface address: http://localhost:3003 .

The first time it starts, the administrator user is created by default: admin and password: admin (can be modified in the .env file). [PS] If the server configuration fails to start, please first confirm whether the MySQL configuration is correct. The configuration file is in .env .

System Settings

When the project is first started, system settings need to be performed in the background. As the content becomes richer, the content of the page will also become richer.

Configuration File

The .env file is loaded by default, and the production environment will try to load the .env.prod file.

 # 客户端运行端口
CLIENT_PORT=3001
# 客户端站点地址（假设部署到 https://xx.com, 就将 CLIENT_SITE_URL 设置为 https://xx.com）
CLIENT_SITE_URL=http://localhost:3001
# 客户端资源地址（假设部署到 https://xx.com，就将 CLIENT_ASSET_PREFIX 设置为 https://xx.com，如果将资源上传到 cdn ，那就改为 cdn 地址）
CLIENT_ASSET_PREFIX=/

# 管理后台运行端口
ADMIN_PORT=3002
# 管理后台资源地址（假设部署到 https://xx.com，就将 CLIENT_ASSET_PREFIX 设置为 https://xx.com，如果将资源上传到 cdn ，那就改为 cdn 地址）
ADMIN_ASSET_PREFIX=/

# 服务端运行端口
SERVER_PORT=3003
# 服务端完整访问路径
SERVER_API_URL=http://localhost:3003/api
# 服务端接口前缀（假设将希望通过 http://xx:com/api 来访问，那就设置为 /api；如果 http://xx:com，那就设置为 / ）
SERVER_API_PREFIX=/api
# 默认管理员账户名
ADMIN_USER=admin
# 默认管理员账密码
ADMIN_PASSWD=admin
# 以下为数据库配置，请先创建好表
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWD=root
DB_DATABASE=wipi

# Github 第三方登录配置
# 关于 Github OAuth 可参考 https://www.ruanyifeng.com/blog/2019/04/github-oauth.html
GITHUB_CLIENT_ID=0 # Github OAuth 登录 Id
GITHUB_CLIENT_SECRET=0 # Github OAuth 登录 Secret

Project deployment

The scripts for the production environment are as follows:

node -v
npm -v

npm config set registry http://registry.npmjs.org

npm i -g pm2 @nestjs/cli pnpm

pnpm install
pnpm run build
pnpm run pm2

pm2 startup
pm2 save

nginx configuration

Use reverse proxy to configure nginx , and set proxy_set_header X-Real-IP $remote_addr; so that the server can obtain the real IP address .

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