前端Docker部署方案

news2025/7/19 7:05:23

一、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.coloradmin.cn/o/361689.html

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

相关文章

Vue基础14之TodoList组件自定义事件、全局事件总线、TodoList全局事件总线

Vue基础14TodoList-组件自定义事件先改Header和Footer子组件&#xff0c;List先不考虑App.vueMyHeader.vueMyFooter.vue全局事件总线实现思路正规写法main.jsApp.vueStudent.vueSchool.vue总结&#xff1a;全局事件总线&#xff08;GlobalEventBus&#xff09;TodoList案例&…

【Java闭关修炼】MyBatis-接口代理的方式实现Dao层

【Java闭关修炼】MyBatis-接口代理的方式实现Dao层实现规则代码实现代理对象分析接口代理方式小结实现规则 映射配置文件中的名称空间必须和Dao层接口的全类名相同映射配置文件的增删改查标签的id属性必须和Dao层接口方法的参数相同映射配置文件中的增删改查标签的parameterTyp…

【C进阶】数据的存储

文章目录:star:1. 数据类型:star:2. 整形在内存中的存储2.1 存储规则2.2 存储模式2.3 验证大小端模式:star:3. 数据范围3.1 整形溢出3.2 数据范围的求解3.3 练习:star:4. 浮点型在内存中的存储4.1 浮点数的存储规则4.2 练习5. :star::star:总结(思维导图)⭐️1. 数据类型 在了…

独立产品灵感周刊 DecoHack #048 - 优秀独立开发产品推荐

如果有关注我的 Twitter 的朋友应该看到了&#xff0c;我上周末研究了两天 AI 画图&#xff0c;现在用 Ai 做图太强了&#xff0c;上周又升级 Stable Diffusion 玩了一下&#xff0c;和我去年试的时候相比强大了好多&#xff0c;而且插件LoRA模型玩法都还在快速迭代&#xff0c…

超详细解读!数据库表分区技术全攻略

更多内容可以关注微信公众号&#xff1a;老程序员刘飞 分区的定义 分区是一种数据库优化技术&#xff0c;它可以将大表按照一定的规则分成多个小表&#xff0c;从而提高查询和维护的效率。在分区的过程中&#xff0c;数据库会将数据按照分区规则分配到不同的分区中&#xff0…

【Linux】调试工具gdb的使用

环境&#xff1a;centos7.6&#xff0c;腾讯云服务器Linux文章都放在了专栏&#xff1a;【Linux】欢迎支持订阅&#x1f339;前言在前文&#xff0c;我们已经讲解了vim工具以及gcc/g的使用&#xff0c;我们可以进行编写代码以及编译代码了&#xff0c;但是还没有学习如何在Linu…

贪心--跳跃问题/拼接问题

跳跃问题 判断能否从数轴的最左端跳跃到最右边 变形&#xff1a;最少跳跃次数 45.跳跃游戏 题目链接 给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标。 示…

博客界的至高神:属于自己的WordPress网站,你值得拥有!

【如果暂时没时间安装&#xff0c;可以直接跳转到最后先看展示效果】 很多朋友都想有一个对外展示的窗口&#xff0c;在那里放一些个人的作品或者其他想对外分享的东西。大部分人选择了在微博、公众号等平台&#xff0c;毕竟这些平台流量大&#xff0c;我们可以很轻易地把自己…

Jectpack -- Navigation了解与简单使用

简介 Navigation是一个可简化的Android导航的库和插件&#xff0c;换句话说&#xff0c;Navigation是用来规范管理Fragment的切换的&#xff0c;并且是通过可视化的方式来进行管理的。 ![[Pasted image 20230210083913.png]] 正常的跳转方法(其实有kotlin以后&#xff0c;代…

【性能测试基础】,从0到实战(手把手教,非常实用)

一、性能基础什么是性能测试--->本质?基于协议来模拟用户发送的请求&#xff08;业务模拟&#xff09;&#xff0c;对服务器形成一定负载。关注点&#xff1a;时间性能、空间性能与界面无关性能测试分类性能测试&#xff08;狭义&#xff09;性能测试方法是通过模拟生产环境…

【C++】多线程

多任务处理有两种形式&#xff0c;即&#xff1a;多进程和多线程。 基于进程的多任务处理是程序的并发执行。基于线程的多任务处理是同一程序的片段的并发执行 文章目录1. 多线程介绍2. Windows多线程1. 多线程介绍 每一个进程&#xff08;可执行程序&#xff09;都有一个主线…

AcWing1027. 方格取数

AcWing1027. 方格取数设有 NN 的方格图&#xff0c;我们在其中的某些方格中填入正整数&#xff0c;而其它的方格中则放入数字0。如下图所示&#xff1a;某人从图中的左上角 A 出发&#xff0c;可以向下行走&#xff0c;也可以向右行走&#xff0c;直到到达右下角的 B 点。在走过…

SpringBoot+Vue前后端分离管理系统02:前端

前端环境搭建 1、node环境 C:\Windows\system32>node -v v12.13.0C:\Windows\system32>npm -v 6.12.0 2、下载vue-admin-template 官网&#xff1a;介绍 | vue-element-admin 项目初始化 1、安装依赖 在刚才下载的vue-admin-template-4.4.0目录下以管理员方式运行c…

Robot Framework + Selenium2Library环境下,结合Selenium Grid实施分布式自动化测试

最近一段时间&#xff0c;公司在推行自动化测试流程&#xff0c;本人有幸参与了自定义通用控件的关键字封装和脚本辅助编写、数据驱动管理、测试用例执行管理等一系列工具软件的研发工作&#xff0c;积累了一些经验&#xff0c;在此与大家做一下分享&#xff0c;也算是做一个总…

SQL零基础入门学习(四)

SQL零基础入门学习&#xff08;三&#xff09; SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新记录。 SQL INSERT INTO 语法 INSERT INTO 语句可以有两种编写形式。 第一种形式无需指定要插入数据的列名&#xff0c;只需提供被插入的值即可&#xff1a; INSERT …

ImageCombiner设计源码详解

前言在前面的博客中介绍了一款Java的海报生成器ImageCombiner,原文地址&#xff1a;拿来就用的Java海报生成器ImageCombiner&#xff08;一&#xff09;&#xff0c;在博文中简单介绍了一下代码以及一个真实的生成案例。但是对源码的介绍不多&#xff0c;本文就针对源码进行深入…

vs2022 x64 C/C++和汇编混编

vs2022环境x64 C/C和汇编混编vs64位程序不支持__asm内嵌汇编&#xff0c;需要单独编写汇编源文件示例如下1、新建空的win32项目&#xff0c;新建main.cpp&#xff0c;示例代码如下2、新建asm64.asm汇编源文件&#xff0c;示例代码如下3、编译器配置&#xff0c;选择x64&#xf…

【编程入门】应用市场(uni-app版)

背景 前面已输出多个系列&#xff1a; 《十余种编程语言做个计算器》 《十余种编程语言写2048小游戏》 《17种编程语言10种排序算法》 《十余种编程语言写博客系统》 《十余种编程语言写云笔记》 《N种编程语言做个记事本》 目标 为编程初学者打造入门学习项目&#xff0c;使…

华为OD机试 - 最短木板长度(C++) | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明:https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…

PowerJob容器的前世,容器是如何产生,如何上传到Server上去的

这不仅仅是一篇PowerJob源码分析的文章&#xff0c;还有很多的java基础知识&#xff0c;在实践中学习效果更好&#xff0c;感兴趣就留下来交流一下吧。 power容器虽然说是容器&#xff0c;但并不是docker容器&#xff0c;仅仅就是java的jar包 &#xff0c;可以通过框架下载一套…