zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    三数之和
    罗马数字与整数
    Oracle 开启或关闭归档
    Oracle RMAN scripts to delete archivelog
    Oracle check TBS usage
    Oracle kill locked sessions
    场景9 深入RAC运行原理
    场景7 Data Guard
    场景4 Data Warehouse Management 数据仓库
    场景5 Performance Management
  • 原文地址:https://www.cnblogs.com/wangmeijian/p/14279781.html
Copyright © 2011-2022 走看看