Windows11にUbuntu 24.04をHyper-V経由でインストール + Phoenix Expressでコマンド一発Phoenixアプリ作成

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はコマンド一発でPhoenixアプリケーションを作れる「Phoenix Express」という手順をやってみて学んだことをまとめます。


# 目的
Hyper-V上のUbuntu Desktop 24.04.1 LTSを使用して「Phoenix Express」を検証する。

Phoenix Expressの手順↓

https://hexdocs.pm/phoenix/up_and_running.html#phoenix-express


なお、Phoenix Expressの存在は下記の記事で知りました！
(thx for @torifukukaiou🎉)

https://qiita.com/torifukukaiou/items/6c9025039ce2843209dd

## 実行環境
Windows 11(以降ホストOSはHyper-Vを使える前提で進めます)

# 仮想マシンの作成
下記記事のUbuntu 24.04版です。

https://qiita.com/Alicesky2127/items/2bf24d6fc396201783e0#%E7%9B%AE%E7%9A%84

## Ubuntuのisoファイルをダウンロード
こちらからUbuntu Desktop 24.04.1 LTSのisoファイルをダウンロードし、適当なディレクトリに保存します。

https://jp.ubuntu.com/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/6edb9559-2768-123b-e119-ce68d21c999f.png)

## Hyper-V上で仮想マシン作成
Hyper-Vを起動して、右ペインから「新規」→「仮想マシン」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e65ffa69-dd7c-b3a2-ac0c-e66a0b224072.png)

「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/5f3fc58d-024d-bfc5-2e2c-91b9cb1687a3.png)

### 名前と場所の指定
仮想マシンの名前をつけて「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b8cbf7ae-4a42-71c4-063b-199849d7c043.png)

### 世代の指定
Ubuntu 24.04.1は2GHzデュアルコアプロセッサ以上推奨なので「第2世代」を選択し「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/49d3bba0-8961-9bcb-9ad7-85bb3e3cd7f4.png)

### メモリの割り当て
4GBシステムメモリが必要なのでひとまず倍くらい確保しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/f6973406-59cf-12da-6f87-69bd0fbe1274.png)

### ネットワークの構成
Default Switchにし「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/984bd743-5acc-e89a-4304-eff5f09feb71.png)

### 仮想ハードディスクの接続
ひとまずデフォルト値のまま「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/18af9175-b894-6043-edd6-2fc8a4075e1a.png)

### インストールオプション
先ほどインストールしたisoファイルを選択し「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/13b5d890-5226-8e96-3bdd-0b579a1e001a.png)

### インストール前確認
「完了」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/38c6695a-6fb0-ff00-9605-4dd76d60e3b5.png)

できました(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b59c22a8-36a3-47bb-6e38-8c59437c6243.png)

## OSのインストール
### 言語設定
日本語を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/c7f9a118-4a32-4cba-411d-1a37dc13992b.png)

### アクセシビリティ
「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/31bf5d40-cd47-9833-fb85-9a548432dfae.png)

### キーボードレイアウト
キーボードを選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/4d7280f8-86fd-b48b-ca79-41474fdd8ccc.png)

### ネットワークに接続
「有線接続を使用」を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/c35cf467-1478-748c-6458-3bf141edeb8c.png)

### Ubuntuを試用またはインストール
「Ubuntuをインストール」を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/67546dfb-ad62-3b69-8830-2579ed0bfe6b.png)

### インストールの種類
「対話式インストール」を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/16629e55-b29d-2621-d4cc-8fa4841eae9d.png)

### アプリケーション
「既定の選択」を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/70a4c0bf-c172-a736-a169-0bcef7e5a570.png)

### コンピューターを最適化
「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1d9a071a-1a21-e92b-8e1a-2bb69801e869.png)

### ディスクのセットアップ
「ディスクを削除してUbuntuをインストールする」を選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/3fde8d0d-d9aa-44ed-cc34-8246d7063494.png)

### アカウントの設定
ユーザー名、パスワードを作成して「続ける」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/ea364fbd-359b-1293-303e-29184cfcea74.png)

### タイムゾーン
Tokyoを選択して「次」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/c7b7cba5-d49d-6292-519b-a03ba53e9b7f.png)

### インストール前確認
「インストール」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/c102b173-7664-ac80-bfc7-71ad27bea068.png)

インストール中です...
ネットワーク環境にもよりますが私はインストールに12分ほどかかりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/575e580a-b704-f0ba-4718-8842cbc1b421.png)

### インストール完了
「今すぐ再起動」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/5d0fdfb8-b859-3808-ed8f-ad7fc2016def.png)

### ログイン
アカウントを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/9a7684b4-c834-b3cd-f122-f093d519a46b.png)

パスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b6cdea86-adcc-3945-f4bd-20092f4780dd.png)


## 仮想マシン内での初期設定
「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/98ca307e-8aea-8435-c513-9ebd041297a3.png)

「Skip for now」を選択して「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1a40681b-ac4e-afef-86d3-452088ce7f4b.png)

「いいえ、システムデータを共有しません」を選択して「次へ」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/0186c8ec-bad0-273f-d05e-5526cc4aa92d.png)

「完了」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/17ee0cb0-323d-6630-9254-f87e07047322.png)

できました(^▽^)/
※もしアップデートの通知が来ていたら随時実施してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/f391951e-6018-f347-c93b-3e9566cfcad3.png)

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


# はまった箇所 -OSを読み込んでくれない
作成した仮想マシンをそのまま起動するとこうなりました。OSを読み込んでくれなかったようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/9821ab8c-18a0-bd53-ade7-61465cef0f2a.png)


一度仮想マシンを停止し、右ペインから「設定」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/586a45c1-54be-57ae-874e-a682f6a575cc.png)


「セキュリティ」→「セキュアブートを有効にする」のチェックをオフにします。[^3]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e8cff0a9-e83a-78ea-eedf-01b60bb9bc02.png)


「Try or Install Ubuntu」を選択しEnterキーを押下します。
これでゲストOSが起動しました(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b6999f60-8dbf-0625-61e2-e93622b90269.png)


# Phoenix Expressの実施
左メニューから「端末」を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/d284baaf-9c64-cf4f-cebe-2597798a3c5a.png)

## curlとgitのインストール
先にcurlとgitをインストールしておく必要があります
```bash:shell
sudo apt install curl
sudo apt install git
```

## コマンド実行
[公式ドキュメント](https://hexdocs.pm/phoenix/up_and_running.html#phoenix-express)に記載の下記を実行します。
```bash:shell
curl https://new.phoenixframework.org/myapp | sh
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/4d9b053d-2427-47f4-317c-50c6e75db0f0.png)

## できました(^▽^)/
Phoenixのアプリが起動するところまで自動でやってくれます(^▽^)/
Elixir／Phoenixアプリを起動するまでに必須だったmixコマンドはここまで1回も使ってないです。
すごい。ものすごく簡単🎉🎉🎉

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1a2e5c22-703e-8442-ef16-7367ee12de23.png)

### 余談
curlが入っていないと下記のエラーが出ます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/9788e9e6-d06c-2e1b-cb83-630241581ea2.png)

gitが入っていないと下記のエラーが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/34a0c051-67f7-0708-e767-e0a49e01b98a.png)



# ～Elixirの国のご案内～
↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます:laughing::sparkles::sparkles:

https://qiita.com/piacerex/items/09876caa1e17169ec5e1

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

https://elixir-lang.info/topics/entry_column


↓[We Are The Alchemists, my friends!:bouquet:](https://qiita.com/torifukukaiou/items/6bcd5bbb80df9e594e9e "Awesome-san's Awesome article")[^10]
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。[^11]


https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian


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


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