在线体验#

如果你觉得项目不错，还望动动你的手指给点点 star，让更多人看到优秀的项目！！！

为了便于大家在线体验，本系统提供了演示地址，可以通过下面的演示地址和账号进行登录体验系统功能。
演示地址: v2.picture.itchenliang.club/#/
演示账号:

账号: guest@163.com
密码: 000000Copy

代码仓库地址:
如果你觉得项目不错，还望动动你的手指给点点 star，让更多人看到优秀的项目！！！

• Github: github.com/ischenliang/quickly-pic...
• Gitee: gitee.com/itchenliang/quickly-pict...

安装部署教程#

本系统提供了多种安装部署的方式，可以根据需要选择一种方式安装。

方式一: docker-compose 方式#

为了便于部署，这里提供了 docker-compose 一键部署前端和服务端的方式。

1. 初始化数据库：考虑到大多数人已经安装了数据库，这里就没有将数据库的安装和配置集成到 docker 安装部署中
   系统提供默认初始化数据库 sql 文件 (server/sql/init.sql)，然后在 navicat 或者其他工具中执行该 sql 文件，同时该 sql 文件中默认提供了一个管理员账号，方便用户初次使用时登录。

   管理员账号: admin@163.com
   管理员密码: 000000Copy

2. 数据库连接配置：修改 server/.env 文件中的数据库配置

   # mysql用户名，默认是root
   DB_USERNAME=root
   # mysql密码
   DB_PASSWORD=xxxx
   # 数据库ip，不要使用localhost和127.0.0.1
   DB_HOST=xxx.xxx.xxx.xxx
   # 数据库端口，默认3306
   DB_PORT=3306
   # 数据库
   DB_DATABASE=picture-bed
   Copy

程序占用端口#

APP_PORT=4000

npm 镜像源仓库，末尾不要加斜杆 /，常见的是 npm 官方镜像源，淘宝镜像源#

unpkg: plugin@1.0.2/dist/index.umd.js"">https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js#

淘宝: registry.npmmirror.com/@itchenlian...#

NPM_REGISTRY=registry.npmmirror.com

3. 执行构建部署命令: 在命令行终端执行docker-compose的一键部署命令
在操作该步骤前需要将项目拷贝到服务器上，然后打开命令行终端，进入到项目根目录下
```bash
docker compose up -dCopy

部署完成后会出现如下图所示结果:

4. 访问系统
   然后就可以通过 http://youip:port 直接访问到系统了。
   注意：

• 本地存储桶里的图片位于 server 部署目录下的 public 目录下，若需要重新部署时还请提前将其文件拷贝备份。
• 并且这里的后端接口是采用的 nginx 的代理方式来配置，同时也使用了自定义网络的方式来实现直接通过容器名访问到部署的 server 应用。

方式二: docker 打包部署方式#

当然我们也可以在本地构建 docker 镜像来部署。
注意：请务必确保严格按照下列的步骤执行，否则会出现问题，其原因在于 client 和 server 应用都依赖了 pic-net 自定义网络，并且 client 应用中的 nginx.conf 配置文件中也配置了接口代理，其代理方式是采用容器名来访问。

1. 创建自定义网络: 为了能够便于快捷访问到接口地址，需要使用自定义网络的方式来访问 server 应用

   docker network create pic-netCopy

2. 部署 server: 构建 server 镜像并创建 picServerV2 容器

   # 进入到server目录
   cd server
   # 构建镜像
   docker build -t pic-server .
   # 启动并创建容器
   docker run -d --name picServerV2 -p 4000:4000 --network pic-net pic-serverCopy

   部署成功后访问: http://yourip:4000 访问结果如下
   
3. 部署 client: 构建 client 镜像并创建 picClientV2 容器
   • 1、确保 client/public/global.config.js 中的 window.uploader_ip = ‘’为空
   • 2、打包 client 单页面应用

     cd client
     npm install
     npm run buildCopy

   • 3、执行构建并不输出

     # 进入到client目录
     cd client
     # 构建镜像
     docker build -t pic-client .
     # 启动并创建容器
     docker run -d --name picClientV2 -p 80:80 --network pic-net pic-clientCopy

     部署成功后可以通过 http://yourip:80 访问，如果出现如下输出结果表示 client 部署成功
     

     方式三: docker 拉取远程镜像部署#

     为了便于部署，本系统将构建的 itchenliang/pic-server-v2 和 itchenliang/pic-client-v2 镜像推送到了 DockerHub，可以直接拉取远程镜像来部署。
4. 创建自定义网络: 为了能够便于快捷访问到接口地址，需要使用自定义网络的方式来访问 server 应用

   docker network create pic-netCopy

5. 部署 server:
   • 1、在服务器上新建.env 文件来配置数据库

     # mysql用户名，默认是root
     DB_USERNAME=xxx
     # mysql密码
     DB_PASSWORD=xxx
     # 数据库ip，不要使用localhost和127.0.0.1
     DB_HOST=xxx.xxx.xxx.xxx
     # 数据库端口，默认3306
     DB_PORT=3306
     # 数据库
     DB_DATABASE=xxx
     Copy

程序占用端口#

APP_PORT=4000

npm 镜像源仓库，末尾不要加斜杆 /，常见的是 npm 官方镜像源，淘宝镜像源#

unpkg: plugin@1.0.2/dist/index.umd.js"">https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js#

淘宝: registry.npmmirror.com/@itchenlian...#

NPM_REGISTRY=registry.npmmirror.com

  - 2、执行构建命令
```bash
docker run -d --name picServerV2 -p 4000:4000 --env-file .env --network pic-net itchenliang/pic-server-v2Copy

确保上面命令中创建的容器名称为 picServerV2，因为 client 会通过该名称来访问后台接口。

3. 部署 client： 执行如下构建命令

   docker run -d --name picClientV2 -p 80:80 --network pic-net itchenliang/pic-client-v2Copy

方式四：从零开始安装#

该方式主要针对于需要进行二次开发或者在本地简单测试功能的用户，以及一些没有使用 docker 的用户。

1. 安装 node：前往 node 官网下载 node.exe 并安装或者使用 nrm 进行安装，并且确保安装的 node 版本为: 18.16.0
2. 安装 git：前往 Git 官网下载 git 并安装，此步可忽略。
3. 克隆代码：使用 git clone 命令将代码克隆到本地，或者直接下载压缩包到本地并解压。
4. 执行 sql 文件：系统提供默认初始化数据库 sql 文件，进入到 server/sql 目录下找到 init.sql，在 navicat 或者其他工具中执行该 sql 文件。该 sql 文件中默认提供了一个管理员账号，方便用户初次使用时登录。

   管理员账号: admin@163.com
   管理员密码: 000000Copy

5. 修改数据库连接：修改 server/.env 文件，将数据库连接服务修改成自己的数据库 ip、用户名、密码等。
   如果是本地调试则只需要修改.env.dev 文件。

   # mysql用户名，默认是root
   DB_USERNAME=xxx
   # mysql密码
   DB_PASSWORD=xxx
   # 数据库ip，不要使用localhost和127.0.0.1
   DB_HOST=xxx.xxx.xxx.xxx
   # 数据库端口，默认3306
   DB_PORT=3306
   # 数据库
   DB_DATABASE=xxx
   Copy

程序占用端口#

APP_PORT=4000

npm 镜像源仓库，末尾不要加斜杆 /，常见的是 npm 官方镜像源，淘宝镜像源#

unpkg: plugin@1.0.2/dist/index.umd.js"">https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js#

淘宝: registry.npmmirror.com/@itchenlian...#

NPM_REGISTRY=registry.npmmirror.com

6. **依赖安装**：安装server和client依赖
```bash
# 前端依赖安装
cd client
npm install

# 服务端依赖安装
cd server
npm installCopy

7. 项目启动：分别启动 client 和 server 端

• 服务端启动

  # 服务端启动
  cd server
  npm run devCopy

  启动成功后会出现如下图所示结果:
  

• 前端启动：在运行前端代码前还需要做一步操作，打开 client/public/global.config.js 文件，修改 window.uploader_ip，将下面的 http://locahost:3002 改成你本地启动的 server 的 ip 和端口 (如果是部署上线时需进行此步，本地调试可跳过)。

  window.uploader_ip = 'http://localhost:3002'Copy

  # 前端项目启动
  cd client
  npm run devCopy

  启动成功后会出现如下图所示结果:
  

8. 打包部署：打包部署

• 服务端打包部署：我们服务端采用的是 nestjs + typescript 开发的，需要打包成 js 文件

  # 服务端构建
  cd server
  npm run build
  # 将server/dist目录下的所有文件拷贝服务器上，然后执行启动命令
  node main.jsCopy

• 前端打包部署：我们前端采用的是 vite + vue3 + typescript 开发单页面应用，需要打包，并将打包后的 dist 结果目录下的所有文件拷贝到 web 服务器上。

  # 前端构建
  cd client
  npm run buildCopy

方式五：宝塔面板部署#

待完善….

本作品采用《CC 协议》，转载必须注明作者和本文链接