ElixirAdvent Calendar 2024

fukuoka.ex：福岡Elixirコミュ

ElixirDesktopの環境構築 WSL2 Ubuntu編

Posted at 2024-11-15

はじめに

この記事はElixirアドベントカレンダー2024のシリーズ２、3日目の記事です

本記事はWebの技術スタックでモバイルアプリを開発できるElixirDesktopに開発環境をWindowsのWSL2上のUbuntuに構築する方法を紹介します。

動作環境

Windows 11
CPU intel i7-9700K
WSL 2
Ubuntu 24.04
shell bash

Ubuntu update

環境構築を開始する前に現在インストールされているもののアップグレードを行います

bash

$ sudo apt update
$ sudo apt upgrade

asdfのインストール

インストールは公式サイトのGetting Startを参考に行います。

最初に必要なライブラリをインストールします。

bash

$ sudo apt install curl git

次にasdfをインストールします。

bash

$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.1

インストールが完了したら、asdfのパスを.bashrcに追加し、asdfのコマンドを実行できるようにします。

bash

$ echo ". \"$HOME/.asdf/asdf.sh\"" >> ~/.bashrc
$ echo ". \"$HOME/.asdf/completions/asdf.bash\"" >> ~/.bashrc

パスを追加したら設定を反映させるために bashrcファイルを読み込んでください

bash

$ source ~/.bashrc

Erlangのインストール

Ubuntu 2024の箇所を参考に次のライブラリをインストールします

bash

$ sudo apt install -y build-essential autoconf m4 libncurses5-dev libwxgtk3.2-dev libwxgtk-webview3.2-dev libgl1-mesa-dev libglu1-mesa-dev libpng-dev libssh-dev unixodbc-dev xsltproc fop libxml2-utils libncurses-dev openjdk-11-jdk
$ asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
$ asdf install erlang 26.2.5

上記にはなかったのですが、ホットリロードに必要なのでこちらもインストールします

bash

$ sudo apt install -y inotify-tools

Elixirのインストール

次のコマンドでインストールします

bash

$ asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
$ asdf install elixir 1.17.2-otp-26

インストールが完了したらシステム全体で使用するバージョンを指定します。

bash

$ asdf global erlang 26.2.5
$ asdf global elixir 1.17.2-otp-26

Node.jsのインストール

Node.jsのバージョン管理ツールnvmを使用してインストールを行います。

bash

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ source ~/.bashrc
$ nvm install v20.11.0

PostgreSQLのインストール

DBサーバーを次のコマンドでインストールします

bash

$ sudo apt install -y postgresql

SQLite3のインストール

ファイルDBを次のコマンドでインストールします

bash

$ sudo apt install -y sqlite3

GNU環境の構築

WSL2上のGUIアプリをWindows側で表示するために以下をインストールします

bash

$ sudo apt install libgtk-3-dev gnome

日本語入力環境の構築

このままだとWSL2上のGUIアプリでフォーム等に日本語が入力出来ないので日本語入力環境を構築します

bash

$ sudo apt update
$ sudo apt install -y fcitx-bin fcitx-mozc dbus-x11 language-pack-ja 
$ sudo update-locale LANG=ja_JP.UTF8

次のコマンドで日本語入力の設定を行います

cat << EOS | sudo tee /etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig><dir>/mnt/c/Windows/Fonts</dir></fontconfig>
EOS

cat << EOS >> ~/.profile
export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx
fcitx-autostart &> /dev/null
EOS

環境構築が完了したら ctrl + space で日本語、英字を切り替えできます

AndroidStudioのセットアップ

AndroidStudioのセットアップを行います

Windows側ではなくWSL2上で起動させるので注意が必要です

公式サイトをスクロールしていくとAndroid Studio のダウンロードがあるので、こちらからLinux(64ビット）をファイルをダウンロードします

ダウンロード後はWindows側からWLS2上のubuntuのホームディレクトリにコピーして以下のコマンドで展開します
展開後はお好みでリネームして、展開したフォルダに移動します。

bash

$ tar zxvf android-studio*.tar.gz 
$ mv android-studio studio
$ cd studio

以下のコマンドで起動します

bash

$ ./bin/studio.sh

セットアップが完了したら、ElixirDesktopのアプリを起動するためのNDKとCMakeを追加でインストールします

More ActionsからSDK Managerを選択し、NDKと　CMakeをチェックしOKを押してダウンロードをしてください。

エミュレータを起動する歳にkvm permission denyedが出る場合は以下のコマンドを実行して、WSL2を再起動してください

bash

$ sudo apt install qemu-kvm
$ sudo adduser [ユーザー名] kvm
$ sudo chown [ユーザー名] /dev/kvm

ElixirDesktopプロジェクトの作成

環境構築が終わったのでElixirDesktopを使用したデスクトップ、Androidの各アプリケーションの作成方法について紹介します。

Phoenixのセットアップ

ElixirDesktopのアプリケーションはPhoenixのプロジェクトをベースに開発を進めるため、Phoenixのインストールが必要です。公式サイトの手順に沿って次のようにインストールしていきます。

bash

$ mix local.hex
$ mix archive.install hex phx_new

Phoenixプロジェクトの作成

Phoenixプロジェクトを作成するのですが、起動実験を行うだけなのでデータベースは使用しないオプションをつけて次のコマンドを実行します。

bash

$ mix phx.new basic --no-ecto

コマンドを実行すると、関連するライブラリをインストールしますかと聞かれるのでyを選択してください。

プロジェクトの作成が完了したら次のコマンドでPhoenixが問題なく起動できるか確認しましょう。

bash

$ cd basic
$ mix phx.server

http://localhost:4000にアクセスし次のページが表示されれば成功です。

デスクトップアプリ化

Phoenixプロジェクトをデスクトップアプリ化を行います。

mix.exsにデスクトップアプリ化を行うライブラリをdeps関数のライブラリリストの最後に追加します。

mix.exs:L33

  defp deps do
    [
      ...
-     {:bandit, "~> 1.5"}
+     {:bandit, "~> 1.5"}, 
+     {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
    ]
  end

追加したら次のコマンドを実行していきます。

bash