[2023年12月版]ElixirDesktopでスマホアプリを作る - (番外編)WSL2上のandroid-studioでエミュレータを動かす

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はElixirDesktop Phoenix1.7のアプリをWindows11 + WSL2で動かすうえで、エミュレータが動かなかった問題を対応しました。

目的

ElixirDesktop android-example-appをWindows11 + WSL2環境でビルドして、エミュレータで動かしたい。

実行環境

Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.13.4-otp-25
Erlang v25.0.4
Android Studio Giraffe | 2022.3.1 Patch 3

開始時の断面

[2023年12月版]ElixirDesktopでスマホアプリを作る - Phoenix1.7のアプリを起動(iex -S mixまで)の終了断面時時点で、下記エラーがでてエミュレータが動かない状態でした。

The emulator process for AVD Pixel_3a_API_34_extension_level_7_x86_64 has terminated.

(上記「AVD Pixel_3a_API_34_extension_level_7_x86_64」は私が勝手につけたエミュレータの名前です。なおスクリーンショットは取りそびれました)

エラー内容1

①iex -S mix起動時

iex -S mix起動時に下記の文章が出ていた

iex

/usr/bin/xdg-open: 882: x-www-browser: not found

shell

which google-chrome
#レスポンス無し(他ブラウザでも同様だった)

x-www-browser配下のブラウザがいずれもWSL2配下にインストールされていないようである。

対応方法

WSL配下にGoogle Chromeをダウンロード

「他のプラットフォーム」「Linux」押下

WSL2側のファイルシステム側に持ってきて下記実行

shell

dpkg --list #dpkgコマンドが使えるかどうかの確認
sudo dpkg -i google-chrome-stable_current_amd64.deb #dpkgコマンドでgoogle-chromeをインストール
sudo apt-get install -f #依存関係解消


```bash:shell
which google-chrome
/usr/bin/google-chrome

WSL2配下にgoogle-chromeがインストールされて、iex -S mixがWSL2側のgoogle-chromeで開くようになりました！

• インストール前(Windowsのgoogle-chromeが起動している)
  

• インストール後(WSL2のgoogle-chromeが起動している)
  

この状況で再度エミュレータを起動してみます。

エラー内容2

②エミュレータ起動時

①iex -S mix起動時のエラーは消えましたが、下記の別のエラーが出ました。

「kvmにアクセスするパーミッションが拒否られました」と。
あれ？kvmってそもそも入れてたっけ？使える状態にあったっけ？
なので下記に沿って確認しました。

Pre-installation checklistの項

Check that your CPU supports hardware virtualizationの項

shell

sudo apt install cpu-checker #後続のkvm-okコマンドを使用するため

shell

kvm-ok #kvmを使える前提条件の確認
INFO: /dev/kvm exists
KVM acceleration can be used  #kvmを使える前提条件は満たしていると確認できた

Use a 64 bit kernel (if possible)の項

shell

egrep -c ' lm ' /proc/cpuinfo # CPUが64ビットアーキテクチャをサポートしているかの確認
24 #1以上なのでサポートしている

shell

uname -m #実行中のカーネルが64ビットかどうかを確認
x86_64 #64ビットであると確認できた

前提条件は満たしているらしい。

Installation of KVMの項

Install Necessary Packagesの項

マシン上に X サーバーが存在しないことの事前確認

For the following setup, we will assume that you are deploying KVM on a server, and therefore do not have any X server on the machine.と記載があるため。

shell

xeyes #目がマウスカーソルを追うXサーバーの機能を使用するアプリの起動コマンド
Command 'xeyes' not found, but can be installed with:
sudo apt install x11-apps #起動しなかったので存在しないと確認できた

shell

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils #kvmの依存関係にあるパッケージのインストール

上記でインストールしたパッケージ(展開して詳細を見る)

・ libvirt-bin は、 libvirt を使用して qemu および kvm インスタンスを管理するために必要な libvirtd を提供します。
・ qemu-kvm ( Karmic 以前のkvm ) はバックエンドです
・ ubuntu-vm-builder仮想マシンを構築するための強力なコマンドラインツール
・ bridge-utils は、ネットワークから仮想マシンへのブリッジを提供します。

Add Users to Groupsの項

shell

sudo adduser alice libvirt
The user `alice' is already a member of `libvirt'. #追加済みを確認。されてなければ再ログインが必要

Verify Installationの項

shell

virsh list --all
 Id   Name   State
-------------------- #エラーが出てないので有効化されたようである

エミュレータ、起動した！

ここで端末の再起動をし、android-studioを起動+エミュレータを起動させてみると...？
エラーが解消され、エミュレータが起動しました！！

android-example-appでの動作確認

念のため、下記記事の手順に沿ってElixirDesktop android-example-appを動かしてみたところ、エミュレータでの動作が確認できました(^▽^)/

これで逐一実機転送せずにPhoenixアプリの開発ができます！良かったー！！

感想

①と②の因果関係は正直分かっていません。エラーを一つ一つ対処しただけです。
それでも自身のElixirDesktop開発環境が少し良くなったのは嬉しかったです。

～Elixirの国のご案内～

↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます

↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ！私もエンジニア未経験から学習中です。

↓We Are The Alchemists, my friends!¹
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。²

1. @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。 ↩

2. @kn339264さんの素敵なスライドをお借りしました。Elixirコミュニティはいろんな形で活動中！ ↩