docker搭建前端开发环境

janto007
1,159 阅读2分钟

前言

本文意在使用 docker 帮助前端同学搭建统一的前端开发环境—解决因为不同的开发环境（mac、windows、linux）导致的各种依赖相关或者运行中丢失某些文件的问题

安装docker

以windows为例，官网直接download软件安装，看到下图则安装成功

image.png

image.png 设置国内代理加速

{
  "features": {
    "buildkit": true
  },
  "experimental": false,
  "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn", "https://hub-mirror.c.163.com"]
}

image.png

开发

  1. 在项目根目录中创建一个名为 Dockerfile 的文件，用于docker构建镜像相关的配置
#设置构建的基础镜像
FROM node:14.17.0-alpine
COPY package.json ./
#设置npm下载依赖来源为淘宝源
RUN npm config set registry https://registry.npm.taobao.org
RUN npm install -g pnpm
#安装项目依赖
RUN npm run bootstrap
COPY . .
#在启动镜像时执行启动项目的命令
CMD npm run serve
#暴露端口用于外部访问
EXPOSE 8080
  1. 在项目根目录中创建一个名为 .dockerignore 的文件，用户忽略docker复制过程忽略的文件
node_modules
dist
  1. 构建开发环境镜像
  • -t: 设置容器的名称
  • . : 是打包当前目录所有东西（不包括.dockerignore 中的文件）
docker build -t prototype-front .

image.png docker软件可观察到生成的镜像

image.png

  1. 启动容器
docker run -d -p 8080:8080 -v D:/work/txyx-app-prototype-front/src:/src --name prototype-front-contanier prototype-front

执行 run 命令去启动一个容器

  • -d: 后台运行
  • -p: 映射容器内的 8080 端口到主机的 8080 端口
  • -i: 交互式操作
  • -t: 终端
  • -v: 文件映射，将主机本地的文件映射到容器中，这样我们本地修改文件内容，可以动态看到页面的变化了;windwos下需指定文件的绝对路径
  • --name：指定容器名称
  • prototype-front: 这是指用 prototype-front 镜像为基础来启动容器

image.png

至此就可以开始愉快的开发了

注意点

  • 无法实时自动刷新浏览器，需手动刷新浏览器代码才能生效
  • 映射文件夹外更新时需重新生成镜像
  • windows下文件映射时，宿主文件夹需指定绝对路径
avatar
文章
阅读
粉丝