程序地带

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 ,修改宿主机的代码,代码在容器中编译,宿主机的浏览器也会实时刷新,如同本地开发一样。


原文地址Github


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/wangmeijian/p/14279781.html

随机推荐

前端面试题15----闭包

闭包闭包:函数嵌套功能(2种作用独立):1.扩大了变量的作用域2.缩小变量的作用域,防止变量污染//扩大了变量的作用域functionfn(){//函数add就是闭包//正常情况下add...

Rayshaan 阅读(104)

JavaScript 原型与原型链

原型pototype每个函数都有一个prototype属性,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型。每一个JavaScri...

ITWebwangxin 阅读(424)

云服务器 ssh服务器拒绝了密码 请再试一次

用XShell连接腾讯云服务器的时候,一直报这个错误而且我用腾讯云自带的那个web登录器登录的时候,完全没问题但是用XShell登录,就是一直报这个错误卡了半...

CSRAWD 阅读(381)

win10开机后wifi图标不见了解决方法

笔记本之前用的好好的,网卡驱动什么都没什么问题,一次开机后wifi图标不见,右下图标选项只有飞行模式,ASDL,以太网࿱...

对象new的第一天 阅读(667)

前端面试题16----http协议

HTTP协议是HyperTextTransferProtocol(超文本传输协议)的缩写,是用于从万维网(WWW:WorldWideWeb)服务...

Rayshaan 阅读(971)

随记(九):记录Fastjson远程命令执行流程

记录Fastjson远程命令执行流程0x01Fastjson远程命令执行流程0x02Fastjson漏洞利用流程简述摘自:ZE0安全实验室的一篇分析文章-传送门我觉得这个解释非常好&#x...

XXR_Beta 阅读(239)