Mono Works

チラシのすきま

hugo環境を含めた WSLから WSL2への移行

これまで WSL上で Ubuntu-18.04を使っていて不自由なかったんだけど、catt(Cast All The Things)というコマンドを使ってみようとしたら、うまく導入できなかった。あれこれ試して、何が原因だったかすっかり忘れてしまったけど、最終的に下記環境にすることで cattコマンドを実行できた。

TOHO CINEMAS Hibiya 2021-03-15 Evangelion: 3.0+1.0 Thrice Upon a Time

  • WSL2(Windows 10 20H2 ビルド19042)
  • Ubuntu 20.04
  • Python 3.8

と、ここまではよかったんだけど、WSL2にすることで hugo環境がうまく動作しなくなったので、対処方法も含めて WSL2導入(移行)方法をメモしておく。まあ、cattコマンド使いたいだけなら、Raspberry Pi使えば良かったんだけど、せっかくだから WSL2に全面移行してみた。

WSLから WSL2への移行

ざっくり Microsoftの公式サイトに書かれてる通りだが、ちょくちょく あれ?どこいった?ということがあるので、現時点での WSL2導入方法を抜粋。

  1. “Linux 用 Windows サブシステム” オプション機能を有効にするため、PowerShellを管理者として実行し、下記コマンドを実行

    dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
  2. “仮想マシン プラットフォーム” オプション機能を有効にするため、PowerShellを管理者として実行し、下記コマンドを実行

    dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  3. PCを再起動

  4. x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロードして実行

  5. WSLの規定バージョンを WSL2にするため、PowerShellで下記コマンドを実行

    PS > wsl --set-default-version 2
  6. Microsoft Storeから Ubuntu 20.04 LTSを導入

  7. Ubuntu 20.04導入後、一度自動で起動するのでアカウントとパスワードを設定

  8. wsl -l -vコマンドで Ubuntu 20.04が WSL2でデフォルト利用となっていることを確認(*印がデフォルト利用、Ubuntu 18.04から移行した場合は下記要領で変更)

    # ディストリビューションに割り当てられている WSLバージョンとデフォルト利用を確認する場合
    PS > wsl -l -v
    	  NAME            STATE           VERSION
    	  Ubuntu          Running         2
    	* Ubuntu-20.04    Running         2
    
    # Ubuntu 20.04 の規定バージョンを WSL2 にする場合
    PS > wsl --set-version Ubuntu-20.04 2
    
    # デフォルト利用を Ubuntu 20.04 にする場合
    PS > wsl --set-default Ubuntu-20.04

WSL2のホームディレクトリ

WSL2のホームディレクトリは /home/{ユーザー名}となり、Windowsシステムからはネットワーク上のドライブ(\\wsl$\Ubuntu-20.04\home\{ユーザー名}\)として見える。WSLの時は、/mnt/c/Users/{ユーザー名}/hugo配下で作業をしていたが、これだと WSL2からは取扱いが不便 *1 だったので、/home/{ユーザー名}/hugo配下に作業環境を移動した。

VSCodeは、アプリを終了しても開いていたファイルなど含めて、最後の作業状態をそのまま復元して起動してくれるが、\\wsl$配下のファイルを開いていても、Windows再起動後に自動でファイルを開いてくれなかった。これは、\\wsl$をネットワークドライブに割り当てることで解決した。

VSCodeをリモート WSLで作業するように変更

ネットワーク越しに Ubuntuをリモート操作することになるので、VSCodeに Remote - WSLを導入して、画面左下の><をクリック。Remote-WSLで New Windowを選択すると、リモートウインドウが開くので、ここを拠点として作業を開始するようにした。

起動したばかりのリモート WSLは、WSL環境的にまっさらな状態なので、以前書いた記事にならって再度環境構築をおこなった。

Windowsの PATHを一部だけ引き継ぐ

WSLでは、デフォルトで Windowsの PATH(/mnt/c/~)が通っている。WSLだとこれでも良かったが、弊害もあるようだ。何より WSL2では Windowsと別システムとして稼働していることもあり、/etc/wsl.confに下記を追記して、Windowsの PATHを引き継がないようにする。

[interop]
appendWindowsPath = false

ただし、システムコマンドと VSCodeは Windows側のものを利用したいので、.bashrcに下記を追記して PATHを通した。

# Windows PATH
export PATH="$PATH:/mnt/c/Windows:/mnt/c/Windows/System32"

# VSCode PATH
export PATH="/mnt/c/Program Files/Microsoft VS Code/bin:$PATH"

hugo環境の見直し

現在利用している hugoのバージョンは v0.56.3とかなり古い。新しいバージョンにすると、ビルド後の HTML構成が微妙に変わってしまうことが分かっているので、様子見している。この hugoの作業環境を /mnt/c/Users/{ユーザー名}/hugo配下から /home/{ユーザー名}/hugo配下に変更したことで、以下の作業が必要になった。

単純に Windows上でネットワークドライブ(\\wsl$\~)にファイルを移動した場合、リモート WSLの Gitでは、すべてのファイルがコミットされていない変更として認識されてしまったので、リモート WSL環境に作業環境のリポジトリをクローンした。SSH鍵の設定とクローンについては、以前書いた記事にならって作業をおこなった。

最後に、hugo作業用に作成していたスクリプトの環境変数を今回の移行に合わせて変更して、hugo環境の再構築が完了。

# 環境変数:hugoの作業ディレクトリ
readonly HUGO_DIR="/home/{ユーザー名}/hugo/{フォルダ名}"

# 環境変数:VSCode 実行ファイルの場所
readonly VSCODE_DIR="code"

なお、初期設定では WSL2内のサーバには localhostで接続できないといった記事をいくつか見かけたが、時が解決してくれたのか、hugoのおかげか、今の環境だとこれまで通りlocalhost:1313で接続できている。よかったよかった。

WSL2移行後の感想など

hugoの動作がめちゃくちゃ速くなった。いやこれまでが遅すぎただけで、おそらくこれが本来の速度なんだろう。Windows PCがやっと Gemini PDAを追い越したことを実感できる。

参考サイト


  1. hugo serverには、ファイルが更新された際に自動で再ビルドされるホットリロード機能という便利な機能があるが、WSL2で /mnt/ 配下に置いたファイルを更新しても、ホットリロードが機能しなくなる。これを回避するため、/home/{ユーザー名}/hugo配下にファイルを配置して作業することにした。

コメント

コメントなどありましたら、GitHubのディスカッションへお願いします。(書き込みには、GitHubのアカウントが必要です)
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" @pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内
// JS遅延読込み (function(window, document) { function main() { // GoogleAdSense読込み var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す // 旧コードの場合、コメントアウトしたままにする //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX'; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); } // 遅延読込み var lazyLoad = false; function onLazyLoad() { if (lazyLoad === false) { // 複数呼び出し回避 + イベント解除 lazyLoad = true; window.removeEventListener('scroll', onLazyLoad); window.removeEventListener('mousemove', onLazyLoad); window.removeEventListener('mousedown', onLazyLoad); window.removeEventListener('touchstart', onLazyLoad); window.removeEventListener('keydown', onLazyLoad); main(); } } window.addEventListener('scroll', onLazyLoad); window.addEventListener('mousemove', onLazyLoad); window.addEventListener('mousedown', onLazyLoad); window.addEventListener('touchstart', onLazyLoad); window.addEventListener('keydown', onLazyLoad); window.addEventListener('load', function() { // ドキュメント途中(更新時 or ページ内リンク) if (window.pageYOffset) { onLazyLoad(); } }); })(window, document);