Web開発のためのWSL 2の設定

This post was originally posted on my personal blog: xzhan.me

最近、WSL 2はWindowsプレビューの遅いリングに着陸しました.WSL自身のファンとして、私はそれを試してみて、それがテーブルにもたらす改善されたI/Oパフォーマンスを楽しむことを熱望している.それで、更なる遅れなしで、私は選ばれて、Win 10 2004にアップグレードして、WSL 2を可能にしました.しかし、(しかし、“常に”がある)すべてのものはまだ書くときにはまだ滑らかにされていません.このポストでは、私はDJangoウェブ開発ワークフローのためにWSL 2をセットアップする私の経験について書きます.

Zsh

WSL 2 I/O Performance Catch

Exclude Windows PATH

Zsh History Search & Starship

Typeface & Nerd Font

Python & Node

Web & Database

Install database in WSL

Accessing database Running on Windows from WSL

VS Code

Summary

ZSH

マイ.zshrc :

# enabling some built-in features
zstyle ':completion:*' menu select
autoload -U compinit && compinit
HISTFILE=~/.zsh_history
HISTSIZE=10000
SAVEHIST=1000
setopt SHARE_HISTORY

# personal aliases
alias mooc="cd /home/xzhan/Development/MOOC"
alias proj="cd /home/xzhan/Development/Projects"
alias pk="cd /home/xzhan/Development/Packages"
alias wk="cd /home/xzhan/Development/Work"
alias da="deactivate"
alias dcu="docker-compose up"
alias dcud="docker-compose up -d"
alias dex="docker-compose exec"
alias dcd="docker-compose down"
alias dcs="docker-compose stop"
alias dcl="docker-compose logs"
alias vim="nvim"
alias ls="lsd"
alias ll="lsd -l"

# added for vscode
alias code="/mnt/c/Users/zhanx/AppData/Local/Programs/'Microsoft VS Code'/bin/code"

# added for miniconda3
export PATH="/home/xzhan/miniconda3/bin:$PATH"

# added for pipenv
export PIPENV_VENV_IN_PROJECT=True
eval "$(pipenv --completion)"

# added for rust
export PATH="/home/xzhan/.cargo/bin:$PATH"

# added for homebrew
export PATH="/home/linuxbrew/.linuxbrew/bin:$PATH"

# added for nvm
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# added for zsh-history-substring-search
source /home/linuxbrew/.linuxbrew/share/zsh-history-substring-search/zsh-history-substring-search.zsh
bindkey "$terminfo[kcuu1]" history-substring-search-up
bindkey "$terminfo[kcud1]" history-substring-search-down

eval "$(starship init zsh)"

ここで注意を払ういくつかのこと

WSL 2 I / Oパフォーマンスキャッチ

WSL 2には、I/O性能が大幅に改善されていますが、Linuxパーティションのみにあります.のようにthis documentation WSL 2は、クロスOS I/Oタスクを実行するとき、非常に遅いパフォーマンスを持っています.結果は以下の通りです.

zshのシェルプロンプト/プラグインではあまり受け入れられないパフォーマンスですoh-my-zsh or starship . 私は直接の理由を特定するためにこれらのプロジェクトの内部実装について十分に知りません🙃:

スロースタートアップのパフォーマンス時には、WSLのプロンプトで15秒以上を開始することができます.これを緩和する1つの方法は、Windowsパスの取り込みを除外することです.これは次の点で詳しく説明されます.

あなたが興味があるならばthis Github issue . 問題が明らかに知られていて、活発に働いているので、+ 1コメントで糸をスパムから身につけてください.

Windowsパスを除外する

前述のように、Windowsパスを除いていくつかの良いパフォーマンスを高めることができます.あなたがWindowsプログラムに頼りないならば、あなたは安全にこれを加えることによってそれを除外することができます/etc/wsl.conf :

[Interop]
appendWindowsPath = False

しかし、VSのコードは?😱私の友人を心配しないでください.私はあなたがカバーしている.zshrc ファイル

alias code="/mnt/c/Users/zhanx/AppData/Local/Programs/'Microsoft VS Code'/bin/code"

この別名を使用すると、現在はcode WSL 2の内部でコマンドを行います.

ZSH履歴検索と宇宙船

何トンかの実験で、中でいくつかを見ることができますthis GitHub issue , 私のZSHによる私のZSHは、WSL 2で遅いことがわかりました.少なくとも私は好きです.私はそれが本当に箱の素晴らしくて使えるZSHを構成するのを助けるので、大ファンでした.しかし、それは私が本当に必要でないフードの下であまりに多くのものを含みます.私が本当に好きである機能のいくつかは以下の通りです.

メニューのようなメニューは、タブを押すと、内蔵され、私の初めに示すように有効にすることができます.zshrc

素敵なテーマを探しています.私は本当にspaceship theme

矢印キーで歴史検索

しばらく探した後、私は着陸したstarship , 錆動力と宇宙船に触発されたシェルシェルプロンプトもPowerShellで動作します!🤗), そして、この素晴らしいzsh-history-substring-search プラグイン.私は後者を経由してインストールhomebrew . 閉じるこの動画はお気に入りから削除されています.zshrc ファイル.

フォントとフォント

宇宙船のテーマのユーザーから期待するように、私はアイコンとemojisが好きです.しかし、すべてのemojisはすべてのOS上のすべての端末で良い見ていない.一方、NURDフォントのアイコンは、一貫性があり、VSのコードのビルトイン・ターミナルでより優れています.あなたは見つけることができますa preset config from starship .
素敵な書体も素晴らしいCLIの経験に重要です.熱心なConsolasファンとして、私は常にすべてのシステムの向こう側に使用できるオープンソースの選択肢を探していました.幸運にも、その任務は最近成し遂げられました.Code New Roman とそのnerdフォントバージョンCodeNewRoman Nerd Font . あなたがコンソールの愛を共有する場合は試してみてください!

Pythonとノード

お気づきかもしれませんがminiconda and nvm Pythonとノード/NPMのバージョン管理.単に実行してインストールできます.

# miniconda
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
sh ./Miniconda3-latest-Linux-x86_64.sh

# nvm
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# and add the nvm-related scripts to your .zshrc
nvm install --lts

あなたがアナコンダを知っているならば、minicondaはそれのほんの少しの版です.私はシステムPythonからの分離のためにそれを使用するのが好きです.Conda、依存マネージャManicondaを使用すると、また、アップグレードを必要とするパッケージを識別することができますし、衝突を解決するときには、Pythonのバージョンをバンプします.書き込み時にminicondaにはPython 3.7が付属しています.しかし、簡単にPython 3.8にアップグレードできます.

conda install python=3.8

あなたがアップグレードしたいならば、私がすでにインストールされる1ダースのパッケージで若干の失敗を経験したので、Minicondaをインストールした後にこの権利をしてください.私の目的のために、Djangoは2.2.8からPython 3.8をサポートしています.

Webデータベース

ここでは、より少しのトリッキーな部分が来ます.IIRC、以前はWSL 1では、WSLの内部からホスト(Windows)データベースにアクセスできます.WSL 2のアーキテクチャ変更によって、あなたは箱からそれをすることができません.こちらでthis section と言う.

To access a Windows network application you'll need to use the IP address of your host machine.

あなたはそうすることができますcat /etc/resolv.conf WSLの内部で、「ネームサーバ」の後にIPアドレスをコピーして、あなたのCLIでそれを使ってください

簡単にWebサービスに十分な.しかし、データベースについてはどうですか?さて、ここで2つのオプションがあります.

データベースのインストール

より簡単なオプションの一つは、WSL 2内にデータベースサーバーをインストールすることです.これは、任意のUbuntuベースのディストリビューションでデータベースをインストールすると同じです.私のプロジェクトはMariadbを使用し、見つけることができますthe official instructions here . データベースサーバーを起動することができますsudo service mysql start . 問題はインストール後に来る:どのように私はWindowsからDataGrip/DBeaver/Sequel Proのような私のお気に入りのGUIツールを使用してデータベースを検査するのですか?
まず、Windowsホスト上で実行されているデータベースサーバーがある場合は、データベースの実行中のポートのいずれかを変更してください.次に、WSL 2データベースをアドレスにバインドします0.0.0.0 . これらの設定は、次の行をあなたの/etc/mysql/my.cnf :
更新:私はちょうど最新のWSL 2とMariadbでテストし、それはbind-address=0.0.0.0 もう必要ない.

[mysqld]
port=3307 # or any port you like
bind-address=0.0.0.0

編集後、必ずデータベースサーバーを再起動してくださいsudo service mysql restart . これでWSLデータベースにアクセスできるようになりました127.0.0.1:3307 .

WSLからWindows上で実行中のデータベースにアクセスする

TL博士私は個人的には、このアプローチをお勧めしないので、より多くの回避策が必要です.
警告:このアプローチは、ホストとゲストマシンの両方のIPアドレスに依存します.ASUzume stated here , WSL 2はWSL 1と比較して仮想マシンのように動作します.しかし、これらのIPアドレスは固定されません!あなたは毎回何かを再構成しなければならないように、彼らはあらゆるリブートで変わります.

上のグラフに示すように、現在の設定では、WSL172.21.64.1 , のIPアドレスです/etc/resolv.conf . デフォルトでは127.0.0.1 WSL 2でWSL 2で実行中のネットワークアプリケーションにアクセスできます127.0.0.1:<port> このように.あなたは不思議に思うかもしれない172.17.131.186 この場合、そして、それはどこから来ますか?"🤔
それは大きな問題だ.データベースは、セキュリティの考慮から、デフォルトでリモートアクセスを許可しません.あなたがそうするならば、あなたは手動で指定されたIPアドレスへのリモートアクセスを与えなければなりません.まず最初にWSL 2からWindowsで実行されているMariADBに接続し、どうなるかを見てみましょう.

# Inside WSL 2
mysql -u root \
  -h 172.21.64.1 \ # replace1 172.21.64.1 with your own IP address in /etc/resolv.conf
  -p windows_db # replace windows_db with your own db name

この時点で、次のようなエラーメッセージが発生します.

# Inside WSL 2
> mysql -u local_pr -h 172.21.64.1 -p windows_db
Enter password:
ERROR 1130 (HY000): Host '172.17.131.186' is not allowed to connect to this MariaDB server

ここで我々得る172.17.131.186 , Windows上のWSL 2仮想マシンのIPアドレス.あなたがデータベースを打つことができるが、ちょうどアクセス権を持たないことを示すので、このエラーメッセージを見ることは実際に良いサインです.あなたが今する必要があるのは、リモートアクセス用のデータベースサーバーを設定し、WSL172.17.131.186 . MariADBの場合は、命令を見つけることができますhere . 次の手順に従い、MySQLクライアントコマンドプロンプトを起動し、ログインして入力します.

# Inside MySQL Client on Windows
GRANT ALL PRIVILEGES ON windows_db.* TO 'local_pr'@'172.17.131.186' IDENTIFIED BY 'my-new-password';
# again, replace the db name, ip address and password to your local ones

あなたはそれを有効にするためにMariADBサーバーを再起動する必要があります.すべてうまくいけば、WSL 2からWindows MariADBにアクセスできます.

# Inside WSL 2
> mysql -u local_pr -h 172.17.128.1 -p local_pr
Enter password:
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 15
Server version: 10.4.12-MariaDB mariadb.org binary distribution

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [local_pr]>

これで、Webアプリケーションの設定にデータベースホスト情報を置くことができます.たとえば、Djangoの設定ファイルでは

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'local_pr',
        'USER': 'local_pr',
        'PASSWORD': 'my-new-password',
        'HOST': '172.21.64.1',
        'PORT': '3306',
    },
}

対コード

マイクロソフトは本当にWSL上の開発ワークフローに大きなツールを提供します.いいえ価格は、選択の私のエディタはVSのコードです.WSLを使ったリモート開発についてthis guide あなたがそうしないならば、すべてはちょうどWSL 2にまだ適用されません、しかし、それはまだ素晴らしいガイドです.我々が最も必要とするものはRemote - WSL 拡張.それがインストールされているので、我々は今すべての作業ディレクトリにcode . , コードを開くと作業を開始開く.必要な拡張モジュールをインストールし、Windows上のLinux Devワークフローをお楽しみください.

概要

この投稿ではWSL 2をWeb開発に設定する方法について説明しました.アスペクトは、私のzshの依存関係なしでzshを設定したり、Pythonとノードをインストールしたり、ウェブ開発用のデータベースを設定したりすることができます.
最後に、WSLプロジェクトの背後にある素晴らしい人々に感謝します!💖 これを可能にするためのおかげで、私は本当に最初の公式リリースを楽しみにしています!
私は、あなたがこのポスト役に立つと思います.おかげで停止!