配置 GitHub Codespaces 初始环境

我想在 Codespace 里用 ohmyzsh,于是在 GitHub 寻找办法。我真的找到一个,但是直接拿过来用不了,初始化环境时很多错误。经过我多次修改能够使用了,预装了 ohmyzsh 和 nvm,如果你想尝试可以使用我的新仓库模板 tianheg/new-repo-template

文件结构:

1.devcontainer
2-->devcontainer.json
3-->Dockerfile
4-->setup.sh

devcontainer.json:

 1{
 2    "name": "Codespaces Basic Starter",
 3    "extensions": [
 4        "eamodio.gitlens",
 5        "deibit.devdocs",
 6        "knisterpeter.vscode-github",
 7        "github.copilot",
 8        "oderwat.indent-rainbow",
 9        "yzhang.markdown-all-in-one",
10        "davidanson.vscode-markdownlint",
11        "christian-kohler.path-intellisense",
12        "alefragnani.project-manager",
13        "tds.taptap-vscode-theme",
14        "octref.vetur",
15        "vscode-icons-team.vscode-icons",
16        "wakatime.vscode-wakatime",
17        "guoruibiao.wordcount",
18        "formulahendry.code-runner",
19        "dbaeumer.vscode-eslint",
20        "github.vscode-pull-request-github",
21        "budparr.language-hugo-vscode",
22        "ritwickdey.liveserver",
23        "eg2.vscode-npm-script",
24        "xlthu.pangu-markdown",
25        "esbenp.prettier-vscode",
26        "ms-python.python",
27        "stylelint.vscode-stylelint"
28    ],
29    "dockerFile": "Dockerfile",
30    "settings": {
31        "terminal.integrated.defaultProfile.linux": "zsh"
32    }
33}

Dockerfile:

 1FROM ubuntu:20.04
 2
 3WORKDIR /home/
 4
 5COPY . .
 6
 7ENV SHELL /bin/zsh
 8
 9RUN sh ./setup.sh
10
11RUN echo 'export NVM_DIR="$HOME/.nvm"' >> "$HOME/.zshrc"
12RUN echo '\n' >> "$HOME/.zshrc"
13RUN echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm' >> "$HOME/.zshrc"

setup.sh:

 1## update and install some things we should probably have
 2apt-get update
 3apt-get install -y \
 4  curl \
 5  git \
 6  jq \
 7  sudo \
 8  zsh \
 9  autojump
10
11## install nvm
12curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
13
14## install oh-my-zsh
15sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
16git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.oh-my-zsh/plugins/zsh-syntax-highlighting # install on /root/
17git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/plugins/zsh-autosuggestions # install on /root/
18curl https://raw.githubusercontent.com/tianheg/config/main/shell/nodeys.zsh-theme --output ~/.oh-my-zsh/themes/nodeys.zsh-theme
19export USERNAME=codespace
20mkdir /home/$USERNAME
21cp -R /root/.oh-my-zsh /home/$USERNAME
22cp /root/.zshrc /home/$USERNAME
23sed -i -e "s/\/root\/.oh-my-zsh/\/home\/$USERNAME\/.oh-my-zsh/g" /home/$USERNAME/.zshrc # select "/root/.oh-my-zsh", replace it with "/home/$USERNAME/.oh-my-zsh"
24chown -R $USER_UID:$USER_GID /home/$USERNAME/.oh-my-zsh /home/$USERNAME/.zshrc
25curl https://raw.githubusercontent.com/tianheg/config/main/shell/zshrc_codespace --output ~/.zshrc
26sed -i "/# for examples/aif\ test -t l; then\nexec zsh\nfi" ~/.bashrc

上面的代码已经改过多次。每次修改要重新 Rebuild,要花费小 5 分钟时间。如果碰到网络不好的情况,Rebuild 就会失败。

一点一点解决这些小问题也是蛮有意思的。有的是文件夹不存在,有的是文件路径不对,有的是缺少软件,解决的时候不免急躁,因为总是不对,总是报错,很打击我的积极心。但是,在每次出错,我都耐着性子,根据错误日志定位错误,寻找解决办法。在这个过程中,接触了以前没接触的内容:

  • Dockerfile 的命令规则
  • 练习使用 Linux 指令 sed

也归纳了我的旧知识:

现在安装 Node.js, npm, yarn 只需要安装 nvm 即可。如上述文件中的命令那样,我已经预装了 nvm,安装 Node.js, npm, yarn 只需要以下命令:

1nvm install --lts # install Node.js, npm
2npm install -g yarn # install yarn

两个命令的顺序不能颠倒,因为第一个命令安装的 npm 是第二个命令能够执行的必要条件。

1sed -i "/# for examples/aif\ test -t l; then\nexec zsh\nfi"

上面这个命令是为了改变终端 Shell 的,Ubuntu 20.04 的默认 Shell 是 bash,我想用 zsh,于是需要在 .bashrc 的开头添加如下字样:

1if test -t l; then
2exec zsh
3fi

ref:

  1. https://github.com/microsoft/vscode-dev-containers
  2. https://github.com/codespaces-examples/base
  3. https://github.com/tianheg/new-repo-template