docker前端开发环境镜像

一.下载安装Docker Desktop
https://www.docker.com/products/docker-desktop
完成后打开docker，命令行输入docker -v测试是否安装成功

二.配置开发环境ubuntu
1.获取远程的ubuntu镜像

docker pull ubuntu

2.新建容器

• 查看ubuntu的IMAGE ID
  docker images
• 新建并在后台运行名称为fdev的容器
  docker run -itd --name fdev id /bin/bash
• 查看当前运行的容器
  docker ps

3.vscode安装Remote-Containers扩展

image.png

安装成功后点击左下角绿色小方块

image.png

弹出的图层选择attach toRunning Container...

image.png

选择已有的fdev容器

image.png

会自动打开一个vscode新窗口，等待加载完成，添加一个bash终端，可以进入命令行

image.png

4.安装前端开发常用的

• 更新一下 apt-get update
• 下载工具wget：apt-get install wget
• vim：apt-get install vim
• git：apt-get install git
• node版本管理nvm:
  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
  vim ~/.bashrc 写入下面代码

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

执行source ~/.bashrc使配置生效
mvn install node (最新版本)
mvn install v14.17.3(其他版本)
mvn use v14.17.3 (切换版本)
mvn ls (查看安装的版本)

• npm的镜像源管理工具nrm：npm install nrm -g
  nrm ls (查看源列表)
  nrm use taobao (切换到淘宝镜像)

• npm install -g node-gyp

• ngxin：apt-get install nginx
  service nginx start (启动nginx)
  html资源位置 /usr/share/nginx/html
  conf位置 /etc/nginx/nginx.conf
  log位置 /var/log/nginx

• 直接在此容器上安装vscode扩展，如vetur、eslint等

  
  image.png

三. 打包镜像

1. 到https://registry.hub.docker.com/注册账号
2. 打开命令行输入 docker login 完成用户名密码登录
3. 将fdev打包成镜像
   docker container commit fdev fdev
4. 给镜像打tag
   docker tag fdev 用户名/fdev:1.0.0
5. 推送到docker hub
   docker push 用户名/fdev:1.0.0
   注意：镜像是公用的，不要将重要或隐私信息打包上传

四. 拉取镜像
docker pull 用户名/fdev:1.0.0

其他
一. 修改docker容器的端口映射
1.查看容器的ID
docker ps -a
docker inspect xxx
2.停止容器
docker stop xxx
3.修改容器的端口映射配置文件
vim /var/lib/docker/containers/{容器id}/hostconfig.json

"PortBindings":{
  "80/tcp":[
       {
        "HostIp":"",
        "HostPort":"8080"  //宿主机端口
        }
    ]
}

vim /var/lib/docker/containers/{容器id}/config.v2.json

"Ports":{
  "80/tcp":[
    {
      "HostIp":"0.0.0.0",
      "HostPort":"8080"  //宿主机端口
    }
  ]
},
....
"ExposedPorts":{
  "80/tcp":{}
},

4.重启docker服务（必须）
service docker restart
5.启动容器
docker start xxx