[docker] DevContainer高效开发(第二篇):前端开发体验

简介: 上面的配置只是最基本的配置,大部分情况我们是需要自定义配置,让容器更符合我们的需求。自定义配置就需要用到 Dockerfile,这个文件是 docker 的配置文件,可以在里面安装软件,配置环境等等。Dockerfile 的语法可以参考 官方文档。然后根据自己的需求编写 Dockerfile# 设置变量,由 .devcontainer.json 中的 args 传入# 指定 node 版本# 设置编码# 设置工作目录# 挂载 volume# 设置 bash 为默认 shell。

@[toc]

1.基本使用

(1) 首先在 vscode 中安装 Dev Containers 插件
image.png

(2) 按快捷键 command + shift + p 打开命令面板,输入 add container configuration
image.png

(3) 输入 node,这里以 Node.js 为例,其他语言也是类似的
image.png

(4) 选择 node 版本,这里选择 20
image.png

(5) 根据需求选择一些软件,可跳过,直接点确定
image.png

通过这样设置,就有了一个最基本的 node 开发环境,可以在 vscode 中开发。

(6) 再次按快捷键 command + shift + p 打开命令面板,输入 rebuild and reopen in container,回车,等待即可。等安装完之后,就可以在 vscode 中开发了,这时你会发现,vscode 中的 terminal 已经变成了 docker 中的 terminal,你可以在里面运行 node 命令了
image.png

(7)下次打开容器,只需要按快捷键 command + shift + p 打开命令面板,输入 reopen in container,回车即可

2.自定义配置

上面的配置只是最基本的配置,大部分情况我们是需要自定义配置,让容器更符合我们的需求。自定义配置就需要用到 Dockerfile,这个文件是 docker 的配置文件,可以在里面安装软件,配置环境等等。Dockerfile 的语法可以参考 官方文档。然后根据自己的需求编写 Dockerfile

(1) 这里以 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

(2) 写好的 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"
}

3.node 版本选择

当我们打开 node 官方镜像时,会发现有很多版本:
稳定版:通常这类镜像都很大,但是功能很全

  • bookworm —— Debian 12 稳定版
  • bullseye —— Debian 11 稳定版
  • buster —— Debian 10 稳定版
  • stretch —— Debian 9 稳定版
  • jessie —— Debian 8 稳定版
  • wheezy —— Debian7 稳定版

轻量版:这类镜像很小,只保留了 node 的基本运行环境

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

官方推荐使用稳定版,如果对内存没要求可以使用,毕竟功能齐全,软件就不用自己装了。我推荐的是轻量版 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

4. 其他

项目地址:https://github.com/astak16/devcontaienr,仅供学习使用,如果用于工作中,请自行配置相关参数

目录
相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
51 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡