乐趣区

关于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

形式五: 宝塔面板部署

待欠缺….

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章