docker搭建前端环境
- 2021 年 1 月 14 日
- 笔记
- javascript
开发环境的搭建，是新人入职后的第一道槛，有时一个小小的问题就能阻塞半天。如果能提供一个工具在短时间内搞定开发环境，势必提高新人对团队的印象分！docker就是这样一个工具。
镜像&容器
docker有个重要的概念叫镜像，官方概念比较拗口，这么解释比较容易理解：docker仓库有很多镜像，包括node、nginx、redis等等，一个镜像一般解决一个问题，镜像没有状态，而且永远不会改变。容器，是镜像执行的地方。
体验
第一步，安装docker，接着在命令行执行以下命令：
docker run -d -p 80:80 docker/getting-started
以上命令创建了一个容器，执行的镜像是docker/getting-started，docker会自动从docker仓库下载这个镜像。命令执行成功后，在浏览器打开//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命令，稍后就可以在浏览器输入//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
之后，访问//localhost:8080 ，修改宿主机的代码，代码在容器中编译，宿主机的浏览器也会实时刷新，如同本地开发一样。
