🎉

WSL環境で「さくっ」と Devbox を試してみる

2022/12/25に公開

開発環境

1. はじめに

この記事は、jetpack-io Devboxをお試しする情報です。主に開発環境のアプリケーションパッケージバージョンをよく切り替えて使う方を対象としています。

【利用者像】:
- DevOpsな方々
- pyenv、virtualenv、VirtualBox、docker
- Microsoft Dev Box、Magento DevBox、Cloud Workstationsと聞いたらピンとくる方
【利用シーン】:
- 全工程

2. 出来上がるもの

各々のPC上にローカル環境でクリーンな開発環境の実行制御や管理ができるようになります。
具体的には、以下の示すようにPC1台に複数の開発環境を作り上げることが可能です。
通常OS上には複数バージョンのアプリケーションをインストールすることは出来ません。WSL・NixOS・Devbox を組み合わせて利用することによって、安心・安全に環境を切り替えて使うことが可能となります。

jetpack-io/devbox(Apache License)
https://github.com/jetpack-io/devbox

NixOS(MIT License)
https://nixos.org/
https://en.wikipedia.org/wiki/NixOS

Nix(LGPL License)
https://nixos.org/

NixOSのパッケージ構造

3. 環境構築

3.1. 前提:WSL の準備

前提としてWindows 11 OS ＋ WSL2が動作するようにしておきましょう。
※WSL2のインストール手順は様々なサイトで公開されていますので割愛します。

3.2. NixOS-WSL の準備

すでに先人の方が、WSL(Windows Subsystem for Linux)環境で NixOSを動作する rootイメージを公開されています。nixos-wsl-installer.tar.gzのダウンロードを行い、任意のフォルダに配置しておきます。

ダウンロードを行う

ダウンロード元：
https://github.com/nix-community/NixOS-WSL/releases/download/22.05-5c211b47/nixos-wsl-installer.tar.gz

ダウンロード先：
C:\download\nixos-wsl-installer.tar.gz

Windowsのスタートメニューからコマンドプロンプトを実行します。

コマンドプロンプトでは、以下のオペレーションを行います。

コマンドプロンプト

c:\xxxxxx> cd c:\　             ←カレントディレクトリの移動
c:\> mkdir C:\NixOS             ←NixOSのディスクイメージのフォルダ作成
c:\> wsl --import NixOS .\NixOS\ C:\download\nixos-wsl-installer.tar.gz --version 2
　　　　　　　　　　　　　　　 　 ← NixOSのディスクイメージを作成
c:\> dir NixOS　　　　　　　　　　←ディスクイメージを作成
c:\NixOS のディレクトリ
:
2022/12/25  02:35    <DIR>          .
2022/12/25  02:36       401,604,608 ext4.vhdx

c:\> wsl -d NixOS 　　　　　　　　← NixOS on WSL の起動
:
Unpacking root file system...
 307MiB 0:00:13 [22.8MiB/s] [========================================================================>] 100%
Activating nix configuration...
Copying /usr/share/applications
Copying /usr/share/icons
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
        LANGUAGE = (unset),
        LC_ALL = (unset),
        LANG = "en_US.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
setting up /etc...
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
        LANGUAGE = (unset),
        LC_ALL = (unset),
        LANG = "en_US.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
setting up /bin...
Cleaning up installer files...
finding garbage collector roots...
removing stale link from '/nix/var/nix/gcroots/auto/6yfbrv8wfkyl40wq6827lamr9m29z7wg' to '/build/nix/var/nix/profiles/per-user/root/channels-1-link'
removing stale link from '/nix/var/nix/gcroots/auto/zxi8v969la5n36bg7gs016wgcif4qjhp' to '/build/nix/var/nix/profiles/system-1-link'
deleting garbage...
deleting '/nix/store/ab5mixyq1zg0x5lnr5i7m4l5815fp1h8-wsl-prepare'
deleting '/nix/store/scr6balqjknqpgm7igd0b4pagmp2ldbl-installer.sh'
deleting '/nix/store/pmb55f6rk98cdycqf589vb3xpbg15k28-source'
deleting '/nix/store/cq6l0b0iv2y3gln3xi6nzxs57mz5rxws-tarball'
deleting '/nix/store/0p9v7yvblgxsds9pbsrir3af6gw0x77s-busybox-1.35.0'
deleting '/nix/store/5mism3qrfc3ah9ahvf7sczxy4bax9cgq-pv-1.6.20'
deleting unused links...
note: currently hard linking saves -0.00 MiB
6 store paths deleted, 309.05 MiB freed
Optimizing store...
5.74 MiB freed by hard-linking 3714 files
Starting systemd...

「Starting systemd」が表示されたあと、しばらく待ってから、一度 Windows をリブートします。

コマンドプロンプト

c:\> shutdown -r

Windows リブート後、再度コマンドプロントを実行し、以下のコマンドを実行します。

コマンドプロンプト

> cd c:\               ← カレントディレクトリの移動
> wsl -d NixOS   　　　← NixOS on WSL の起動
Copying /usr/share/applications
Copying /usr/share/icons
setting up /etc...
setting up /bin...
Starting systemd...

3.3. NixOS初期コンフィグレーション

(1) アクティベーション

bash(NixOS on WSL)

$ sudo /nix/var/nix/profiles/system/activate

(2) nix-channel の設定

どちらかを実行します。

bash(NixOS on WSL)＊推奨

$ nix-channel --add https://nixos.org/channels/nixos-22.11-small

bash(NixOS on WSL)

$ nix-channel --add https://nixos.org/channels/nixpkgs-unstable

以下のコマンドを実行します。

bash(NixOS on WSL)

$ nix-channel --update
unpacking channels...

3.4. Devboxインストール

(1) Devbox のインストールをします。

bash(NixOS on WSL)

$ curl -fsSL https://get.jetpack.io/devbox | bash
Devbox 📦 by jetpack.io
  Instant and predictable development environments and containers.

  This script downloads and installs the latest devbox binary.

Confirm Installation Details
  Location:     /usr/local/bin/devbox
  Download URL: https://releases.jetpack.io/devbox

? Install devbox to /usr/local/bin (requires sudo)? [Y/n] Y　← Y を入力しEnter

Downloading and Installing
✓ Downloading devbox binary... [DONE]
→ Installing in /usr/local/bin/devbox (requires sudo)...
✓ Installing in /usr/local/bin/devbox... [DONE]
✓ Successfully installed devbox 🚀

Next Steps
  1. Learn how to use devbox
     Run devbox help or read the docs at https://github.com/jetpack-io/devbox
  2. Get help and give feedback
     Join our community at https://discord.gg/jetpack-io

(2) bash のシンボリックリンク設定を行います。

bash(NixOS on WSL)

$ which bash            ←bashの所在を確認
/run/current-system/sw/bin/bash
$ ls -al /bin/bash
ls: cannot access '/bin/bash': No such file or directory
$ sudo ln -s /run/current-system/sw/bin/bash /bin/bash   ←シンボリックシンクを張る
$ ls -al /bin/bash
lrwxrwxrwx 1 root root 31 Dec 24 17:48 /bin/bash -> /run/current-system/sw/bin/bash

3.5. Devboxアプリケーションパッケージの構築

(1) フォルダを用意します。

bash(NixOS on WSL)

$ mkdir -p /mnt/c/environ/devbox-envA

(2) Devbox の初期設定を行います。

bash(NixOS on WSL)

$ cd /mnt/c/environ/devbox-envA
[nixos@pc:/mnt/c/environ/devbox-envA]$ devbox init
✓ Downloading version 0.2.0... [DONE]
✓ Verifying checksum... [DONE]
✓ Unpacking binary... [DONE]

(3) アプリケーションパッケージの追加を行います。

例としてpython3, go, nginx を追加してみます。

bash(NixOS on WSL)

[nixos@pc:/mnt/c/environ/devbox-envA]$ devbox add python3  ← 追加
Installing nix packages. This may take a while... done.

python NOTES:
python on devbox works best when used with a virtual environment (vent, virtualenv, etc). For example with python3:

> python -m venv .venv
> source .venv/bin/activate

Package managers like poetry (https://python-poetry.org/) automatically create virtual environments for you.

To show this information, run `devbox info python3`

python3 (python3-3.10.8) is now installed.

[nixos@pc:/mnt/c/environ/devbox-envA]$ devbox add go　 ← 追加
Installing nix packages. This may take a while... done.
go (go-1.19.3) is now installed.

[nixos@pc:/mnt/c/environ/devbox-envA]$ devbox add nginx　 ← 追加
Installing nix packages. This may take a while... done.

nginx NOTES:
nginx can be configured with env variables

To customize:
* Use $NGINX_CONFDIR to change the configuration directory
* Use $NGINX_LOGDIR to change the log directory
* Use $NGINX_PIDDIR to change the pid directory
* Use $NGINX_RUNDIR to change the run directory
* Use $NGINX_SITESDIR to change the sites directory
* Use $NGINX_TMPDIR to change the tmp directory. Use $NGINX_USER to change the user
* Use $NGINX_GROUP to customize.

Services:
* nginx

Use `devbox services start|stop [service]` to interact with services

This plugin creates the following helper files:
* /mnt/c/environ/devbox-envA/devbox.d/nginx/nginx.conf
* /mnt/c/environ/devbox-envA/devbox.d/nginx/fastcgi.conf
* /mnt/c/environ/devbox-envA/devbox.d/web/index.html

This plugin sets the following environment variables:
* NGINX_PATH_PREFIX=/mnt/c/environ/devbox-envA/.devbox/virtenv/nginx
* NGINX_TMPDIR=/mnt/c/environ/devbox-envA/.devbox/virtenv/nginx/temp
* NGINX_CONFDIR=/mnt/c/environ/devbox-envA/devbox.d/nginx/nginx.conf

To show this information, run `devbox info nginx`

nginx (nginx-1.22.1) is now installed.

出来上がったファイル devbox.json を確認します。

bash(NixOS on WSL)

[nixos@pc:/mnt/c/environ/devbox-envA]$ cat devbox.json
{
  "packages": [
    "python3",
    "go",
    "nginx"
  ],
  "shell": {
    "init_hook": null
  },
  "nixpkgs": {
    "commit": "52e3e8fafff4b16ccb7c52e9f0f5220552f03d04"
  }
}

(4) アプリケーション環境を切り替えます。

bash(NixOS on WSL)

$ devbox shell
Installing nix packages. This may take a while... done.
these 13 paths will be fetched (53.09 MiB download, 236.33 MiB unpacked):
  /nix/store/039g378vc3pc3dvi9dzdlrd0i4q93qwf-binutils-2.39
  /nix/store/1d6ian3r8kdzspw8hacjhl3xkp40g1lj-binutils-wrapper-2.39
  /nix/store/1gf2flfqnpqbr1b4p4qz2f72y42bs56r-gcc-11.3.0
  ：
copying path '/nix/store/kmfaajdpyyyg319vfqni5jm9wkxjmf73-stdenv-linux' from 'https://cache.nixos.org'...
Starting a devbox shell...
(devbox)  ← devbox 環境であることを示しています。

(5) アプリケーションの実行確認します。

bash(NixOS on WSL)

$ python --version　　← python バージョンの確認
Python 3.10.8
(devbox)
$ go version　        ← go バージョンの確認
go version go1.19.3 linux/amd64
(devbox)

(6) 環境の利用を終了します。

bash(NixOS on WSL)

$ 
(devbox)
$ exit

(7) 常駐サービスを起動してみます。

bash(NixOS on WSL)

$ devbox services start
Installing nix packages. This may take a while... done.
Starting a devbox shell...
nginx: [emerg] bind() to 0.0.0.0:80 failed (13: Permission denied)  ← パーミッションで怒られる

Error: Service "nginx" failed to start
source: exit status 1

Error: exit status 1

$ nix-env -i vim      ← vi がないのでインストール
installing 'vim-8.2.5172'
this path will be fetched (7.68 MiB download, 37.16 MiB unpacked):
  /nix/store/mwkp27ynx3x4wyn8j9s3qjqszrac86ar-vim-8.2.5172
copying path '/nix/store/mwkp27ynx3x4wyn8j9s3qjqszrac86ar-vim-8.2.5172' from 'https://cache.nixos.org'...
building '/nix/store/is9vp6mv023xdpcyhqjpqgkszv47hg4d-user-environment.drv'...

$ vi nginx/nginx.conf
events {}
http{
server {
         listen       80;                    ← 8080に修正
	 listen       [::]:80;               ← 8080に修正
         server_name  localhost;
         root         ../../../devbox.d/web;

         error_log error.log error;
         access_log access.log;
         client_body_temp_path temp/client_body;
         proxy_temp_path temp/proxy;
         fastcgi_temp_path temp/fastcgi;
         uwsgi_temp_path temp/uwsgi;
         scgi_temp_path temp/scgi;

         index index.html;
         server_tokens off;
    }
}
[nixos@pc:/mnt/c/environ/devbox-envA]$ devbox services start ← systemサービス起動
Installing nix packages. This may take a while... done.
Starting a devbox shell...
Service "nginx" started   ← nginx確認

ブラウザから http://localhost:8080にアクセスし、「Hello World」が返ってきたらOK!!です

なお、今回のオペレーションで WSL の環境が複数となったかたもいると思います。ディストリビューションの既定値を変更したい場合は、wsl -s ディストリビューション名で変更できます。
現在のリストは以下のオペレーションで確認できます。

コマンドプロンプト

> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)
NixOS

3.6. どんなアプリケーションパッケージがあるか

devbox で管理できるアプリケーションパッケージの一例です。

https://search.nixos.org/packages

openjdk
python
php
ruby
rustc
apacheHttpd
squid
postfix
nodejs
postgresql
mariadb
sqlite
metabase
nkf
mecab
sl
pingu
zabbix.agent
zabbix.server
playwright
firefox
wget

各々の内容については devbox info オペレーションで確認できます。

bash(NixOS on WSL)

$ devbox info apacheHttpd
apache-httpd-2.4.54

apache NOTES:
If you with to edit the config file, please copy it out of the .devbox directory.

Services:
* apache

Use `devbox services start|stop [service]` to interact with services

This plugin creates the following helper files:
* /mnt/c/container/devbox-1st/devbox.d/web/index.html
* /mnt/c/container/devbox-1st/devbox.d/apacheHttpd/httpd.conf

This plugin sets the following environment variables:
* HTTPD_CONFDIR=/mnt/c/container/devbox-1st/devbox.d/apacheHttpd
* HTTPD_ERROR_LOG_FILE=/mnt/c/container/devbox-1st/.devbox/virtenv/apacheHttpd/error.log
* HTTPD_PORT=8080
* HTTPD_DEVBOX_CONFIG_DIR=/mnt/c/container/devbox-1st

To show this information, run `devbox info apacheHttpd`

slやpingu などのジョークソフトも無事動いています。

4. 最後に

まずは Devbox が動くことまでを確認できました。これでサクサク環境の切り替えが出来ますね。pythonやgo、そしてnginx のような常駐サービスの制御もできることも確認できました。

tauri+rust on NixOS on WSL2 を試しはじめていま。画面に出すところまでいきましたが、日本語フォント表示が出来ず苦戦。VSCodeによるコンテナ(docker)連携もできるようですが、この辺は次の機会に。

5. 参考

この記事は、以下の曲を聴きながら作成しました。

an actor's life(dave grusin)
the goonies 'R' good enough(cyndi lauper)
danger zone(kenny loggins)
ghostbusters(ray parker,jr.)
eye of the tiger(survivor)
footlose(kenny loggins)
the power of love(huey lewis and the news)
a view to a kill(duran duran)
never ending story(limahl)
meryy christmas, mr.lawrence(sakamoto ryuichi)

ここまで読んでいただいた方、ありがとうございます!!

では、また。See You

1. はじめに

2. 出来上がるもの

3. 環境構築

3.1. 前提:WSL の準備

3.2. NixOS-WSL の準備

3.3. NixOS初期コンフィグレーション

3.4. Devboxインストール

3.5. Devboxアプリケーションパッケージの構築

3.6. どんなアプリケーションパッケージがあるか

4. 最後に

5. 参考

Discussion