关于前端:提升前端开发体验利用-Dev-Containers-实现高效开发

本我的项目灵感来自于方方老师的 oh-my-docker

我在此基础上进行了魔改，次要学习 dev containers 以及 docker 的根本应用

感激方方老师的分享

你是否遇到过这些状况：

1. 保护多个不同版本的我的项目时，在各个环境中不停的切换
2. 我的项目交接给他人，他人在本人的环境无奈运行，要你解决
3. 换一台电脑就要重新配置环境

还有一些其余状况就不一一列举了，比方服务器和本地环境不统一等等

这时你会怎么办？

一个个去解决吗？

那你一天或者几天工夫就耗在这下面了

反复是程序员最大的敌人，懈怠是程序员最大的长处，也是第一生产力

怎么解决这个问题呢？

docker 进去曾经很久了，或多或少听过 / 用过一点

它也是一种虚拟化技术，能够了解为虚拟机 (理论不是)，虚拟机能够装置 linux，那 docker 也能够装置 linux，再次根底上再装置其他软件，是不是就能够解决下面的问题了？

咱们针对不同的我的项目配置一套镜像，他人只有运行这个镜像，就能运行我的项目了，不必放心环境问题了

这时你可能会想，我怎么在 docker 中开发呢？

它又没有 vscode 这样的软件，难道让我在命令行里写代码？

不必放心，dev containers 这个工具给咱们解决了这个问题

根本应用

官网文档

1. 首先在 vscode 中装置 Dev Containers 插件
2. 按快捷键 command + shift + p 关上命令面板，输出 add container configuration
3. 输出 node，这里以 Node.js 为例，其余语言也是相似的
4. 抉择 node 版本，这里抉择 20
5. 依据需要抉择一些软件，可跳过，间接点确定

通过这样设置，就有了一个最根本的 node 开发环境，能够在 vscode 中开发

再次按快捷键 command + shift + p 关上命令面板，输出 rebuild and reopen in container，回车，期待即可

等装置完之后，就能够在 vscode 中开发了，这时你会发现，vscode 中的 terminal 曾经变成了 docker 中的 terminal，你能够在外面运行 node 命令了

下次关上容器，只须要按快捷键 command + shift + p 关上命令面板，输出 reopen in container，回车即可

ps: 如果想要删除容器，记得先备份好数据，否则失落后找不回来

自定义配置

下面的配置只是最根本的配置，大部分状况咱们是须要自定义配置，让容器更合乎咱们的需要

自定义配置就须要用到 Dockerfile，这个文件是 docker 的配置文件，能够在外面装置软件，配置环境等等

Dockerfile 的语法能够参考 官网文档

这里也有相干的视频教程【狂神说 Java】Docker 最新超具体版教程通俗易懂

而后依据本人的需要编写 Dockerfile

这里以 node 为例，装置 yarn，并且配置 yarn 的镜像源

# 设置变量，由 .devcontainer.json 中的 args 传入
ARG VARIANT
# 指定 node 版本
FROM node:${VARIANT}

# 设置编码
ENV LANG C.UTF-8

# 设置工作目录
WORKDIR /root/uccs

# 挂载 volume
VOLUME ["/root/.local/share/pnpm"]
# 设置 bash 为默认 shell
ENV SHELL /bin/bash
# 设置 pnpm 环境变量
ENV PNPM_HOME /root/.local/share/pnpm \
    && PATH $PNPM_HOME:$PATH
# 装置 pnpm
RUN npm config set registry=https://registry.npmmirror.com \
    && npm i -g pnpm \
    && pnpm setup \
    && pnpm config set store-dir $PNPM_HOME

# 装置须要用到的工具，因为我这里抉择的 node 版本是最小的，所以须要装置一些工具
RUN if command -v apt-get &> /dev/null; then \
        apt-get update && apt-get update && apt-get install -y sudo curl git zsh tree vim; \
        sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"; \
        sh -c 'git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting'; \
        sh -c 'git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions'; \
        echo 'export ZSH=$HOME/.oh-my-zsh' >> /root/.zshrc; \
        echo 'ZSH_THEME="robbyrussell"' >> /root/.zshrc; \
        echo 'plugins=(git zsh-syntax-highlighting zsh-autosuggestions)' >> /root/.zshrc; \
        echo 'source $ZSH/oh-my-zsh.sh' >> /root/.zshrc; \
   else \
        echo "apt-get command does not exist."; \
    fi
# 设置 zsh 为默认 shell
ENV SHELL /bin/zsh

写好的 dockerfile 之后，在批改 devcontainer.json 文件

{
  "name": "uccs", // 容器名称
  "build": {
    "dockerfile": "Dockerfile", // 指定 dockerfile 文件的门路
    "args": {"VARIANT": "18-buster-slim"} // node 版本，传入 dockerfile
  },
  // 挂载 volume，将本地的 pnpm 目录挂载到容器中，共享一个 pnpm 目录，节俭空间
  "mounts": [
    {"source": "${localEnv:HOME}/Library/pnpm",
      "target": "/root/.local/share/pnpm",
      "type": "bind"
    }
  ],
  // 设置工作目录
  "workspaceFolder": "/root/uccs",
  // 容器敞开后须要执行的操作，这里是进行容器
  "shutdownAction": "stopContainer",
  // 容器的权限，这里设置为 root
  "remoteUser": "root"
}

node 版本抉择

当咱们关上 node 官网镜像时，会发现有很多版本，一时不晓得怎么抉择

node 镜像时以 Debian 为根底：

1. 稳定版：通常这类镜像都很大，然而性能很全

   • buster —— 最新的 Debian 稳定版
   • stretch —— 上一版 Debian 稳定版
   • jessie —— 上上版 Debian 稳定版
   • wheezy —— 被淘汰的 Debian 稳定版

2. 轻量版：这类镜像很小，只保留了 node 的根本运行环境

   • slim —— 基于 Debian 的轻量版
   • alpine —— 基于 Alpine Linux 的轻量版

3. 不稳固版本

   • bullseye、bookworm —— 正在开发但尚未稳固版本的 Debian

官网举荐应用稳定版，如果对内存没要求能够应用，毕竟功能齐全，软件就不必本人装了

我举荐的是轻量版 slim 版本，须要用到啥工具，本人去装置就好了，docker 的难度在于 shell 脚本能力，所以本人用啥本人去装置，晋升本人 shell 脚本能力

alpine 版本的 node，会导致一些 c/c++ 环境的软件可能不兼容

dev container 参数阐明

1. name: 指定容器名称

2. workspaceFolder 和 workspaceMount

   • workspaceFolder 是容器的工作目录，默认是 /workspaces/ 你的目录名
   • workspaceMount 是挂载的目录，如果不指定，默认是 /workspaces/ 你的目录名

因为 workspaces/ 你的目录名 默认会主动挂载，这就导致了一个效率问题，如果你关上的我的项目很大，那么容器启动的工夫就会很长，后续在容器中的操作也会很慢

所以不要间接在 workspaces/ 你的目录名 目录下进行开发，而是你执行一个工作目录 /root/uccs，这个目录必须提前创立，能够写在 Dockerfile 中

3. shutdownAction: 敞开容器后执行的操作

   • none —— 不执行任何操作
   • stopContainer —— 执行 docker stop 操作
   • stopCompose —— 执行 docker-compose stop 操作
4. postCreateCommand: 容器创立后执行的命令，只会在容器创立的时候执行一次，能够用来装置一些工具，比方 pnpm install
5. postStartCommand: 容器启动后执行的命令，能够用来启动一些服务，比方 pnpm dev

6. mounts: 挂载目录，type: bing 是目录挂载，type: volume 是卷挂载

   [
     {"source": "${localEnv:HOME}/Library/pnpm",
       "target": "/root/.local/share/pnpm",
       "type": "bind"
     }
   ]

   • 挂载 pnpm 装置目录，容器和宿主机共享一个 pnpm 目录，达到节俭空间
   • 还能够挂载一些其余的，比方 .gitconfig、.npmrc 等，能够本人去扩大

在挂载的时候要留神，如果是 bind 挂载，那么宿主机的目录必须存在，否则会报错

7. runArgs：docker run 前面接的参数
8. build.args：docker build 前面接的参数，能够设置变量，传入 Dockerfile
9. 让容器与宿主机共享 ssh 认证信息：Sharing Git credentials with your container

最初

本我的项目地址：https://github.com/astak16/devcontaienr

仅供学习应用，如果用于工作中，请自行配置相干参数

欢送大家提出意见和倡议，一起学习，一起提高