乐趣区

关于vue.js:轻快图片管理系统-安装部署教程

jiezi

在线体验

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

为了便于大家在线体验，本零碎提供了演示地址，能够通过上面的演示地址和账号进行登录体验零碎性能。
演示地址 : http://v2.picture.itchenliang.club/#/
演示账号:

账号: guest@163.com
明码: 000000

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

  • Github: https://github.com/ischenliang/quickly-picture-bed
  • Gitee: https://gitee.com/itchenliang/quickly-picture-bed

装置部署教程

本零碎提供了多种装置部署的形式，能够依据须要抉择一种形式装置。

形式一: docker-compose 形式

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

  1. 初始化数据库: 思考到大多数人曾经装置了数据库，这里就没有将数据库的装置和配置集成到 docker 装置部署中
    零碎提供默认初始化数据库 sql 文件(server/sql/init.sql)，而后在 navicat 或者其余工具中执行该 sql 文件，同时该 sql 文件中默认提供了一个管理员账号，不便用户首次应用时登录。

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

  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

# 程序占用端口
APP_PORT=4000

# npm 镜像源仓库，开端不要加斜杆 /，常见的是 npm 官网镜像源，淘宝镜像源
# unpkg: https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js
# 淘宝: https://registry.npmmirror.com/@itchenliang/picture-rollup-oss-plugin/1.0.12/files/dist/index.js
NPM_REGISTRY=https://registry.npmmirror.com

  3. 执行构建部署命令: 在命令行终端执行 docker-compose 的一键部署命令
    在操作该步骤前须要将我的项目拷贝到服务器上，而后关上命令行终端，进入到我的项目根目录下

    docker compose up -d

    部署实现后会呈现如下图所示后果:

  4. 拜访零碎
    而后就能够通过 http://youip:port 间接拜访到零碎了。
    留神：
  5. 本地存储桶里的图片位于 server 部署目录下的 public 目录下，若须要重新部署时还请提前将其文件拷贝备份。
  6. 并且这里的后端接口是采纳的 nginx 的代理形式来配置，同时也应用了自定义网络的形式来实现间接通过容器名拜访到部署的 server 利用。

形式二: docker 打包部署形式

当然咱们也能够在本地构建 docker 镜像来部署。
留神: 请务必确保严格依照下列的步骤执行，否则会呈现问题，其起因在于 client 和server利用都依赖了 pic-net 自定义网络，并且 client 利用中的 nginx.conf 配置文件中也配置了接口代理，其代理形式是采纳容器名来拜访。

  1. 创立自定义网络: 为了可能便于快捷拜访到接口地址，须要应用自定义网络的形式来拜访 server 利用

    docker network create pic-net

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

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

    部署胜利后拜访: http://yourip:4000拜访后果如下

  3. 部署 client: 构建 client 镜像并创立 picClientV2 容器

    • 1、确保 client/public/global.config.js 中的 window.uploader_ip = ” 为空
    • 2、打包 client 单页面利用
    cd client
npm install
npm run build
    • 3、执行构建并不输入
    # 进入到 client 目录
cd client
# 构建镜像
docker build -t pic-client .
# 启动并创立容器
docker run -d --name picClientV2 -p 80:80 --network pic-net pic-client

    部署胜利后能够通过 http://yourip:80 拜访，如果呈现如下输入后果示意 client 部署胜利

    形式三: docker 拉取近程镜像部署

    为了便于部署，本零碎将构建的 itchenliang/pic-server-v2 和itchenliang/pic-client-v2镜像推送到了 DockerHub，能够间接拉取近程镜像来部署。

  4. 创立自定义网络: 为了可能便于快捷拜访到接口地址，须要应用自定义网络的形式来拜访 server 利用

    docker network create pic-net

  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

# 程序占用端口
APP_PORT=4000

# npm 镜像源仓库，开端不要加斜杆 /，常见的是 npm 官网镜像源，淘宝镜像源
# unpkg: https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js
# 淘宝: https://registry.npmmirror.com/@itchenliang/picture-rollup-oss-plugin/1.0.12/files/dist/index.js
NPM_REGISTRY=https://registry.npmmirror.com
    • 2、执行构建命令
    docker run -d --name picServerV2 -p 4000:4000 --env-file .env --network pic-net itchenliang/pic-server-v2

    确保下面命令中创立的容器名称为 picServerV2，因为client 会通过该名称来拜访后盾接口。

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

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

形式四: 从零开始装置

该形式次要针对于须要进行二次开发或者在本地简略测试性能的用户，以及一些没有应用 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
管理员明码: 000000

  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

# 程序占用端口
APP_PORT=4000

# npm 镜像源仓库，开端不要加斜杆 /，常见的是 npm 官网镜像源，淘宝镜像源
# unpkg: https://unpkg.com/@itchenliang/picture-rollup-mdnice-plugin@1.0.2/dist/index.umd.js
# 淘宝: https://registry.npmmirror.com/@itchenliang/picture-rollup-oss-plugin/1.0.12/files/dist/index.js
NPM_REGISTRY=https://registry.npmmirror.com

  6. 依赖装置：装置 server 和 client 依赖

    # 前端依赖装置
cd client
npm install

# 服务端依赖装置
cd server
npm install
  7. 我的项目启动：别离启动 client 和 server 端

  8. 服务端启动

    # 服务端启动
cd server
npm run dev

    启动胜利后会呈现如下图所示后果:

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

    window.uploader_ip = 'http://localhost:3002'
    # 前端我的项目启动
cd client
npm run dev

    启动胜利后会呈现如下图所示后果:

  • 打包部署：打包部署

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

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

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

    # 前端构建
cd client
npm run build

形式五: 宝塔面板部署

待欠缺 ….

退出移动版