docker搭建前端环境

坐上JDK8时间SDK的小船,带你遨游UNIX时间戳与时区的小太空~

开发环境的搭建,是新人入职后的第一道槛,有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境,势必提高新人对团队的印象分!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,忽略那些不需要打包到镜像的文件(夹)

Dubbo+Zookeeper(二)Dubbo架构

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

图片质量评估论文 | 无监督SER-FIQ | CVPR2020

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

【老孟Flutter】2021 年 Flutter 官方路线图

2021-1-14 22:18:00

经验教程

坐上JDK8时间SDK的小船,带你遨游UNIX时间戳与时区的小太空~

2021-1-14 22:30:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索