前端Docker部署方案

news/2024/5/10 11:56:57/文章来源:https://blog.csdn.net/weixin_44834981/article/details/129141890

一、Docker容器和镜像概念

首先明确镜像和容器的概念。我们可以用 docker 构建一个镜像,这个镜像可以导入导出,用于传输,重复利用。然后如果把他 run 起来,则称为一个容器。容器是运行时,会包括运行时上下文;镜像是静态的,不包括运行上下文。
在这里插入图片描述
Docker容器: 容器 = 镜像 + 可读层。
详细的介绍,请参考:Docker容器与镜像

二、Docker的常用操作命令

镜像操作:
在这里插入图片描述
容器操作:
在这里插入图片描述
更多命令请参考:Docker Docs

三、实际使用

1>Docker的基本操作

//  制作前端容器
//  Dockerfile 指定 Dockerfile 的名称,也可以是别的名称
//  image-name 指定镜像名,image-tag 指定镜像 tag
//  . 表示上下文为当前目录为上下文制作容器
docker build -f <Dockerfile> -t <image-name>:<image-tag> .//  查看镜像
//  docker images 会输出所有存在的镜像
docker images//  run前端容器
//  -d 表示以后台模式运行
//  --name 指定容器的名称,停止或查看日志时可用的 alias
//  --restart always 表示,只要是容器挂了,或者 docker.io 重启了,容器就会自动 run
//  -p 8000:80 表示端口映射,8000访问主机端口,80表示容器内部端口 
//  此时访问本机的 8000端口即可访问容器内80端口web应用提供的界面。
//  也可以不使用 -p 命令,改为使用 --network host,表示直接使用宿主机网络
docker run -d --name <frontend> --restart always -p 8000:80 <image-name>:<image-tag>// 查看所有容器
//  -a 表示停止的容器也展示,如果不加 -a 则只会显示正在运行的容器
docker ps -a//  stop前端容器
docker stop frontend// restart前端容器
//  当 nginx 的配置文件被修改时,需要 restart 容器使其生效
//  原理相当于 docker exec -it frontend; nginx -s reload
docker restart frontend//  以交互方式进入容器
//  --it 表示交互式
//  进入文件后可查看容器内部文件情况
docker exec -it frontend bash//  拷贝容器内部文件
//  表示把当前目录的 default.conf 拷贝到容器内部的 /etc/nginx/conf.d/default.conf 路径,相当于用当前目录的文件替换掉容器内部的文件
//  也可以反过来写
//  docker cp frontend:/etc/nginx/conf.d/default.conf default.conf
//  表示把容器内部 /ect/nginx/conf.d/default.conf 文件拷贝到当前路径 default.conf,相当于用容器内部文件替换当前目录的文件
docker cp default.conf frontend:/etc/nginx/conf.d/default.conf

2> DockerFile文件

要制作一个镜像,首先要有一个 Dockerfile,才能执行 build 操作。

  1. 以 nginx 为基础镜像构建的例子
// 以 nginx:1.19.3 作为基础镜像构建镜像
FROM nginx:1.19.3// 拷贝 npm run build 之后的产物文件到对应的 nginx 目录
COPY dist/ /usr/share/nginx/html// 拷贝配置文件到对应的 nginx 目录
COPY ./nginx/dev/default.conf /etc/nginx/conf.d/default.conf// 拷贝配置文件
COPY ./nginx/dev/nginx.conf /etc/nginx/nginx.conf// 指定暴露容器端口 80
EXPOSE 80

3> 制作镜像

// 准备文件
// 打包好的dist文件,dockerfile,nginx配置文件
// 镜像制作
docker build -f <Dockerfile> -t <project-name>:<project-versions> . 
//示例:
// 苹果 M1 芯片需要指定 platform 参数:
docker build --platform linux/amd64 -f Dockerfile-private -t fe-image-yh-local:v3.2.001.20220602 .
// x86 机器不用:
docker build -f Dockerfile-private -t fe-image-yh-local:v3.2.001.20220602 .
// 查看镜像是否创建成功
docker images

4> 运行容器

// 为了防止线上项目挂了 建议加上 --restart always
docker run -d --name < project name>  -p 8000:80 <image-name>:<image-tag>
docker ps -a
// 启动容器
docker start <docker id>

四、真实项目使用

需求: 在新的服务器上构建新镜像(前端)
新的服务器: 192.168.5.23 账号admin/密码123456

1. 解决方案A

1)先登录192.168.5.25 服务器: ssh @root 192.168.5.25, 输入密码,进入服务器
2、本地机器项目打包:

sh build_report.sh  // 报告特殊处理下,一般的项目不需要这个步骤
npm run build:dev  // 项目打包,根据自己项目打包的命令来

3、 搭配使用了FileZilla软件,下载地址:FileZilla客户端
FZ软件:打包生成的dist文件拖进去,和dockerFile文件。
放在指定路径下,我放在了桌面上。
在这里插入图片描述

FileZilla软件页面:
在这里插入图片描述

4、进行打包:
终端,cd到/root/桌面/firmware-xxx 路径下,进行构造镜像和保存操作

// 构建镜像  docker build -t <镜像名> .docker build -t fe-frontend-ys:v2.7.0.20230228.arm . 
// 保存  docker save -o <打包名><镜像名>
docker save -o fe-frontend-ys-v2.7.0.20230228.arm.tar fe-frontend-ys:v2.7.0.20230228.arm

5、部署代码:

docker load -i fe-frontend-ys-v2.7.0.20230228.arm.tar
docker run -d --network host --restart always --name fe-frontend-ys-v2.7.0.20230228.arm  fe-frontend-ys:v2.7.0.20230228.arm

2. 解决方案B

直接将整个项目代码拖到服务器上;
1、打开FZ软件,把整个项目拖进去(删除node-modules), 拖进去后,终端cd到路径:/root/桌面/firmware-xxx, 进行npm i 安装node-modules

2、打包

sh build_report.sh  // 报告特殊处理下,一般的项目不需要这个步骤
npm run build:dev  // 项目打包,根据自己项目打包的命令来
// 构建镜像  docker build -t <镜像名> .docker build -t fe-frontend-ys:v2.7.0.20230228.arm .
// 保存  docker save -o <打包名><镜像名>
docker save -o fe-frontend-ys-v2.7.0.20230228.arm.tar fe-frontend-ys:v2.7.0.20230228.arm

3、 部署

// 运行容器
// docker run -d --name <frontend> --restart always -p 8000:80 <image-name>:<image-tag>
// run前端容器
// -d 表示以后台模式运行
// --name 指定容器的名称,停止或查看日志时可用的 alias
// --restart always 表示,只要是容器挂了,或者 docker.io 重启了,容器就会自动 run
// -p 8000:80 表示端口映射,8000访问主机端口,80表示容器内部端口 
docker run -d --net=yishi0 --restart always --name fe-frontend-ys-v2.7.0.20230228.arm -p 8012:80 fe-frontend-ys:v2.7.0.20230228.arm

在这里插入图片描述

本文主要是偏应用,结合自己项目中真实使用情况,来加以说明;
仅供参考。

学习文章:
Docker 命令行入门大全:这 18 条,你不得不知
Dcoker安装

Docker Docs使用
nginx

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

管理系统权限分析以及白屏处理

菜单权限的业务分析 超级管理员&#xff1a;首页、权限模块、商品模块 不同角色能看到的菜单是不一样的。 如何实现菜单的权限 登录时向服务器发请求&#xff0c;服务器会把用户相应的菜单的权限信息&#xff0c;返回给前端&#xff0c;可以根据服务器返回的数据&#xff0…

JDK8增加的特性

Java知识点总结&#xff1a;想看的可以从这里进入 目录13、JDK8增加的特性13.1、Lambda表达式13.2、方法的引用13.3、时间处理类13.4、接口增加方法13.5、注解新增13.6、Optional类13.7、Stream13、JDK8增加的特性 13.1、Lambda表达式 Lambda表达式和方法的引用 13.2、方法的…

日日顺于贞超:供应链数字化要做到有数、有路、有人

在供应链行业里面&#xff0c;关于“数字化”的讨论绝对是一个经久不衰的话题。 但关于这个话题的讨论又时常让人觉得“隔靴搔痒”&#xff0c;因为数字化变革为非一日之功&#xff0c;对于企业来说意味着投入和牺牲。企业既怕不做怕将来被淘汰&#xff0c;又怕投入过高、不达预…

vue3中使用jszip压缩文件

1、安装依赖 npm install jszip npm install file-saver --save 2、使用 <template><el-card class"mb15"><template #header><span>jszip</span></template><!-- 二维码容器 --><div id"qrCodeBox">&…

网络工程课(二)

ensp配置vlan 一、配置计算机ip地址和子网掩码 二、配置交换机LSW1 system-view [Huawei]sysname SW1 [SW1]vlan batch 10 20 [SW1]interface Ethernet0/0/1 [SW1-Ethernet0/0/1]port link-type access 将接口设为access接口 [SW1-Ethernet0/0/1]port default vlan 10 [SW1-E…

ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST

1、逻辑流 在屏幕开发中&#xff0c;存在如下逻辑流&#xff1a; PBO&#xff08;Process Before Output&#xff09;&#xff1a;屏幕输出之前触发 PAI&#xff08;Process After Input&#xff09;&#xff1a;用户在屏幕中执行操作触发 POH&#xff08;Process On Help-…

计算机四级 [操作系统] | 选择题 2 重点标注版

1.某一个单道批处理系统几乎同时依次到达4个作业&#xff0c;这4个作业的预计运行时间分别为8、4、4和4分钟&#xff0c;按照短作业优先的调度算法运行&#xff0c;请问该批作业的平均周转时间为多少 B A. 14分钟 B. 11分钟 C. 20分钟 D. 10分钟 2.下列与进程具有一一对应的关…

【Git】为什么需要版本控制?版本控制工具有那些?

目录 一、为什么需要版本控制&#xff1f; 二、版本控制工具有那些&#xff1f; &#x1f49f; 创作不易&#xff0c;不妨点赞&#x1f49a;评论❤️收藏&#x1f499;一下 一、为什么需要版本控制&#xff1f; 首先我们要知道什么是版本控制&#xff1f;对版本控制进行文字…

重压之下,特斯拉并不心甘情愿地召回FSD

/ 导读 /近日&#xff0c;美国国家公路交通安全管理局&#xff08;NHTSA&#xff09;宣布&#xff0c;其将召回近37万辆已安装或待安装全自动驾驶测试版&#xff08;FSD Beta&#xff09;的汽车。其实早在今年1月份的时候&#xff0c;NHTSA就要求特斯拉提交召回申请。而特斯拉在…

2023从0开始学性能(1) —— 性能测试基础【持续更新】

背景 不知道各位大佬有没遇到上面的情况&#xff0c;性能这个东西到底是什么&#xff0c;还是以前的358原则吗&#xff1f;明显并不是适用于现在了。多次想踏入性能测试门槛都以失败告终&#xff0c;这次就以系列的方式来督促自己真正踏进性能测试的门槛。 什么是性能测试 通…

作业:1.实验串口收发一个字符2.实验串口收发一个字符串

main.c代码如下#include "uart4.h" extern void printf(const char *fmt, ...); void delay_ms(int ms) {int i,j;for(i 0; i < ms;i)for (j 0; j < 1800; j); } int main() {//串口初始化uart_init();//实现串口数据收发while(1){//put_char(get_char()1);p…

前端必须知道的http知识

HTTP协议也叫超文本传输协议&#xff0c;是一种基于TCP/IP的应用层通信协议&#xff0c;这个协议详细规定了浏览器和万维网服务器之间互相通信的规则&#xff08;报文&#xff0c;请求报文、响应报文&#xff09; 请求方式 HTTP设定了八种发送请求方式&#xff0c;这八种方法没…

APP测试中ios和androis的区别,有哪些注意点

目录 一、运行机制不同 二、对app内存消耗处理方式不同 三、后台制度不同 四、最高权限指令不同 五、推送机制不同 六、抓取方式不同 七、灰度发版机制不同 八、审核机制不同 总结感谢每一个认真阅读我文章的人&#xff01;&#xff01;&#xff01; 重点&#xff1a;…

独立搭建 handle server

本节主要介绍,如何搭建一个与 GHR隔离的 handle sever,不与外界有任何连通。 下载文件 访问地址下载最新版:http://www.handle.net/download_hnr.html 这里以 9.3.0 版本作为讲解 解压服务端,解压客户端 # 解压 tar -xzvf handle-9.3.0-distribution.tar.gz# 到目录下 …

剑指 Offer 27. 二叉树的镜像

剑指 Offer 27. 二叉树的镜像 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 例如输入&#xff1a; 镜像输出&#xff1a; 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,…

性能测试的二八原则

性能测试二八原则&#xff0c;响应时间2/5/8原则 所谓响应时间的“2-5-8原则”&#xff0c;简单说&#xff0c;就是 当用户能够在2秒以内得到响应时&#xff0c;会感觉系统的响应很快; 当用户在2-5秒之间得到响应时&#xff0c;会感觉系统的响应速度还可以; 当用户在5-8秒以内得…

智能小车PWM调速原理

电机驱动电路智能小车电机的驱动芯片采用L293D。L293D是一款单片集成的高电压、高电流、4通道电机驱动&#xff0c;设计用于连接标准DTL或TTL逻辑电平&#xff0c;驱动电感负载&#xff08;诸如继电线圈、DC和步进电机&#xff09;和开关功率晶体管等等。L293D有4个通道&#x…

SpringBoot2核心技术-核心功能【05、Web开发】

目录 1、SpringMVC自动配置概览 2、简单功能分析 2.1、静态资源访问 1、静态资源目录 2、静态资源访问前缀 2.2、欢迎页支持 2.3、自定义 Favicon 2.4、静态资源配置原理 3、请求参数处理 0、请求映射 1、rest使用与原理 2、请求映射原理 1、普通参数与基本注解 …

Vulnhub靶场----1、DC-1

文章目录一、环境搭建二、渗透流程三、思路总结一、环境搭建 靶场下载地址&#xff1a;https://download.vulnhub.com/dc/DC-1.zip Kali地址&#xff1a;192.168.144.148 DC-1靶机地址&#xff1a;192.168.144.149 二、渗透流程 端口扫描&#xff1a;nmap -A -T4 192.168.144.1…

基于 U-Net 网络的遥感图像语义分割 完整代码+论文

一、研究目的U-Net 是一种由全卷积神经网络启发的对称结构网络&#xff0c;在医疗影像分割领域取得了很好的效果。 此次研究尝试使用 U-Net 网络在对多光谱遥感影像数据集上进行训练&#xff0c;尝试使用卷积神经网络自动分割出建筑&#xff0c;希望能够得到一种自动分割遥感影…