给前端的docker 10分钟真 · 快速入门指南

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

给前端的docker 10分钟真 · 快速入门指南

2022年了,咱前端花点时间学点docker,不吃亏不上当

还没有了解过docker吗,没关系,咱模拟几个场景,两分钟就给你搞明白它是什么,我们什么时候需要它

接着我们拿剩下的七八分钟用docker来同时部署vue2、vue3两个项目,对就是这么快!

1 docker是什么

场景模拟1:单机

在公司勤勤恳恳的你很快得到了领导的认可,这天他让你接手这下面几个新项目,你需要将它们安装在自己的电脑上

single

慧眼的你发现,这里有多个不同版本的nodejs和mysql:还行,对我来说小意思

场景模拟2:多机

此时公司新来了3个前端实习生和新人,领导要你把这几个项目也给他们安装在本地电脑运行

由于公司历史等原因,暂时只能给他们配置了不同操作系统的电脑:win7、win10、OSX等等

现在你需要把这几个项目分别安装在几台电脑的不同操作系统上,看图

multi

机智的你发现,你的头现在一个比两个大

“安装麻烦费时间,新来的人做项目的时候,还得针对不同项目去切换匹配的版本来用,容易犯错这也给主机环境造成污染这也给主机环境造成污染,一想到未来还有更多的项目要这么搞,这时候可能有人已经想跑路了”

辛辛苦苦安装完成后,看你这么给力,领导又让你在公司内网的两台小服务器上部署一下这几个项目,做公共的开发和测试环境,哦对这两台服务器是linux的,你是不是准备开始百度如何在linux 安装node 和 mysql了?而且还是要安装多个版本的。要是这两台服务器的linux系统还不同呢?

现在到轮到你想提桶了吧

3 docker出场

别慌,这时候docker出场了,它能帮你抹平不同系统的应用程序安装差异

multi-docker

等等,那为啥不用虚拟机?

因为虚拟机启动慢、损耗大、占用资源多,在不同系统上的迁移/拓展比较复杂

但是docker它不会啊,它启动是秒级的,占用资源少,香不香,跨平台还方便复制

写好配置后,它一个命令就在电脑上同时安装不同版本的nodej、msyql、nginx 等而且是互相隔离独立同时运行,这时候还不需要你手动来回切换

上面的问题不就轻松解决了吗,现在你对docker感兴趣了没

2 docker 基础

现在我们开始来了解一下docker的基础吧

docker 分几个概念:镜像、容器、仓库

镜像:就是像是我们装机时候需要的系统盘或者系统镜像文件,这里它负责创建docker容器的,有很多官方现成的镜像:node、mysql、monogo、nginx可以从远程仓库下载

容器:可以比拟成一个迷你的系统,例如一个只安装mysql5.7的linux最小系统,当然你喜欢也可以把mysql、node安装在同一个容器中,记住,容器与容器,容器和主机都是互相隔离的

仓库:仓库就像是github那样的,我们可以制作镜像然后push 提交到云端的仓库,也可以从仓库 pull 下载镜像

3 安装

docker的安装很简单,win、osx都是图形界面安装,linux的也几行命令,现在的mac的m1芯片系列也支持了,这里我们先略过安装步骤,要快!先看完!

ps:在m1芯片的docker上安装mysql需要稍加点配置

安装好运行下方代码查看

docker -v

4 实战:部署vue2和vue3项目

安装好docker后,我们现在来实战了,搓搓手

我们要让电脑同时运行nodejs10和nodejs12多个版本

ps: 咱先快速入门,我们暂时先把不同版本的mysql安装放一边哈

4.1 准备vue2 、 vue3项目

先跟着一起做,咱后面再解释

现在新建一个文件放我们的项目:命名 为 :my-repository

安装vue2+webpack项目

# 0 命令行进入到该文件夹的位置: 
cd /你的电脑具体的文件路径/my-repository

# 1.现在安装vue-cli
npm install -g @vue/cli

# 2.查看vue-cli安装成功否
前端Docker入门实战 用以隔离环境。而Docker可单独提供某种语言的运行环境,并同时与宿主机隔离起来。对于前端而言,此时你可以通过由自己在项目中单独维护 进行一些 nginx 的配置,大大提升前端的自由性和灵活度,而无需通过运维或者后端来进行。 React + Dockerfile → 定制镜像 run命令详情 OPTIONS说明: docker-compose 类似于,可以将上面的命令写入到这个文件,直接执行即可运行... 阅读详情

相关推荐

IDEA集成Docker实现一键部署

IDEA集成Docker实现一键部署,主要应对在windows环境中做的一些配置,另外在项目中加上了访问docker中redis的功能。

sinat_36203404的博客 4839

[ docker ] -- 配置记录:docker 一键部署包含前端、后端和数据库的项目

[ docker ] -- 配置记录:docker 一键部署包含前端、后端和数据库的项目

tuzi007a的博客 1084

更适合前端Docker 教程(一)

前端程序员自学 docker , 我们知道了什么是 Docker?它解决了什么问题? 我们如何在电脑安装 Docker 环境? 了解 Docker Desktop 和 VSCode Docker 如何使用 Docker 进行简单的 Next.js 纯前端项目部署

weixin_48191864的博客 2423

Docker核心技术:深入理解网络模式 (Bridge, Host, None, Container) 万字详解

Docker网络模式深度解析:从基础到最佳实践 本文系统介绍了Docker四大核心网络模式及其应用场景。Bridge模式作为默认选项,通过docker0网桥实现容器间通信;Host模式直接使用主机网络栈,性能最优但安全性需注意;None模式提供完全网络隔离,适用于安全敏感场景;Container模式允许共享网络命名空间,适合Sidecar等架构。文章详细分析了各模式的架构原理、性能特点及安全考量,并提供了生产环境中的网络优化策略和多模式组合方案。最后还探讨了Docker网络插件生态、eBPF技术应用等前沿趋

油墨香^-^的博客 1034

10分钟掌握AriaNg Docker部署:从0到1的极速优化指南

AriaNg是一款现代化的Web前端工具,旨在让aria2的使用变得更加简单。本文将为你提供一份从0到1的AriaNg Docker部署极速优化指南,帮助新手和普通用户快速上手。 ## 一、AriaNg简介 AriaNg作为一款优秀的aria2前端工具,能够为用户提供直观、便捷的操作界面,让文件下载管理变得轻松高效。 ## 二、准备工作 ### 2.1 安装Docker 首先,确保你的系统

gitblog_00971的博客 1152

新手也能5分钟搞定:本地用Docker部署前端项目全指南

Nginx 托管目录(和 Dockerfile 对应)默认访问 index.html# 关键:解决 Vue/React Router history 模式刷新 404# 可选:静态资源缓存(JS/CSS/图片等缓存 7 天,提升访问速度)expires 7d;# 可选:跨域代理(若前端需调用本地后端接口,如 http://localhost:8080/api)

qq_38388860的博客 1333

Lightpanda 无头浏览器:用 Zig 从零构建的快速自动化引擎完整指南

Lightpanda 是一款专为 AI Agent 和自动化场景从零构建的无头浏览器,完全用 Zig 编写,不依赖 Chromium 或 WebKit 内核。它适合需要在服务器上大规模运行爬虫、自动化测试或数据提取的开发者。读完这篇,你能完成安装、抓取第一个页面、启动 CDP 服务并接入 Puppeteer。 ## 它解决什么问题 当你把并发拉到几百个页面时,传统无头浏览器的内存和启动开销会先

gitblog_00532的博客 795

10分钟上线GitDiagram:Docker Compose+Vercel极速部署指南

还在为复杂项目的代码结构可视化烦恼?GitDiagram让你只需将GitHub URL中的"hub"替换为"diagram",即可秒级生成交互式代码架构图。本文将带你通过Docker Compose部署后端服务,配合Vercel托管前端10分钟完成私有化部署,彻底摆脱公共服务限制。 ## 部署架构概览 GitDiagram采用前后端分离架构,部署需同时配置服务端API和前端应用: ```m...

gitblog_00353的博客 936

前端同学也能搞定 Docker快速入门指南

然而,当你想让你的朋友试试看,或者想将其部署到远程的云服务器上查看效果时,你首先需要配置和你本地相同的软件环境,包括数据库、Web 服务器(如 IIS,Tomcat,Nginx)以及必要的插件和库等。镜像是只读的,容器在运行时创建的任何文件或对现有文件的任何修改都将写入容器的层,而不影响下面的镜像层。Dockerfile 是一个用于构建 Docker 镜像的文本文件,它包含了一系列的指令和参数,其实很简单的,会简单的shell脚本,理解DockerFile没有什么难度。此外,你也可以创建自己的私有仓库。

linwu的博客 604

超详细:30分钟入门docker前端容器化

前端利用docker进行容器化实战记录

一步一个脚印 3459

10分钟部署DataHub:Docker Compose 部署完整实操指南

本文面向需要本地跑通 DataHub 的工程师,按官方 `docker/` 目录的实配置,讲清 DataHub Docker Compose 部署全流程:环境自检、三种启动方式、启动验证、调参、运维与排障,命令可直接复制执行。 ## 动手前,先搞清 DataHub 是什么 `quickstart` 一套 compose 拉起的不止 GMS 一个容器,而是一整条存储 + 服务链路。先建立这个认

gitblog_00946的博客 739

AgencyOS 快速入门10 分钟搭建你的 agencies 专属管理平台

想要为你的数字营销机构快速搭建一个专属的管理平台吗?AgencyOS 是一个基于 Directus 和 Nuxt 构建的开源操作系统,专为数字营销机构设计,帮助你高效管理客户关系、项目和财务。本文将为你提供完整的 AgencyOS 快速入门指南,让你在 10 分钟内完成安装配置。 ## 🚀 为什么选择 AgencyOS? AgencyOS 是一个专为数字营销机构设计的开源操作系统,它集成了网

gitblog_00004的博客 442

Blinko入门指南:如何在5分钟内完成Docker部署

想要快速搭建一个**个人AI笔记工具**?Blinko作为一款开源的**自托管AI笔记软件**,能够帮助你在保护隐私的同时享受智能笔记体验。本教程将带你用最简单Docker方式,在5分钟内完成Blinko的完整部署! ## 🚀 快速开始:一键部署Blinko Blinko支持多种部署方式,但**Docker部署**无疑是最简单快捷的选择。只需几个命令,你就能拥有属于自己的AI知识管理平台。

gitblog_00389的博客 1059

docker快速入门

Docker是一款开源的容器化平台,主要解决软件开发中的环境一致性、资源利用率和部署效率等问题。它通过镜像打包应用及其依赖,确保一次构建,到处运行;避免了环境差异导致的兼容问题。相比传统虚拟机,Docker容器更轻量,启动更快,资源利用率更高。 Docker的核心组件包括引擎(守护进程和CLI)、镜像和容器。镜像作为只读模板,采用分层设计;容器是镜像的运行实例,提供隔离环境。辅助工具如Dockerfile用于定义镜像构建流程,镜像仓库(如Docker Hub)用于存储分发镜像。

weixin_62787678的博客 744

如何快速上手II-Agent:10分钟完成Docker部署与基础配置

II-Agent是一个开源智能代理框架,能够帮助开发者快速构建和部署智能化代理服务。本文将带你在10分钟内完成II-Agent的Docker部署与基础配置,让你轻松开启智能代理开发之旅。 ## 准备工作:环境要求与前期准备 📋 在开始部署II-Agent之前,请确保你的系统满足以下要求: - Docker Engine (20.10.0+) - Docker Compose (v2.0+)

gitblog_00632的博客 742

JeecgBoot Docker部署指南:容器化快速上线

还在为JeecgBoot的复杂部署流程而头疼吗?每次部署都要配置MySQL、Redis、Nginx,还要处理各种环境依赖问题?本文将为你提供最完整的JeecgBoot Docker容器化部署方案,让你在10分钟内完成从源码到生产环境的快速上线! 通过本文,你将获得: - ???? 一键式Docker Compose部署方案 - ???? 前后端分离架构的完整容器化配置 - ???? 生产环境最佳实践配置 -...

gitblog_01049的博客 1235

Goose 安装指南:装好 CLI,跑通你的第一个 AI 开发会话

改一个接口、补一批测试、搭个页面骨架,这些事你每天都在手动重复。Goose 是一个本地运行的开源 AI 智能体(Agent,指能自己规划、执行并修改文件的 AI 助手),你给它一句任务,它写代码、跑命令、改文件。这篇 Goose 安装指南带你完成三件事:装好 Goose CLI、配通模型、跑完第一个实任务。 [![Goose 桌面版界面示意](https://raw.gitcode.com/G

gitblog_00620的博客 652

10分钟上手Shortlink:开源微服务项目快速部署指南

想要快速掌握一个完整的微服务架构实战项目吗?Shortlink正是你需要的开源微服务示例项目!这个项目不仅提供了短链接服务功能,更重要的是它展示了现代微服务架构的最佳实践。在本文中,我将为你提供一个简单易懂的快速部署指南,让你在10分钟内就能启动并运行这个强大的开源项目。 ## 什么是Shortlink项目? Shortlink是一个开源的短链接服务项目,采用微服务架构设计,旨在提供美观的用户

gitblog_00228的博客 907

10分钟快速上手Plane:开源项目管理工具的终极入门指南

还在为复杂的项目管理工具而烦恼吗?🚀 Plane作为一款强大的开源项目管理平台,为团队提供了简洁高效的解决方案,帮助您轻松管理任务、跟踪进度、协作文档。无论您是小型创业团队还是大型企业,Plane都能以直观的界面和丰富的功能满足您的项目管理需求。本文将带您在短短10分钟内完成从安装到创建第一个项目的全过程,让您快速掌握这个现代项目管理工具的核心使用技巧! ## 为什么选择Plane?开源项目管

gitblog_00047的博客 1072
上一篇: 一份macos的星级主流工作开发套件配置清单
Eric-long
博客等级 码龄11年 2粉丝 3原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值