巨硬赛高 - wsl2搭建企业级前端开发环境指北

himozzie
1,385 阅读5分钟

写在前面

使用 wsl2 开发，项目代码放在子系统linux，vscode安装在宿主机 windows，请务必使用插件 remote - WSL开发，千万不用直接用 宿主机 windows安装的vscode直接打开子系统linux的项目，否则进行代码编译的时候，io会非常弱鸡，编译巨慢，他俩之间通信非常耗时。如果用 wsl1，io 是正常的是在底层一些支持上，肯定没有 wsl2 香。此外，根据观察，似乎 wsl2 某些情况下，内存释放有点问题，待深入研究

省掉 mac + 4k 屏的钱，兼顾工作 + 娱乐，起码目前从事的医疗前端，一些工业软件，例如 3d slicer 、图形学用到 gpu cuda ，只能在 windows / ubuntu 上玩

安装 wsl

前置条件，主板 bios 开启 intel cpu 虚拟化

巨硬 AppStore 如果打不开、转圈 -> 关闭小飞机 或者 ipv4 改 host 4.2.2.2

  • windows terminal 必备，在 巨硬 AppStore 下载

安装教程 · 巨硬官方文档

ubuntu软件源

进入 wsl2 系统后，更改下国内镜像源

阿里开源镜像站

下面是 ubuntu20.04 用的

# 备份apt默认源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
sudo vim /etc/apt/sources.list

# 替换 srouces.list 阿里镜像仓库
deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse

# deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
# deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

# 更新apt
sudo apt upgrade
sudo apt update

安装 zsh

主题是自带的ys，朴素大方

image.png

注意区分用户，.zshrc在安装当前用户的目录下，ubuntu 换用户，会自动更换 shell 的

# 安装
sudo apt install zsh
# 将 zsh 设置为默认 shell
chsh -s /bin/zsh
# 检查，若没成功，重启试试看
echo $SHELL

安装 oh-my-zsh

如果遇到 443 confused，访问 https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh，复制内容，手动 vim 新建一个 oh-my-zsh.sh，粘贴内容进去，然后 bash ./oh-my-zsh.sh

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

配置 oh-my-zsh 主题/插件/alias

安装插件

  • 自动补全:
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
  • 代码高亮:
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

修改当前用户目录下的 .zshrc

# 主题
ZSH_THEME="ys"
# 引入插件
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

# alias
alias cls='clear'
alias ga='git add'
alias gc='git commit -m'
alias gp='git push'
alias gf='git fetch'
alias update='sudo apt update'
alias upgrade='sudo apt upgrade'
alias install='sudo apt install'

# windows文件管理器打开wsl文件 
alias open='explorer.exe'

安装 Nodejs

巨硬官方文档

安装完注意文字提示

# =>Appending nvm source string to /home/mozzie/.zshrc
# => Appending bash_completion source string to /home/mozzie/.zshrc
# => Close and reopen your terminal to start using nvm or run the following to use it now:

照它说的做

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

默认写到当前的shell，上面设置过zsh了，其余的fish、tmux可能无法正常调用

验证nvm安装 nvm ls，会看见类似

iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

安装 nodejs stable，具体 nvm 使用略，总之很舒服

nvm install node
# node -v | npm -v 验证安装版本

外网/LAN 访问 wsl2 服务

wsl1默认外部网络可以直接访问到子系统内部服务，wsl2巨硬正在改善这一体验

巨硬官方解释

When using a WSL 1 distribution, if your computer was set up to be accessed by your LAN, then applications run in WSL could be accessed on your LAN as well.

This isn't the default case in WSL 2. WSL 2 has a virtualized ethernet adapter with its own unique IP address. Currently, to enable this workflow you will need to go through the same steps as you would for a regular virtual machine. (We are looking into ways to improve this experience.)

Here's an example PowerShell command to add a port proxy that listens on port 4000 on the host and connects it to port 4000 to the WSL 2 VM with IP address 192.168.101.100

解决办法：

netsh interface portproxy add v4tov4 listenport=4000 listenaddress=0.0.0.0 connectport=4000 connectaddress=192.168.101.100

注意端口覆盖的问题，避免 windows 端口和端口 wsl2 冲突

netsh 端口映射

  • listenaddress: 监听地址, 0.0.0.0 表示匹配所有地址

  • listenport: 监听的 windows 端口

  • connectaddress: 转发到 wsl2 的 ip地址, 这里设置为localhost，默认从 windows 可以通过localhost 访问 wsl2

  • connectport: 转发到 wsl2 的端口

例如 windows 的 ip 为 192.168.1.100，监听 windows 的 3000 端口，转发到 wsl2 ip localhost 的 3000 端口

# windows-terminal 管理员权限执行
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=localhost
# 删除端口监听
netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=3000

配置 windows defender 防火墙入站规则

新建规则 -> 端口 -> TCP / 特定本地端口(3000) -> 允许链接 -> 下一步 -> 取个名字 -> Done

访问 docker

windows 宿主机安装 docker desktop，选择直接安装在 wsl 子系统中，设置 -> 资源 -> WSL INTEGRATION 打开 对应的 linux发行版，即使用

例如：搞个 mysql 容器，反正开发环境

# pull
docker pull mysql:5.7.38

# 趁机新建 brdige
docker network create --driver bridge --subnet=172.21.0.0/16 wsl2

# 生产 mysql 5.7.38 容器
docker run --restart=always --privileged=true -p 3306:3306 --name mysql --net wsl2 --ip 172.21.0.5 -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7.38

如何接上 mysql -> docker 容器的服务呢？分两种情况：

  • 宿主机: 也就是windows，通过 localhost:3306 接到数据库，或者使用 ip addr 子系统的 inet：3306 接上去
  • LAN局域网: 如果宿主机的ip是 192.168.1.100，加上 3306 也可以访问，无需配置 windows defender 入站规则

原因： docker-desktop 安装 选择装在wsl中，但并非 ubuntu20.04，而是一个单独的 linux 环境，估计已经帮我们做好的配置，很贴心

image.png

默认 wsl root 用户登录

默认用户看个人使用习惯了，不推荐

# 在 windows terminal中 ，输入：wsl -l 查看默认子系统，例如 Ubuntu-20.04
Ubuntu2004 config --default-user root
avatar
文章
阅读
粉丝