关于前端:手把手提高开发体验devcontainer

之前看过方应杭的一期工作流视频，讲他是如何配置开发环境的。讲真，这期视频给我一丝震撼，原来不必虚拟机也能在 linux 上开发，然而它的配置过于简单，我想配置一套本人的一套开发环境

视频中的 remote-container 曾经更名为 dev-container，而 0.245.2 以上版本的 dev-container 有问题，会报 ”An error occured setting up the container – Remote Docker”，在 Issues 中有人给出了办法是降级到 0.245.2

当降级到 0.245.2，就能够欢快的应用 dev-container 了

当初咱们曾经胜利了 dev-container 插件

当初咱们要做的是，通过 dockerfile 生成一个 linux 容器，并在这个容器中开发

小试牛刀

FROM centos:8

RUN uname -a

RUN cat /etc/os-release

咱们基于 centos:8 来构建一个镜像，其中，打印零碎名和查看零碎

点击增加终端，就进入容器中了，这个容器就是咱们基于 vscode 的 dev-container 插件

如果只是个裸机，是万万不行的，咱们须要装置一些开发环境和利用，进步咱们的开发效率

更新所有包

在更新包之前，咱们要先批改 centos 的镜像源

RUN cd /etc/yum.repos.d/
RUN sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*
RUN sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*

批改成国内的镜像，再更新包

RUN yum update -y

下载 vim

先下载 vim

RUN yum install vim -y

如何配置，怎么配置 vim，介于还处于老手阶段，就惯例操作即可，不必配置什么

下载 oh-my-zsh

如果冒冒失用它官网的下载链接，会报错

RUN sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

意思是说 Github 的 raw.githubusercontent.com 域名解析净化，拜访不了

解决办法有不少，如通过批改 hosts 解决此问题，先在 ipaddress 查问 raw.githubusercontent.com 的实在 IP，在批改 hosts

vim /etc/hosts

增加 199.232.68.133 raw.githubusercontent.com

从新下载 zsh

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

这办法只能在 linux 中应用，如果你要用 dockerfile 中批改 /etc/hosts，就行不通，因为 /etc/hosts 文件是只读的，笔者在这里花了不少工夫想解决，但还是没找到解决办法

还有一种办法是批改下载源，换成国内地址

sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"

并将默认命令行批改成 on-my-zsh

RUN chsh -s /bin/zsh

但这个办法须要两个前提，一是须要下载 git

RUN yum install git -y

二是因为 centos 8 零碎中并未带 chsh 命令工具，会提醒 chsh: command not found，起因是零碎没有自带的 util-linux-user 工具包导致，所以在执行 chsh 命令前，先装置它

RUN yum install util-linux-user -y

如此，咱们就配置好了一个基于 centos 的有 vim、on-my-zsh 的 linux 环境

残缺的 dockerfile 如下所示：

FROM centos:8

RUN uname -a

RUN cat /etc/os-release

# 批改镜像源
RUN cd /etc/yum.repos.d/
RUN sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*
RUN sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*

# 更新零碎
RUN yum update -y

# vim
RUN yum install vim -y

# chsh
RUN yum install util-linux-user -y

# git
RUN yum install git -y

# oh-my-zsh
RUN yum install zsh -y
RUN sh -c "$(curl -fsSL https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh)"

RUN chsh -s /bin/zsh

关有这些不够，还要下载前端环境、如 node、pnpm，还有后端环境，笔者最近也对 ruby 很感兴趣，也会在这里装置 ruby 环境

前端环境

咱们采纳 nvm 来管制 node 版本

装置 nvm 的形式有很多种，像方应杭是下载源码，再拷贝到容器中，如果没有网络限度，也能够用 curl 下载等等，我采纳的是 git install

ENV NVM_DIR /root/.nvm
RUN git clone https://github.com/nvm-sh/nvm.git /root/.nvm/
# RUN git checkout v0.39.3
RUN sh ${NVM_DIR}/nvm.sh &&\
    echo '' >> /root/.zshrc &&\
    echo 'export NVM_DIR="$HOME/.nvm"' >> /root/.zshrc &&\
    echo '[-s"${NVM_DIR}/nvm.sh"] && {source"${NVM_DIR}/nvm.sh"}' >> /root/.zshrc &&\
    echo '[-s"${NVM_DIR}/bash_completion"] && {source"${NVM_DIR}/bash_completion"}' >> /root/.zshrc

再通过 nvm 下载最新版本的 node

RUN nvm install stable

然而这样会报错，说 nvm: command not found，为什么这样，不求甚解，去找另一种解决办法

笔者抉择先装置个默认版本的 node 和 npm，依照这里的包治理装置

RUN dnf module install nodejs:16

默认 dnf module install nodejs 会装置 v10 版本，太低了，最高 16，选新不选久

再下载 pnpm，将其设为包管理器

RUN curl -fsSL https://get.pnpm.io/install.sh | sh -

如此一来，前端的开发环境以及 node 环境就再这个 dockerfile 中了

ruby 环境

我找的教程是这个，日本人做的，内容很齐全，依照步骤，能运行好环境

RUN dnf module install ruby:3.0 -y
RUN gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
RUN curl https://dl.yarnpkg.com/rpm/yarn.repo > /etc/yum.repos.d/yarn.repo
RUN dnf -y install ruby-devel rpm-build make gcc gcc-c++ gcc-gdb-plugin libxml2 libxml2-devel mariadb-devel zlib-devel libxslt-devel
RUN gem install nokogiri -- --use-system-libraries
RUN gem install rails --version="~>7.0"

如此一来，咱们的开发环境就初步弄好了，我将它公布到 dockerhub 上，如果有须要，能够以此革新

总结

这篇文章花了我不少工夫，次要很多 linux 知识点为涉猎过，之前也没在虚拟机上配置 linux 的教训。不过还好，算实现了，如此一来，开发时就能够用 vscode + linux 开发利用了，剩下的就是相熟它

参考资料

• 山竹记账：开发环境
• 方应杭 Oh My Docker
• oh-my-zsh, 最好用的 shell，没有之一
• Dockerfile 实现批改容器 hosts 文件内容
• Starting ssh-agent on Windows 10 fails: “unable to start ssh-agent service, error :1058”
• VS Code: Remote Container: Using SSH