Tabler后台模板搭建：Docker容器化部署全过程

Tabler后台模板搭建Docker容器化部署全过程一、tabler介绍1.1 tabler简介1.2 tabler特点1.3 tabler使用场景二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、构建tabler镜像4.1 拉取tabler源码4.2 查看源码内容4.3 修改Dcokerfile文件4.4 构建镜像五、部署tabler应用5.1 创建tabler容器5.2 检查tabler容器状态5.3 检查tabler容器日志六、访问tabler首页6.1 进入tabler首页6.2 访问Browsersync一、tabler介绍1.1 tabler简介tabler简介Tabler 是基于 Bootstrap 构建的免费开源 HTML 仪表板 UI 套件。1.2 tabler特点响应式由于支持移动设备、平板电脑和桌面显示器因此无论您使用什么设备。Tabler 在所有主要浏览器中都具有响应能力。跨浏览器我们的主题与最新的 Chrome、Firefox、Safari、Opera、Edge 和移动浏览器完美配合。我们努力为他们提供持续的支持。HTML5 和 CSS3我们仅使用现代网络技术例如 HTML5 和 CSS3。我们的主题包括一些微妙的 CSS3 动画这将帮助您吸引注意力。干净的代码我们仔细遵循 Bootstrap 的指南以使您的集成尽可能简单。所有代码均为手写且 W3C 有效。演示页面Tabler 拥有超过 20 个使用各种组件的独立页面您可以自由选择和组合。所有组件的颜色和样式都各不相同您可以使用 Sass - 轻松修改。一切皆有可能单页应用程序版本 Tabler React具有适用于 Tabler 的 React 组件。1.3 tabler使用场景Tabler 作为一款基于 Bootstrap 构建的免费开源 HTML 仪表板 UI 套件它的设计初衷是为了加速Web应用程序后台管理界面的开发过程尤其是对于需要复杂数据展示和操作的后台管理系统。以下是 Tabler 的一些典型使用场景后台管理系统CMS: 对于内容管理系统、电商后台、CRM系统等需要管理大量数据和功能的后台界面Tabler 提供了预设的UI组件和布局可以快速搭建起美观且功能完善的管理后台。数据分析与报表平台: 数据分析师或企业需要监控关键业务指标时Tabler 的表格、图表组件非常适合用来展示数据统计结果帮助用户直观理解数据趋势和模式。项目管理工具: 在开发项目管理、任务分配、团队协作工具时Tabler 的卡片、列表、模态框等组件能够帮助构建清晰的任务视图和交互流程。内部工具开发: 许多公司内部会开发一些定制化的工具如库存管理系统、员工信息管理系统等Tabler 可以帮助这些工具快速拥有专业且统一的UI风格。Admin Panels: 网站或应用的管理员控制面板需要管理用户、权限设置、查看日志等功能时Tabler 提供的仪表盘和表单元素可以直接应用提升开发效率。Saas产品后台: 对于提供软件即服务SaaS的产品来说一个易用且功能全面的后台管理界面是必不可少的Tabler 可以帮助快速搭建这样的界面包括但不限于账户管理、订阅计划管理、数据分析等功能模块。教育平台管理系统: 教育机构或在线课程平台的后台管理系统用于管理课程内容、学生信息、考试成绩等Tabler 的组件可以帮助高效组织这些信息。二、本地环境介绍2.1 本地环境规划本次实践为个人测试环境操作系统版本为centos7.6。hostnameIP地址操作系统版本Docker版本dokcer192.168.3.166centos 7.62 20.10.172.2 本次实践介绍1.本次实践部署环境为个人测试环境生产环境请谨慎2.Docker环境下部署tabler后台模版。三、本地环境检查3.1 检查Docker服务状态检查Docker服务是否正常运行确保Docker正常运行。[rootjeven tabler]# systemctl status docker● docker.service - Docker Application Container Engine Loaded: loaded(/usr/lib/systemd/system/docker.service;enabled;vendor preset: disabled)Active: active(running)since Sun2024-05-12 08:34:14 CST;1weeks2days ago Docs: https://docs.docker.com Main PID:11565(dockerd)Tasks:16Memory:2.4G CGroup: /system.slice/docker.service └─11565 /usr/bin/dockerd-Hfd://--containerd/run/containerd/containerd.sock3.2 检查Docker版本检查Docker版本[rootjeven ~]# docker -vDocker version20.10.17, build 100c7013.3 检查docker compose 版本检查Docker compose版本确保2.0以上版本。[rootjeven ~]# docker compose versionDocker Compose version v2.6.0四、构建tabler镜像4.1 拉取tabler源码执行以下命令拉取tabler源码。gitclone https://github.com/tabler/tabler.git4.2 查看源码内容进入源码目录查看源码内容。[rootjeven tabler]# cd ./tabler/[rootjeven tabler]# lsbuild _config.yml dist Gemfile LICENSE README.md vercel.json CHANGELOG.md CONTRIBUTORS.md Dockerfile Gemfile.lock package.json SECURITY.md _config_prod.yml demo docs gulpfile.js pnpm-lock.yaml src4.3 修改Dcokerfile文件在源码目录中需要修改Dcokerfile文件.设置npm镜像源否则构建镜像时会报错。[rootjeven tabler]# cat DockerfileFROM ruby:3.2-alpine WORKDIR /app ADD _config.yml /app/ ADD _config_prod.yml /app/ ADD Gemfile /app/ ADD Gemfile.lock /app/ ADD package.json /app/ ADD pnpm-lock.yaml /app/ ADD gulpfile.js /app/ RUN apkadd--virtualbuild-dependencies build-basenpmRUN apk upgrade RUNnpmconfigsetregistry https://registry.npmmirror.com RUNnpmi-gpnpmRUNpnpminstallRUN bundle config--globalsilence_root_warning1bundlerinstall--verbose# websiteEXPOSE3000# website management (browser auto reload)EXPOSE3001# run tablerENTRYPOINT[pnpm,run,start-plugins]4.4 构建镜像执行以下命令构建tabler镜像。dockerbuild-ttabler.五、部署tabler应用5.1 创建tabler容器执行以下命令使用docker-cli方式创建tabler容器。dockerrun-d--nametabler--restartalways-p3000:3000-p3001:3001-v$(pwd)/src:/app/src-v$(pwd)/_config.yml:/app/_config.yml tabler5.2 检查tabler容器状态检查tabler容器状态确保tabler容器容器正常启动。[rootjeven tabler]# docker psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 2b7df76fa05e tablerpnpm run start-plug…38seconds ago Up37seconds0.0.0.0:3000-3001-3000-3001/tcp, :::3000-3001-3000-3001/tcp tabler5.3 检查tabler容器日志检查tabler容器日志dockerlogs tabler六、访问tabler首页6.1 进入tabler首页访问地址http://192.168.3.166:3000将IP替换为自己服务器IP地址进入到tabler首页。如果无法访问则检查服务器防火墙是否设置云服务器的安全组端口是否放行等。6.2 访问BrowsersyncBrowsersync省时的浏览器同步测试工具。速度极快、开源免费。浏览器访问地址http://192.168.3.166:3001/将IP替换为自己服务器IP地址。