前端Docker部署方案

news/2024/10/31 9:27:28/

一、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.ppmy.cn/news/26824.html

相关文章

【RecBole-GNN/源码】RecBole-GNN中lightGCN源码解析

如果觉得我的分享有一定帮助&#xff0c;欢迎关注我的微信公众号 “码农的科研笔记”&#xff0c;了解更多我的算法和代码学习总结记录。或者点击链接扫码关注【RecBole-GNN/源码】RecBole-GNN中lightGCN源码解析 【RecBole-GNN/源码】RecBole-GNN中lightGCN源码解析 原文&…

模电中的负反馈

文章目录一、反馈是什么&#xff1f;二、负反馈对于放大性能的影响1.负反馈的作用三、正反馈总结– 一、反馈是什么&#xff1f; 反馈的定义&#xff1a;凡是将放大电路输出端信号&#xff08;电压或电流&#xff09;的一部分或者全部引回到输入端&#xff0c;与输入信号叠加…

C++项目——高并发内存池(3)--central cache整体设计

1.central cache的介绍 1.1框架思想 1.1.1哈希映射 centralcache其实也是哈希桶结构的&#xff0c;并且central cache和thread cacha的哈希映射关系是一致的。目的为了&#xff0c;当thread cache某一个哈希桶下没有内存块时&#xff0c;可以利用之前编写的SizeClass::Index…

中间件安全—Apache常见漏洞

中间件安全—Apache常见漏洞1.Apache常见漏洞1.1.Apache介绍1.2.Apache HTTPD 换行解析漏洞&#xff08;CVE-2017-15715&#xff09;1.2.1.漏洞介绍1.2.2.漏洞环境1.2.2.1.运行漏洞环境1.2.2.2.访问漏洞环境1.2.3.漏洞复现1.2.3.1.拦截1.2.3.2.添加换行1.2.3.3.访问文件1.3.Apa…

前端的核心技术有哪些?

前端即网站前台部分&#xff0c;运行在PC端&#xff0c;移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展&#xff0c;HTML5&#xff0c;CSS3&#xff0c;前端框架的应用&#xff0c;跨平台响应式网页设计能够适应各种屏幕分辨率&#xff0c;合适的动效设计&#x…

JavaSE学习day9 集合(基础班结束)

1.ArrayList 集合和数组的优势对比&#xff1a; 长度可变 添加数据的时候不需要考虑索引&#xff0c;默认将数据添加到末尾 不能存基本数据类型。只能通过包装。 1.1ArrayList类概述 什么是集合 提供一种存储空间可变的存储模型&#xff0c;存储的数据容量可以发生改变 Ar…

【虚拟机】VirtualBox Host-Only + 主机网络共享配置

文章目录创建Host-Only虚拟机配置主机配置其它工作中经常会使用到虚拟机进行各种技术的试验&#xff0c;之前为了省事常用桥接模式&#xff0c;可是我经常变换办公地点&#xff0c;每个办公地点的局域网网段并不一样&#xff0c;所以我采取了仅主机模式网络共享这种方式&#x…

微信小程序阻止页面返回(包滑动、自动返回键)

这个场景还是挺有意思的&#xff0c;比如某多多&#xff0c;只要你点左上角的返回 好家伙&#xff0c;满满又 花不了 的优惠券就来了&#xff0c;让你拥有一种消费最划算的感觉。 如果你的场景比较简单&#xff0c;只是对左上角的返回进行监听&#xff0c;只需要关闭自带的导航…