OS（Ubuntu 22.04）のインストールから初める仕事用Elixir開発環境の作成方法

# Brightの対象
Webアプリ開発 Elixir > クラス1 > Elixir環境構築 > ローカルPC > Ubuntu上にElixir環境構築

# 対象者
・LinuxでElixirの仕事用の開発環境を作りたい方
・Linuxでなくても仕事用の開発環境を作りたい方で参考にしたい方
　Windows、Macはコマンドが違いますが、なにかヒントになるかも
・開発環境のインストールを少しでも自動化したい方

# この記事で行うこと
・OSのインストール
・Elixirのインストール
・開発でよく使うものをまとめてインストール
　・ブラウザーのインストール
　・VSCodeのインストール
　・VSCodeのプラグインのインストール
　・Dockerのインストール

# Ubuntuのisoファイルをダウンロード
https://jp.ubuntu.com/download

# OSのインストール
ここではKVMでインストールしてますが、好みのVMを使ってください
ほとんどのVMが似たような方法でインストールできます

実機はisoファイルをUSBに転送して（書き込むツールを使って）、USBからブートできればインストール可能です
実機の場合は、何も入ってないSSD等に接続してインストールすることをおすすめします
実機に関してはやり方は省略します
※実機は注意しないとインストール済みのWindowsを間違って消す恐れがあります



一番左のアイコンをクリックして新規のVMを作る
![Screenshot from 2022-12-15 20-11-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b9d14263-b14d-665f-461b-15894a71006a.png)

進むをクリック
![Screenshot from 2022-12-15 20-11-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b20dd01a-2e94-4d51-c8c7-8d9d15412df2.png)

参照をクリック
![Screenshot from 2022-12-15 20-11-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/500669f9-4f04-7a55-954e-ef34a1789ea0.png)

ダウンロードしたisoファイルをクリック
![Screenshot from 2022-12-15 20-13-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/1b769118-2de9-c0fb-5eac-b37112387a21.png)

OSをUbuntu20.04を選ぶ（私の環境は22.04を選べなかったので可能な限り近いものを選ぶ）
進むをクリック
![Screenshot from 2022-12-15 20-13-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/3c8b02f2-aacd-392c-910f-2d8c0a91e2da.png)

メモリとCPUの数を指定する
進むをクリック
![Screenshot from 2022-12-15 20-13-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/9926b944-ba16-9bed-6389-5a630b33b0d8.png)

ディスクの容量を指定する
進むをクリック
![Screenshot from 2022-12-15 20-13-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5a9e9121-ba87-eded-3802-7216efb1ab6e.png)

名前を入力して
完了をクリック
![Screenshot from 2022-12-15 20-14-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/2d3d5f11-5aaa-b32d-3ca1-a47f2904b9c0.png)

ここからは、実機でもVMでも同じ
エンターキーを押す
![Screenshot from 2022-12-15 20-15-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/33c293e6-293b-37c3-f99f-971f1168f30d.png)

![Screenshot from 2022-12-15 20-15-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/05fecc8c-15db-b083-fa20-919af3e60715.png)

![Screenshot from 2022-12-15 20-16-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/25e7fd2f-66e6-87cb-8d3d-b62a31d03b9c.png)

日本語を選択してUbuntuをインストールをクリック
![Screenshot from 2022-12-15 20-16-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5c6d64c8-0d74-ca7e-2704-b65ebc334323.png)

キーボードを選択して、続けるをクリック
![Screenshot from 2022-12-15 20-16-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/747cb102-8cc5-cd5a-251f-663c5c914275.png)

続けるをクリック
![Screenshot from 2022-12-15 20-16-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5ab6fdcd-df49-aa25-1512-c4711fcf63dc.png)

新規のSSDで実機にインストール又はVMの場合はそのままインストールをクリック
※もし他のOSが入ってる時はここの表示内容が変わります、ここで選択ミスをするとデータが消えます
その為新規のSSDまたはVMの前提で進めています
![Screenshot from 2022-12-15 20-16-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/323ae60d-759a-f9b7-8f07-a0f942550a01.png)

ここで続けると、インストールが開始されます
※ここがラストチャンスです。上記で選択誤っていた場合はデータを消す恐れがあります。
![Screenshot from 2022-12-15 20-16-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/daefa738-967d-1c62-4e05-81f37ba01be2.png)

日本の地図をクリックして進むをクリック
![Screenshot from 2022-12-15 20-17-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/0e6a6cca-e0e6-d6e0-4b1d-a8c72d8c1c6e.png)

情報を入力して続ける
![Screenshot from 2022-12-15 20-21-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f7847fb4-00ad-d07d-b8ce-ee5e2a0d3583.png)

あとは待つ
![Screenshot from 2022-12-15 20-21-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7a4a5117-0d06-4191-f0e2-e5408551face.png)

今すぐ再起動するをクリック
![Screenshot from 2022-12-15 20-26-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7b012e8d-427f-808d-279d-48dd753bf863.png)

![Screenshot from 2022-12-15 20-27-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f7812587-1b68-fc4e-b3f0-222c8bf139ae.png)

アカウントをクリック
![Screenshot from 2022-12-15 20-27-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/3f7f458a-2ceb-6ced-aad6-c4989a5a1705.png)

パスワードを入力
![Screenshot from 2022-12-15 20-27-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/8a65ebfa-a299-baed-dbf6-a77a6da22f77.png)

次へをクリック
![Screenshot from 2022-12-15 20-27-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/95a4ef88-99d4-e468-d81c-602f1908f1e8.png)

いいえを選択して次へをクリック
![Screenshot from 2022-12-15 20-27-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/84cfd4a7-5c12-7a43-94f3-eb181cf1ba80.png)

次へをクリック
![Screenshot from 2022-12-15 20-27-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/d2d81242-0af0-95df-1706-07b21b79d31d.png)

完了をクリック
![Screenshot from 2022-12-15 20-28-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/51749e96-2c96-b6fb-f9f5-b8d035e9e7f4.png)

この操作を今すぐ実行するをクリック
![Screenshot from 2022-12-15 20-28-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/c8489538-77e6-a34f-b4b6-78d9bbe9b82e.png)

インストールをクリック
![Screenshot from 2022-12-15 20-28-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/9a3ec012-8ab1-8aa2-aae0-67e4ab1df2e8.png)

パスワード入力し認証をクリック
![Screenshot from 2022-12-15 20-29-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/0db67f56-5e1b-6c13-868d-acf412e06a1d.png)


![Screenshot from 2022-12-15 20-29-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/6a629320-a9fa-b4a2-e8cc-077b1a2794bc.png)

閉じるをクリック
![Screenshot from 2022-12-15 20-30-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/a93ebbb7-744d-763c-ecdd-bf43aca56de2.png)

もし下記が表示していたら、今すぐインストールをクリック
![Screenshot from 2022-12-15 20-30-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/cbb13746-dae2-a42e-3074-34f831636116.png)

パスワード入力し認証をクリック
![Screenshot from 2022-12-15 20-30-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/0e87f665-5a2b-13d1-8959-9f81079a2949.png)


![Screenshot from 2022-12-15 20-30-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/8d694689-c765-e0bb-5b6a-5486b052be79.png)


今すぐ再起動をクリック
![Screenshot from 2022-12-15 20-32-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/880bfcdb-0414-dc6a-6164-b023be19a432.png)

解像度の変更方法
右クリックしメニューが表示したら、ディスプレイの設定をクリック
![Screenshot from 2022-12-15 20-32-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/236c9237-f8f6-a486-215b-e7247b2fc08a.png)

解像度を選択
![Screenshot from 2022-12-15 20-32-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/21a02b89-bef3-4cee-734f-b534db3669cf.png)

解像度選択　例
![Screenshot from 2022-12-15 20-33-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/88230d60-e118-f668-7a7b-2f9d10858de9.png)

変更を保存
![Screenshot from 2022-12-15 20-33-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/59119654-3cd5-e677-4cc2-223b185031e2.png)

右上の☓をクリックしてがこの画面を閉じる
![Screenshot from 2022-12-15 20-33-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/a0a8008a-4d01-3f48-31d3-262585d4c515.png)

これでOSのインストールは終わりです

# Elixirのインストール
asdfを使ってElixirをインストールします
・gitをインストール
・インストールスクリプトダウンロード

```sh
$ 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のインストールスクリプト

```sh:asdf.sh
#!/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
$ sh asdf.sh
$ source ~/.bashrc
```

Elixirインストールスクリプト


erlangとelixirのバージョン
`25.0.4`と`1.13.4-otp-25`
は適切に書き換えてください


```sh:elixir20.sh
#!/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
$ sh elixir20.sh 
```

Phoenixのインストールスクリプト

```sh:phxinstall.sh
#!/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
$ 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 ..
```

# 開発でよく使うものをまとめてインストール

複数のインストールインストールスクリプトを実行するスクリプト

```sh:devinstall.sh
#!/bin/sh
sudo apt update
sudo apt install -y build-essential
sh chrome.sh
sh vscode.sh
sh vscode_ext.sh
sh docker.sh
```

ブラウザーのインストールスクリプト

```sh:chrome.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のインストールスクリプト

```sh:vscode.sh
#!/bin/sh
wget -O code.deb "https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64"
sudo dpkg -i code.deb
```

VSCodeのプラグインのインストールスクリプト
```sh:cat vscode_ext.sh
#!/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のインストールスクリプト

```sh:docker.sh
#!/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
$ sh devinstall.sh 
```

# 動作検証

Elixir


```sh
$ iex
```

```elixir
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検証

```sh
$ docker run -it --rm elixir
```
```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を起動する
```sh
$ cd hoge
$ code .
```

インストールされたプラグインを確認
![Screenshot from 2022-12-16 23-00-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/64fa3f30-8be6-164a-ecf6-b8641c6d5b13.png)


プログラムの起動テスト

```sh
$ 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/`にアクセス
![Screenshot from 2022-12-16 23-03-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b6c138c9-6753-a293-9e5a-49ed83b5337d.png)

起動確認できました

# さらにElixirDesktopの開発環境を作りたい場合は

こちらを参考にしてください↓

https://qiita.com/t-yamanashi/items/f593731dd7b894635d66