docker搭建前端环境
开发环境的搭建,是新人入职后的第一道槛,有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境,势必提高新人对团队的印象分!docker就是这样一个工具。
镜像&容器
docker有个重要的概念叫镜像,官方概念比较拗口,这么解释比较容易理解:docker仓库有很多镜像,包括node、nginx、redis等等,一个镜像一般解决一个问题,镜像没有状态,而且永远不会改变。容器,是镜像执行的地方。
体验
第一步,安装docker,接着在命令行执行以下命令:
docker run -d -p 80:80 docker/getting-started
以上命令创建了一个容器,执行的镜像是docker/getting-started,docker会自动从docker仓库下载这个镜像。命令执行成功后,在浏览器打开http://localhost 即可访问这个容器的服务。
如果要访问自己的项目,需要把自己的项目做成镜像。
Dockerfile
如何创建镜像?打开前端项目根目录,新建Dockerfile配置文件,配置如下(假设你的项目依赖nodejs)
FROM node:10.13.0
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "dev"]
FROM node:10.13.0:指定依赖的基础镜像nodejs,版本为10.13.0
WORKDIR /app:指定工作目录
COPY . .:拷贝当前目录所有文件到/app
RUN npm install:在项目打包为镜像时执行指定npm install
CMD ["npm", "run", "dev"]:镜像在容器中启动时执行的命令,这里假设为npm run dev
新建.dockerignore,忽略那些不需要打包到镜像的文件(夹)
node_modules
创建镜像
把当前文件夹内容打包为镜像,注意最后有个点
docker build -t my-app .
创建容器
创建容器,注意,前端项目一般会开启DevServer,host必须配置为0.0.0.0,否则在宿主机上无法访问docker容器内部的开发环境。
创建名字为my-app-container的容器,执行的镜像是my-app,假设DevServer配置的端口为8080,将容器内的8080映射到宿主机的8080端口,冒号前面的是宿主机端口,后面的是docker容器的端口。
docker run -dp 8080:8080 --name my-app-container my-app
容器会自动执行Dockerfile指定的CMD命令,稍后就可以在浏览器输入http://localhost:8080 访问容器内的开发环境了。
查看所有正在运行的docker容器
docker ps
文件映射
业务代码都打包到镜像里了,接下来,要怎么修改业务代码呢?只需要在创建容器的时候,做文件映射。
在这之前,先停止并删除当前运行的容器
//停止容器
docker kill my-app-container
//删除容器
docker rm my-app-container
假设宿主机前端目录是/project/app,用-v命令,映射到容器的/app
docker run -dp 8080:8080 -v /project/app:/app --name my-app-container my-app
之后,访问http://localhost:8080 ,修改宿主机的代码,代码在容器中编译,宿主机的浏览器也会实时刷新,如同本地开发一样。
docker搭建前端环境的更多相关文章
- 使用 gulp 搭建前端环境入门篇(转载)
本文转载自: 使用 gulp 搭建前端环境入门篇
- mac下通过docker搭建LEMP环境
在mac下通过docker搭建LEMP环境境 1.安装virtualbox.由于docker是在lxc环境的容器 2.安装boot2docker,用于与docker客户端通讯 > brew up ...
- 【Devops】【docker】【CI/CD】1.docker搭建Gitlab环境
CI/CD[持续化集成/持续化交付] docker搭建Gitlab环境 1.查询并拉取gitlab镜像 docker search gitlab docker pull gitlab/gitlab-c ...
- [坑况]——webpack搭建前端环境踩过的坑啊
前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...
- Mac下docker搭建lnmp环境 + redis + elasticsearch
之前在windows下一直使用vagrant做开发, 团队里面也是各种开发环境,几个人也没有统一环境,各种上线都是人肉,偶尔还会有因为开发.测试.生产环境由于软件版本或者配置不一致产生的问题, 今年准 ...
- docker搭建lnmp环境(问题,资料,命令)
入门参考 http://www.runoob.com/docker/docker-install-nginx.html 十大常用命令玩转docker 1. #从官网拉取镜像 docker pull & ...
- Docker搭建disconf环境,三部曲之一:极速搭建disconf
Docker下的disconf实战全文链接 <Docker搭建disconf环境,三部曲之一:极速搭建disconf>: <Docker搭建disconf环境,三部曲之二:本地快速构 ...
- Docker搭建disconf环境,三部曲之二:本地快速构建disconf镜像
Docker下的disconf实战全文链接 <Docker搭建disconf环境,三部曲之一:极速搭建disconf>: <Docker搭建disconf环境,三部曲之二:本地快速构 ...
- Docker搭建disconf环境,三部曲之三:细说搭建过程
Docker下的disconf实战全文链接 <Docker搭建disconf环境,三部曲之一:极速搭建disconf>: <Docker搭建disconf环境,三部曲之二:本地快速构 ...
随机推荐
- 题解-FJOI2018 领导集团问题
题面 FJOI2018 领导集团问题 给一棵树 \(T(|T|=n)\),每个点有个权值 \(w_i\),从中选出一个子点集 \(P=\{x\in {\rm node}|x\in T\}\),使得 \ ...
- MySQL函数与存储过程
一.函数,参考博客:https://www.cnblogs.com/progor/p/8871480.html /* 函数:函数只会返回一个值,不允许返回一个结果集.函数强调返回值,所以不允许返回多个 ...
- ES6新增数据类型Symbol
Symbol的含义? ES6(2015) 引入了第七种原始数据类型Symbol,Symbol英文文意思为 符号.象征.标记.记号,在 js 中更确切的翻译应该为独一无二的 Symbol的使用? Sym ...
- windows jupyter lab中.ipynb转中文PDF
在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...
- SQL注入基本知识点总结
SQL注入基本知识 information_schema MySQL 中存储所有数据库名.所有表名.所有字段名的系统数据库叫 information_schema ,这是在 MySQL 数据库初 ...
- Python进行拉勾网数据爬取框架与思路
爬取内容 用交互式的方式输入想查询的职位并循环输出职位简要信息,为了方便阅读,本文使用到的变量并不是以目标变量的英文来命名,而是为了方便而取的变量名,各位大牛请谅解.(因贵网站爬取一定量数据后需要登陆 ...
- Python 带你高效创作短视频,视频创作秀到飞起!!!
近两年,抖音.快手将短视频推到风口浪尖上,要生产出高质量的视频,离不开视频剪辑这一环节:在全民剪片浪潮中,大众使用最多的剪辑软件如:Pr.FCPX.剪印.Vue 等. 视频剪辑过程中,Python 一 ...
- python初学者-水仙花数简单算法
输出"水仙花数".所谓水仙花是指一个3位数的十进制数,其各位数字的立方和等于该数本身.例如:153是水仙花数. 用for循环实现水仙花数的计算图如下所示: 1 for i in r ...
- 任务调度框架Quartz快速入门!
目录 Quartz是什么 Quartz中的重要API及概念 超重要API 重要概念 Quartz设计理念:为什么设计Job和Trigger? 最简单的Quartz使用案例 Job实例和JobDetai ...
- 设计模式之-Builder模式
场景引入: 一个类,如果有多个属性时,在创建对象,如何对属性进行赋值呢? 1.通过构造器赋值,这种方案优点时一次性赋值完成,但是多种属性的组合,导致构造器会非常多. 2.通过setter方法赋值,方案 ...