Docker化一个前端基础开发环境：简洁高效的选择

尖椒土豆sss2023-08-07 17:46

前言

作为程序员日常工作中不管是入职拿到新电脑，还是自己换了新机，工作之前第一件事就是要安装配置各种各样的开发环境；如前端开发需要安装 node、yarn、git 等；

为了使用某些工具或者包，可能还需要安装 python 或者 java 等（比如 jenkins 依赖了 java），时间久了，本机的环境会越来越多且非常乱；

使用 docker 做开发环境后，开发环境都配置在容器中，开发时只需要打开 docker，开发完后关闭 docker，本机不用再安装乱七八糟的环境，非常清爽。

docker 打造基础前端开发环境

docker安装请参考 docker 初识 这篇文章

本文使用 ubuntu 镜像作为基础镜像 来配置一个简单的自己的前端开发环境

如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈 😀😀😀

点击链接 学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎

获取基础镜像

首先启动docker服务，打开 cmd 终端拉取 ubuntu 镜像

bash 复制代码 
# 不输入版本号，默认获取 latest 即最新版
docker pull ubuntu
# 查看镜像
docker images

创建容器

  • 以ubuntu镜像为基础 创建并运行一个容器

    arduino 复制代码 
    docker run -itd --name web-dev 'xxx镜像id' /bin/bash

    -itd 是 -i -t -d 的合写，-d 是在后台中运行容器，相当于新建时一并启动容器 ，这样就不用使用 docker start 命令了；
    /bin/bash 作用是因为docker后台必须运行一个进程，否则容器就会退出，在这里表示启动容器后启动bash；

    查看docker运行中的容器 docker ps 发现当前容器状态为 Up 启动成功

    后面为了方便操作我们使用编辑器打开容器，这里先关闭运行的容器 docker stop 容器

  • vscode中打开容器

    首先在终端启动一个容器
    docker run -itd -p 6000:9000 --name web-dev-ctr sisi001/web-dev:0.0.1

    vscode安装 Dev Containers 插件

    点击左下角->选择 "Attach to Running Container" 会出现正在运行的容器列表，选择容器进入，添加一个 bash 终端，就可以进入我们刚刚上面命令行模式了也就是当前容器内部了

    在vscode 中打开目录，这时发现打开的不再是本机的目录，而是刚创建的容器中的目录

更新ubuntu系统

ubuntu 镜像非常纯净（大小只有 72m），只具备最基本的能力，为了后续方便使用，我们先更新一下系统

  • 更换阿里源

    更新前为了速度快一点，先换到阿里的源，用 vscode 打开容器，打开 /etc/apt/sources.list 文件，将内容改为：

    bash 复制代码 
      deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
  deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
  deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
  deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
  deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
  deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
  deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
  deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
  deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
  deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiver

  • 更新系统

    sql 复制代码 
    apt-get update
apt-get upgrade

  • 安装 sudo apt-get sudo

  • 安装 wget（wget 是个下载工具，需要用它来下载其他软件包）

    arduino 复制代码 
    apt-get install wget

    为了后续方便管理项目和软件包，我们在 /home 目录中创建两个文件夹:
    projects 用于存放项目
    packages 用于存放软件包

    bash 复制代码 
    cd /home
mkdir projects
mkdir packages

linux中安装node（不推荐）

需要下载其它版本修改版本号即可，推荐使用nvm去管理node
wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar

  • 解压文件：

    bash 复制代码 
    tar -xvf node-v14.18.0-linux-x64.tar

# 删除安装包
rm node-v14.18.0-linux-x64.tar

# 改个名字，方便以后切换 node 版本
mv node-v14.18.0-linux-x64 node

    配置环境变量后，使用node -v查看是否成功

linux安装nvm管理node（推荐）

通过指令安装nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

如果网络不佳、可直接去官网下载压缩包上传linux指定目录后解压使用 nvm-sh/nvm · GitHub

  • 配置 nvm 环境变量：

    bash 复制代码 
    # root目录下新建 .bash_profile 文件内容如下：
export NVM_DIR="/home/packages/nvm-0.39.2"   # 这里路径一定要写对不然后面找不到nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

# 更更换nvm源为淘宝
export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs

    打开 .bashrc 文件新增： source ~/.bash_profile

    在终端编译 .bashrc 文件，使其生效： source ~/.bashrc

    然后就可以使用 nvm 了 nvm -v 查看是否成功

  • bash: nvm: command not found 问题

    检查上述环境变量配置的路径、如果是vscode里打开终端，修改配置文件后需要关闭终端重新打开才生效

  • 安装 nrm，并切npm换到 taobao 源

    nvm安装成功后就可以使用nvm安装node了，node安装成功后安装 nrm切换源

    perl 复制代码 
    npm install nrm -g
nrm use taobao

liunx安装nginx

参考链接 ubuntu安装nginx的两种方式

  • 安装成功后启动nginx service start nginx 访问 localhost:80 熟悉的页面出来了

  • 新增nginx配置文件

    bash 复制代码 
       # 修改为自己的配置
    server {
        listen       9000;
        server_name  localhost;

        location / {
            # 修改为自己的路径
            root   /home/test;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
   }

    重启nginx服务：
    service nginx reload

    设置容器启动时nginx服务自启（失败，待解决）

    参考链接 docker设置容器启动时nginx、thingsboard、postgresql等服务自启动

    开启新的容器测试

    docker run -itd -p 2023:9000 --name web-dev-ctr3 fed-image:0.0.2 /bin/bash ./start.sh

    /bin/bash必须加！ 意思是用/bin/bash 执行./start.sh 脚本 例如： docker run -itd -p 2023:9000 --name web-dev-ctr3 fed-image:0.0.2 /bin/bash ./start.sh

    容器启动时nginx自启 （此方法失败）

    参考链接： Ubuntu 环境下配置 Nginx 开机自启

    • 设置liunx开机自启nginx update-rc.d nginx defaults

      报错如下：

      bash 复制代码 
      perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
        LANGUAGE = (unset),
        LC_ALL = (unset),
        LANG = "en_US.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").

      原因是本地化语言配置缺失，需要安装，比如 zh_CN.UTF-8

      请执行： apt-get install language-pack-zh-hans

      打开 .bashrc 添加 export LC_ALL=C

      重载生效： source ~/.bashrc

      再次执行： update-rc.d nginx defaults 发现不报错了

    • 关闭开机自启 update-rc.d -f nginx remove

容器打包为镜像

上面我们通过 ubuntu 为基础镜像 创建了一个容器，进行自定义配置了一个基础的前端开发环境，为了复用这个环境 ，我们需要将该容器打包成镜像并推送到 dockerhub 仓库中；

（本次是上传私有仓库，免费用户默认只能有一个私有仓库）

  • 容器打包为镜像

    指令： docker commit -a="my_name" -m="测试" container01 new_image:tag

    -a：提交的镜像作者；
    -c：使用 Dockerfile 指令来创建镜像；
    -m：提交时的说明文字；
    -p：在 commit 时，将容器暂停；

    现在把我们安装好环境的容器打包为一个新的镜像 ，把他上传到dockerhub之后复用这个新的镜像去创建新的容器就可以直接使用刚刚上面安装的软件包了，而不用每个容器再去安装了。

    容器打包为新的镜像 ：
    docker commit web-dev-ctr fed-image:0.0.1

    fed（表示 front end development）

  • 为镜像打tag

    修改本地镜像的名字和标签，一定要打上tag，并带上 dockerhub 的账号，不然没办法上传到 dockerhub上的，这里我们先打包为私有仓库镜像

    打tag格式为： docker tag 本地镜像id或者名称 用户名/hub仓库名:仓库版本号

    如果这里仓库名称不是对应私有仓库，会变成公共镜像

    docker images 查看当前镜像

    首先修改需要上传的镜像为规范的镜像名称 ：
    docker tag ubuntu:latest xxx/web-dev:0.0.1

    ubuntu:latest 是当前本地用户的镜像 的 "名字:TAG"

    xxx 是自己的 dockerhub 账号

    web-dev:0.0.1 是自己 dockerhub 仓库名称和版本号

上传推送 docker hub

  • 注册账号 首先去docker官网 注册账号，并且创建一个仓库，后续推送镜像时使用。

  • 终端登录docker官方
    docker login 输入用户名和密码
    docker logout 登出

    出现下图为登录成功

  • 推送镜像到仓库
    docker images 将打好tag的镜像推送到 dockerhub 私有仓库，因为我们提前按格式改好了镜像名称所以现在可以直接push:
    docker push 用户名/仓库名称:0.0.1

    push成功后登录dockerhub 查看对应的仓库就可以看到我们刚刚提交的镜像了

在新机器上拉取该镜像

  • 拉取镜像
    docker pull 用户名/仓库名称:0.0.1
  • 启动容器：
    docker run -itd -p 2000:9000 --name ctr1 xxxx
  • 从终端进入容器（其实就是进入linux）
    docker exec -it 容器id /bin/bash 启动nginx服务， 就可以通过宿主机2000访问容器9000端口映射的内容了

注意事项

  • 如果要将镜像推送到dockerhub，不要将重要的信息保存到镜像中，因为镜像是共享的，避免重要信息泄露。

  • 千万不要在容器中存任何重要的文件或信息，因为容器一旦误删这些文件也就没了。

  • 如果在容器中开发项目，记得每天提交代码到远程仓库，避免容器误删后代码丢失。

总结

至此我们使用 docker 搭建了一个自定义的前端基础环境的镜像，且发布到了 dockerhub 私有仓库，现在可以在不同机器（电脑）、不同系统中拉取共享这个镜像，然后创建容器使用。从而达到了快速配置开发环境的目的。

相关推荐
利刃大大11 分钟前
【Linux入门】2w字详解yum、vim、gcc/g++、gdb、makefile以及进度条小程序
linux·c语言·vim·makefile·gdb·gcc
匹马夕阳11 分钟前
Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗？13 分钟前
日历热力图，月度数据可视化图表（日活跃图、格子图）vue组件
前端·vue.js·信息可视化
飞行的俊哥6 小时前
Linux 内核学习 3b - 和copilot 讨论pci设备的物理地址在内核空间和用户空间映射到虚拟地址的区别
linux·驱动开发·copilot
桂月二二6 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062068 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb8 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角8 小时前
CSS 颜色
前端·css
不会飞的小龙人8 小时前
Docker Compose创建镜像服务
linux·运维·docker·容器·镜像
不会飞的小龙人8 小时前
Docker基础安装与使用
linux·运维·docker·容器
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04PyTorch AMP 混合精度中grad_scaler.py的scale函数解析05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07xgboost: Why not implement distributed XGBoost on top of spark08Oracle Scheduler: Calendaring09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10BMC 虚拟i2c访问PCA9545(switch芯片)后面的设备,为什么找不到PCA9545?