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

尖椒土豆sss
7,152 阅读8分钟

image.png

前言

作为程序员日常工作中不管是入职拿到新电脑，还是自己换了新机，工作之前第一件事就是要安装配置各种各样的开发环境；如前端开发需要安装 node、yarn、git 等；
为了使用某些工具或者包，可能还需要安装 python 或者 java 等（比如 jenkins 依赖了 java），时间久了，本机的环境会越来越多且非常乱；

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

docker 打造基础前端开发环境

docker安装请参考 前端初识Docker 这篇文章
本文使用 ubuntu 镜像作为基础镜像 来配置一个简单的自己的前端开发环境

如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈😀😀😀
点击链接 学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎

获取基础镜像

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

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

image.png

创建容器

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

    docker run -itd --name web-dev 'xxx镜像id' /bin/bash

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

    查看docker运行中的容器 docker ps image.png 发现当前容器状态为 Up 启动成功
    后面为了方便操作我们使用编辑器打开容器，这里先关闭运行的容器 docker stop 容器

  • vscode中打开容器

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

    vscode安装 Dev Containers 插件 image.png

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

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

更新ubuntu系统

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

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

      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

  • 更新系统

    apt-get update
apt-get upgrade

  • 安装 sudo apt-get sudo

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

    apt-get install wget

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

    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

  • 解压文件：

    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

image.png

  • 配置 nvm 环境变量：

    # 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切换源

    npm install nrm -g
nrm use taobao

liunx安装nginx

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

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

    image.png

  • 新增nginx配置文件

       # 修改为自己的配置
    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
      报错如下：

      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 查看当前镜像

    image.png 首先修改需要上传的镜像为规范的镜像名称：
    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 登出
    出现下图为登录成功 image.png

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

    image.png

    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 私有仓库，现在可以在不同机器（电脑）、不同系统中拉取共享这个镜像，然后创建容器使用。从而达到了快速配置开发环境的目的。

avatar
文章
阅读
粉丝
相关推荐
前端抢饭碗系列之初识Docker容器化部署
1.7k阅读
 · 
24点赞
如何用 docker 打造前端开发环境
18k阅读
 · 
224点赞
Docker 安装 Nginx 部署前端项目
9.9k阅读
 · 
46点赞
利用Docker + VSCode搭建前端开发环境
693阅读
 · 
0点赞
【前端Docker部署实战】Docker镜像+Nginx配置部署 Vue 项目
13k阅读
 · 
118点赞
『前端进阶』🐳 Docker 部署 —> GitHub Active 自动部署
4.6k阅读
 · 
64点赞
写给前端工程师看的Docker教程-基础篇
5.8k阅读
 · 
47点赞
docker+nginx部署前端（vue）项目
1.0k阅读
 · 
0点赞
Docker+Nginx+Jenkins实现前端自动化部署
29k阅读
 · 
504点赞

友情链接：