将web如vue等项目部署到宝塔docker镜像中,以便能在任意浏览器访问

news2024/11/19 8:39:44

文章目录

    • 一、准备工作
    • 二、具体步骤
        • 1、从已经推送的镜像中拉取镜像
        • 2、切换到宝塔-容器,添加容器
        • 3、启动容器
        • 4、将刚刚的端口号添加到防火墙白名单
        • 5、访问部署好的项目
    • 参考资料

一、准备工作

仅需确认宝塔面板已经有docker镜像容器

目前新版宝塔面板都已经内置了docker功能模块,如下图:

image-20240116171510221

二、具体步骤

1、从已经推送的镜像中拉取镜像

如果你用的是docker desktop等工具制作的镜像,并且也已经推送到了https://hub.docker.com/中,即可以在该网站搜索看到对应的镜像,就可以在宝塔docker-镜像-从仓库拉取-官方库-输入镜像名拉取到到宝塔镜像列表中。如下图。

docker官网:

image-20240116173404523

宝塔面板拉取镜像:

image-20240116173458316

2、切换到宝塔-容器,添加容器

镜像是放在容器中运行的,所以我们还需要添加一个容器。

添加容器的界面中输入容器名字(任意输入都可以),镜像选择刚刚导入的要部署的镜像。

添加端口,容器端口写80(镜像端口),服务器端口即你宝塔面板的ip的端口,到时用这个来访问该容器,比如你的服务器ip为:172.10.12.19,那么到时访问该web项目的镜像url就为:172.10.12.19:7890

image-20240116175233198

启动命令如果没有特殊参数,可留空不填

3、启动容器

添加后,会自动启动容器,可以看到启动状态,你也可以手动启动,如果启动失败,可以查看右侧的日志。

image-20240116180109066

4、将刚刚的端口号添加到防火墙白名单

有两个地方都需要添加,宝塔防火墙和对应的云服务防火墙,比如我的服务器是腾讯云的,就需要到腾讯云去添加。

image-20240116180303697

image-20240116180326162

5、访问部署好的项目

接下来就可以直接使用你的服务器IP+端口来访问部署好的镜像项目了。

比如上文我们添加好的url为:172.10.12.19:7890 (虚拟)

最终效果如下:

image-20240116180508008

参考资料

如果你还不知道如何从0开始制作镜像和发布镜像,请参考下面这篇文章:

WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)链接见下方:

https://blog.csdn.net/imqdcn/article/details/128723543https://blog.csdn.net/imqdcn/article/details/128723543

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

加我微信可提供web前端开发,网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1389806.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构之list类

前言 list是列表类。从list 类开始,我们就要接触独属于 Python 的数据类型了。Python 简单、易用,很大一部分原因就是它对基础数据类型的设计各具特色又相辅相成。 话不多说,让我们开始学习第一个 Python 数据类型一list。 1. list的赋值 输…

做完十年数据分析后的思考与总结

种一棵树最好的时间是十年前,其次是现在。十年了,本次分享大多来自工作中的日常所思所想,欢迎自取。 01 数据分析的本质 数据是基础,分析才是重点。 行业内有专门的统计岗,就是只负责做好数据统计就可以了&#xff0…

使用pycocotools打印更多数据(注意,修改后最好再还原!最好是一次性使用)

文章目录 1 写在前面2 代码效果3 代码修改 1 写在前面 夹带私货,可能有用呢:YOLOv7-tiny,通过pycocotools包得到预测大中小尺寸目标的指标值 仅供参考!写这个代码的目的是能够打印出iou0.50的AP、AR的小中大3个尺寸的值&#xff…

记录汇川:H5U与Factory IO测试14

现实53工位的物料运输。 设置了自动连续存启动:就是一个一个运,按照顺序将空的货架填满。 设置了自动连续存停止:就是完成当前循环后退出。 设置了自动连续取启动:就是一个一个运,按照顺序将有货的货架清空。 设置…

Linux系统:yum仓库

目录 一、yum 1、yum概述 2、yum仓库 3、yum实现过程原理 二、yum配置文件详解 1、主配置文件 2、yum仓库设置文件 3、yum日志文件 三、yum命令详解 1、查询 1.1 yum list [软件名] 1.2 yum info [软件名] 1.3 yum search <关键词> 1.4 yum provides <关…

从0到1:实验室设备借用小程序开发笔记

概论 实验室设备借用小程序&#xff0c;适合各大高校&#xff0c;科技园区&#xff0c;大型企业集团的实验室设备借用流程, 通过数字化的手段进一步提升相关单位设备保障水平&#xff0c;规范实验室和设备管理&#xff0c;用户通过手机小程序扫描设备的二维码&#xff0c;可以…

1 vue防抖和限流

简介 什么是防抖 防抖&#xff08;Debouncing&#xff09;是一种前端开发中常用的技术&#xff0c;用于限制函数的执行频率。在防抖的机制下&#xff0c;一个函数在一定时间内只会执行一次&#xff0c;即使它被频繁地调用。 具体来说&#xff0c;防抖的实现方式是设置一个定…

【数据库8.0备份还原】之Percona XtraBackup

目录 Percona XtraBackup备份数据库1、Percona XtraBackup的介绍2、Percona XtraBackup安装3、Percona XtraBackup8.0的使用1.全库备份和还原2.增量备份和还原3.差异备份和还原4.差异备份和增量备份的区别5.压缩备份和还原 Percona XtraBackup备份数据库 yum源安装&#xff1a…

【技术分享】远程透传网关-单网口快速实现西门子S7-300/400 PLC程序远程上下载

准备工作 一台可联网操作的电脑一台单网口的远程透传网关及博达远程透传配置工具网线一条&#xff0c;用于实现网络连接和连接PLC一台西门子S7- 300/400 PLC及其编程软件一张4G卡或WIFI天线实现通讯(使用4G联网则插入4G SIM卡&#xff0c;WIFI联网则将WIFI天线插入USB口&#…

H3C机架式服务器前/后视图

------H3C机架式服务器前视图------ ------------ ------H3C 机架式服务器后视图------ ------------

[WUSTCTF2020]alison_likes_jojo 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。 感谢 Iven Huang 师傅供题。 比赛平台&#xff1a;https://ctfgame.w-ais.cn/ 密文&#xff1a; 下载附件解压&#xff0c;得到两张jpg图片和一个文本文件。 解题思路&#x…

mysql简单操作集成数据模型使用方法

查看表信息&#xff0c;其中包括字段信息以及创表信息 DESCRIBE asset; show COLUMNS FROM asset; SHOW CREATE TABLE asset; 常规操作表 --查询 select * FROM device_template --插入 INSERT into asset_package (protocol,project_code,lease_id,station_name,device_id,…

【运维】安装双系统之后,如何删除主硬盘的Linux的引导,图文教程

前置条件&#xff1a;已经安装了windows10系统和Linux系统&#xff0c;而且windows10系统是C盘主要盘&#xff0c;Linux系统是安装在别的硬盘上&#xff0c;这个时候C盘主要盘里面的引导分区里是由Linux的引导的&#xff0c;所以打开电脑之后才能让你选是使用windows系统还是使…

扫雷游戏【可展开一片,超详细,保姆级别,此一篇足够】

一、C语言代码实现的扫雷游戏的运行 C语言实现扫雷 二、扫雷游戏的分析与设计 1.扫雷游戏的界面设计 在玩家玩扫雷的时候&#xff0c;它会给你一个二维的棋盘&#xff08;下面的讲解都以9x9规格为例子&#xff09;&#xff0c;然后点击你想排查的坐标&#xff0c;若不是雷的&…

【23种设计模式应用场景汇总】

23种设计模式应用场景汇总 设计模式是一种在软件开发中解决特定问题的通用解决方案。下面我将尝试将23种设计模式融入到一个场景中&#xff1a; 假设我们正在开发一个在线购物系统&#xff0c;我们可以使用以下设计模式&#xff1a; 1. 工厂方法模式&#xff1a;当用户在网站上…

红米手机录屏功能在哪?这里有你想要的答案

“有人知道红米手机录屏功能在哪吗&#xff1f;刚买了最新款的红米K70&#xff0c;本来打算用来录制游戏&#xff0c;可是找了半天&#xff0c;就是没看见录屏功能&#xff0c;真的很着急&#xff0c;有没有大佬教教我。” 在手机成为人们生活不可或缺的一部分的今天&#xff…

市场下行,中国半导体进口数量、金额双双两位数锐减 | 百能云芯

根据中国海关总署最新统计&#xff0c;2023年中国累计进口集成电路&#xff08;半导体晶圆&#xff09;数量为4795亿颗&#xff0c;较2022年下降10.8%&#xff1b;而进口金额为3494亿美元&#xff0c;下降15.4%。这一数据显示&#xff0c;中国半导体进口在数量和金额两方面均出…

基于域账户及西门子simatic logon的集中权限管理的实现

原创 Luis Wang 智能大大号引文&#xff1a;博途工控人平时在哪里技术交流博途工控人社群 西门子在工业自动化领域可谓傲视群雄&#xff0c;在制药工厂&#xff0c;有超过50%以上的自动化系统、设备都配备了西门子的PLC、DCS、HMI及SCADA(wincc)平台&#xff1b;包括配液及CIP…

Arya碎碎念 | 2023年编程之旅,2024年代码人生展望

前言 回顾过去这一年&#xff0c; 2023年编程之旅&#xff0c;2024年代码人生展望 目录 前言回望2023写博客的缘起写博客的成就参加的创作活动产出的优质博客文章 展望2024代码开发方面博客规划方面 另外另外我有了一直喵 总结 回望2023 写博客的缘起 3年前&#xff0c;注册…

JMeter 源码解读HashTree

背景&#xff1a; 在 JMeter 中&#xff0c;HashTree 是一种用于组织和管理测试计划元素的数据结构。它是一个基于 LinkedHashMap 的特殊实现&#xff0c;提供了一种层次结构的方式来存储和表示测试计划的各个组件。 HashTree 的特点如下&#xff1a; 层次结构&#xff1a;Ha…