1. 程式人生 > 其它 >構建一個基於容器的開發環境

構建一個基於容器的開發環境

前言:GNU/Linux(以下簡稱Linux)是目前伺服器使用廣泛的系統,而開發人員使用的作業系統大多數卻是Windows。雖然現在主流的語言幾乎都支援跨平臺的特性,但在開發過程中仍然會因為平臺不一致導致一些莫名其妙的問題,最經典的當屬CRLF(回車換行符)在Windows和Unix系統間造成的問題。而Windows糟糕的軟體管理也一直被開發人員嫌棄,新機器裝一個齊全的開發環境往往要重複經歷開啟瀏覽器-搜尋軟體-下載軟體-手動安裝的過程,這個過程在Linux下利用包管理器往往只需要一行命令搞定。

但在國內,想要將Linux當做主力系統困難重重,常用的微信,釘釘,企業微信都沒有可用的第一方Linux客戶端,Linux下deepin-wine的解決方案也不盡完美,Windows下開一個Linux虛擬機器動輒幾十G的大小又顯得笨拙,這篇文章就介紹一下如何利用近年來火爆的容器技術搭建一個靈活,可複用,帶版本控制的開發環境。

前置條件

  1. Docker,Windows下則是Docker Desktop
  2. VSCode 或 JetBrains 全家桶

基於容器的開發本質上也就是遠端開發,這方面VSCode 與 JetBrains IntelliJ 的實現有區別:VSCode 直接在遠端環境執行,程式碼不儲存在本地,JetBrains 則基於FTP/SFTP/FTPS協議在本地與遠端程式碼同步,且配置有些繁瑣。本文使用VSCode做演示

一、構建映象

選擇一個你熟悉的Linux發行版,基於基礎映象構建自己的開發環境,個人偏愛Arch Linux,以這個發行版為例,拉取映象,並配置初始開發環境,我做了一個簡單的Dockerfile:

FROM docker.io/library/archlinux:latest

RUN sed -i '1i Server = http://mirrors.aliyun.com/archlinux/$repo/os/$arch' /etc/pacman.d/mirrorlist \
    && sed -i '1i Server = https://mirrors.tencent.com/archlinux/$repo/os/$arch' /etc/pacman.d/mirrorlist \
    && sed -i '$i [archlinuxcn]' /etc/pacman.conf \
    && sed -i '$i SigLevel = TrustAll' /etc/pacman.conf \
    && sed -i '$i Server = https://repo.archlinuxcn.org/$arch' /etc/pacman.conf \
    && sed -i -r 's/^NoExtract\s*=\s*.*/# \0/g' /etc/pacman.conf \
    && pacman -Syyu --noconfirm \
    && pacman -Sy --noconfirm archlinuxcn-keyring && pacman -Su --noconfirm\
    && pacman -Syy --noconfirm git vim neovim zsh oh-my-zsh-git jdk-openjdk jdk8-openjdk jdk11-openjdk \
    maven yay zsh python3 go nodejs npm yarn tmux python2 zsh-autosuggestions zsh-syntax-highlighting \
    zsh-theme-powerlevel10k ranger python-pip python-neovim wl-clipboard fzf ripgrep man-db \
    gcc clang base-devel wqy-zenhei noto-fonts-cjk wget unzip thefuck \
    && ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && pacman -Scc --noconfirm \
    && rm -rf /var/lib/pacman/sync/* /var/cache/pacman/pkg/* \
    && echo "" > /var/log/pacman.log

pacman 是Arch Linux 下的包管理器,如果你清楚Dockerfile裡的包都有什麼作用,可以適當增刪改,以上命令安裝了jdk python go nodejs 和一些好用的命令列工具,配置了國內的時區,添加了包倉庫的國內映象源。

之後執行構建命令

docker build -t arch-test .

包含基礎開發環境的映象就構建好了

二、配置VSCode

VSCode做到容器內開發的核心就是Remote Development Pack外掛,Docker外掛能增強體驗,搜尋安裝即可,而我們的核心是Remote Development Pack中的這個外掛

如果你安裝了Docker外掛,可以在側邊欄直接管理Docker容器並將VSCode附加到容器

沒有安裝的話,則只能通過ctrl + shift + p以命令的形式選擇並附加到容器

附加後的視窗如圖

前面提到,VSCode容器開發實際就是遠端開發,而VSCode的服務是跑在容器裡的,所以需要重新安裝擴充套件,截圖左側位置的按鈕點選即可在容器裡同步本地的拓展

至此基於容器和VSCode的開發環境已經能用了,體驗與Linux上的VSCode基本沒有差別,但還有很多可以優化的地方

三、容器配置

容器的一般應用場景是為了跑一組服務,一般不會對使用者許可權做管理,VSCode容器開發預設連線到容器也是root使用者,但對於一些強迫症使用者(比如我),想要用非root使用者開發當然也是支援的,ctrl + shift + p開啟命令面板輸入remote container config之後選擇就可以編輯當前容器或已存在容器的配置

容器支援以下配置:

{
// 附加VSCode程序時開啟的預設目錄
"workspaceFolder": "/path/to/code/in/container/here",

// 進入容器時自動安裝的擴充套件
"extensions": ["dbaeumer.vscode-eslint"],

// 容器配置,支援settings.json中的任意配置,設定後在當前容器中會覆蓋settings.json中的配置
"settings": {
    "terminal.integrated.shell.linux": "/bin/zsh"
},

// 自動轉發的埠
"forwardPorts": [8000],

// 連線時登入的使用者,不設定預設為root
"remoteUser": "vscode",

// VSCode和其子程序繼承的環境變數
"remoteEnv": { "MY_VARIABLE": "some-value" }
}

remoteUser項設定的前提當然是使用者已建立,所以先在容器內執行或在Dockerfile里加上以下命令

useradd -d /home/vscode -m vscode && passwd vscode

之後設定一下新使用者的密碼即可

容器內開發,除錯時跑服務的埠VSCode會自動檢測並轉發到本地,用localhost即可訪問,感知上與本地開發一樣。實際使用時會自動檢測,如果沒有自動檢測到,配置一下forwardPorts即可

VSCode自身也支援直接建立開發容器,個人認為不如命令列操作直觀,感興趣的話可以看下微軟官方文件Create a Dev Container

四、後續優化

大費周章去構建一個基於容器的開發環境只能做到統一開發和生產環境嗎?當然不是,統一環境是基本需求,我們完全可以再花點心思用上Unix系才有的一些命令列神器,讓終端好用到愛不釋手,這裡推薦一波本人在使用Linux過程中沉澱的工具:

  1. 丟掉預設難用的bash shell, 用zsh和外掛打造一個好用的shell:
    zsh & oh-my-zsh & powerlevel10k & zsh-autosuggestions & zsh-syntax-highlighting
  2. 終端複用器,讓你方便的管理終端,並在終端中斷後可以隨時繼續你的上一次工作:
    tmux & oh-my-tmux
  3. 終端內文字編輯、檔案瀏覽、檔案/檔案內容模糊搜尋:
    neovim & ranger & fzf & ripgrep
  4. 優化終端顯示效果,需要安裝修補字型,推薦nerd-fonts,倉庫中選擇一個喜歡的字型本地安裝,配置一下即可
  5. 直接啟動容器的話程式碼是在容器裡的,如果考慮到程式碼安全性,啟動的時候就配置一下程式碼資料夾的對映吧

上述工具要想做到好用免不了一些配置,這裡貼上我個人的vim zsh tmux配置以供參考,配置在github gist上長期維護,之後會專門寫一篇文章介紹這些工具的用法

最終效果展示:

總結

構建好的容器開發環境,利用docker映象的版本控制、遷移、上傳等特性可以做到靈活、複用,從此換電腦只需要遷移映象即可開發,告別Windows和Linux間莫名奇妙的環境問題。

參考文章:

【1】 https://code.visualstudio.com/docs/remote/remote-overview
【2】 https://docs.docker.com/desktop/

福祿·研發中心 福小文