Brightの対象
Webアプリ開発 Elixir > クラス1 > Elixir環境構築 > ローカルPC > Ubuntu上にElixir環境構築
対象者
・LinuxでElixirの仕事用の開発環境を作りたい方
・Linuxでなくても仕事用の開発環境を作りたい方で参考にしたい方
Windows、Macはコマンドが違いますが、なにかヒントになるかも
・開発環境のインストールを少しでも自動化したい方
この記事で行うこと
・OSのインストール
・Elixirのインストール
・開発でよく使うものをまとめてインストール
・ブラウザーのインストール
・VSCodeのインストール
・VSCodeのプラグインのインストール
・Dockerのインストール
Ubuntuのisoファイルをダウンロード
OSのインストール
ここではKVMでインストールしてますが、好みのVMを使ってください
ほとんどのVMが似たような方法でインストールできます
実機はisoファイルをUSBに転送して（書き込むツールを使って）、USBからブートできればインストール可能です
実機の場合は、何も入ってないSSD等に接続してインストールすることをおすすめします
実機に関してはやり方は省略します
※実機は注意しないとインストール済みのWindowsを間違って消す恐れがあります
一番左のアイコンをクリックして新規のVMを作る
進むをクリック
参照をクリック
ダウンロードしたisoファイルをクリック
OSをUbuntu20.04を選ぶ（私の環境は22.04を選べなかったので可能な限り近いものを選ぶ）
進むをクリック
メモリとCPUの数を指定する
進むをクリック
ディスクの容量を指定する
進むをクリック
名前を入力して
完了をクリック
ここからは、実機でもVMでも同じ
エンターキーを押す
日本語を選択してUbuntuをインストールをクリック
キーボードを選択して、続けるをクリック
続けるをクリック
新規のSSDで実機にインストール又はVMの場合はそのままインストールをクリック
※もし他のOSが入ってる時はここの表示内容が変わります、ここで選択ミスをするとデータが消えます
その為新規のSSDまたはVMの前提で進めています
ここで続けると、インストールが開始されます
※ここがラストチャンスです。上記で選択誤っていた場合はデータを消す恐れがあります。
日本の地図をクリックして進むをクリック
情報を入力して続ける
あとは待つ
今すぐ再起動するをクリック
アカウントをクリック
パスワードを入力
次へをクリック
いいえを選択して次へをクリック
次へをクリック
完了をクリック
この操作を今すぐ実行するをクリック
インストールをクリック
パスワード入力し認証をクリック
閉じるをクリック
もし下記が表示していたら、今すぐインストールをクリック
パスワード入力し認証をクリック
今すぐ再起動をクリック
解像度の変更方法
右クリックしメニューが表示したら、ディスプレイの設定をクリック
解像度を選択
解像度選択 例
変更を保存
右上の☓をクリックしてがこの画面を閉じる
これでOSのインストールは終わりです
Elixirのインストール
asdfを使ってElixirをインストールします
・gitをインストール
・インストールスクリプトダウンロード
$ sudo apt update
$ sudo apt install git -y
私が自作したインストールスクリプトはこちらです
$ git clone http://github.com/t-yamanashi/install
$ cd install
$ ls
README.md devinstall.sh elixir_asdf_install vscode_ext.sh
chrome.sh docker.sh vscode.sh
cd elixir_asdf_install
asdf.sh elixir.sh elixir20.sh phxinstall.sh postgres.sh vimelixir.sh
asdfのインストールスクリプト
#!/bin/sh
sudo apt update
sudo apt install git curl git -y
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1
echo ". $HOME/.asdf/asdf.sh" >> ~/.bashrc
echo ". $HOME/.asdf/completions/asdf.bash" >> ~/.bashrc
echo "type source ~/.bashrc"
asdf.shを実行してasdfをインストール
$ sh asdf.sh
$ source ~/.bashrc
Elixirインストールスクリプト
erlangとelixirのバージョン
25.0.4と1.13.4-otp-25
は適切に書き換えてください
#!/bin/sh
sudo apt -y install build-essential autoconf m4 libncurses5-dev libwxgtk3.0-gtk3-dev libgl1-mesa-dev libglu1-mesa-dev libpng-dev libssh-dev unixodbc-dev xsltproc fop libxml2-utils libncurses-dev openjdk-11-jdk libwxgtk-webview3.0-gtk3-dev
asdf plugin-add erlang https://github.com/asdf-vm/asdf-erlang.git
asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
asdf install erlang 25.0.4
asdf install elixir 1.13.4-otp-25
asdf global erlang 25.0.4
asdf global elixir 1.13.4-otp-25
elixir20.shを実行
$ sh elixir20.sh
Phoenixのインストールスクリプト
#!/bin/sh
sudo apt update
sudo apt install -y nodejs npm inotify-tools
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
mix archive.install hex phx_new
phxinstall.shの実行
$ sh phxinstall.sh
下記のように[Yn]を聞かれたらY
Could not find Hex, which is needed to build dependency :phx_new
Shall I install Hex? (if running non-interactively, use "mix local.hex --force") [Yn] Y
* creating /home/dev/.asdf/installs/elixir/1.13.4-otp-25/.mix/archives/hex-2.0.0
Resolving Hex dependencies...
Resolution completed in 0.009s
New:
phx_new 1.6.15
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.15.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.6.15.ez"? [Yn] Y
* creating /home/dev/.asdf/installs/elixir/1.13.4-otp-25/.mix/archives/phx_new-1.6.15
次の作業の為に一つ上のディレクトリに移動しておきます
$ cd ..
開発でよく使うものをまとめてインストール
複数のインストールインストールスクリプトを実行するスクリプト
#!/bin/sh
sudo apt update
sudo apt install -y build-essential
sh chrome.sh
sh vscode.sh
sh vscode_ext.sh
sh docker.sh
ブラウザーのインストールスクリプト
#!/bin/sh
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb
VSCodeのインストールスクリプト
#!/bin/sh
wget -O code.deb "https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64"
sudo dpkg -i code.deb
VSCodeのプラグインのインストールスクリプト
#!/bin/sh
#Elixir
code --install-extension jakebecker.elixir-ls
code --install-extension ritvyk.heex-html
#docker
code --install-extension ms-vscode-remote.remote-containers
code --install-extension ms-azuretools.vscode-docker
#editorconfig
code --install-extension editorconfig.editorconfig
#etc
code --install-extension mhutchie.git-graph
code --install-extension alefragnani.bookmarks
code --install-extension ms-vsliveshare.vsliveshare
Dockerのインストールスクリプト
#!/bin/sh
sudo apt install curl -y
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo apt-get install -y uidmap
dockerd-rootless-setuptool.sh install
cat << EOS >> ~/.bashrc
export PATH=/usr/bin:\$PATH
export DOCKER_HOST=unix:///run/user/1000/docker.sock
EOS
curl -L https://raw.githubusercontent.com/docker/compose-cli/main/scripts/install/install_linux.sh | sh
mkdir -p ~/.docker/cli-plugins/
curl -SL https://github.com/docker/compose/releases/download/v2.0.0/docker-compose-linux-amd64 -o ~/.docker/cli-plugins/docker-compose
chmod +x ~/.docker/cli-plugins/docker-compose
devinstall.shを実行してまとめてインストール
$ sh devinstall.sh
動作検証
Elixir
$ iex
Erlang/OTP 25 [erts-13.0.4] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit:ns]
Interactive Elixir (1.13.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> 1..10 |> Enum.sum()
55
※Ctrl + c で終了できます
Dockre検証
$ docker run -it --rm elixir
Erlang/OTP 25 [erts-13.1.2] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit:ns]
Interactive Elixir (1.14.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> 1..10 |> Enum.sum()
55
※Ctrl + c で終了できます
Phoenixプロジェクト作成検証&VSCode
$ cd
$ mix phx.new hoge --no-ecto
下記のメッセージでYを入力
Fetch and install dependencies? [Yn]
VSCodeを起動する
$ cd hoge
$ code .
インストールされたプラグインを確認
プログラムの起動テスト
$ mix phx.server
下記のメッセージでYを入力
I can install a local copy which is just used by Mix
Shall I install rebar3? (if running non-interactively, use "mix local.rebar --force") [Yn]
http://localhost:4000/にアクセス
起動確認できました
さらにElixirDesktopの開発環境を作りたい場合は
こちらを参考にしてください↓