2
Help us understand the problem. What are the problem?

posted at

updated at

MacでDB付きElixir/Phoenixを使う最短手順

こんにちは、piyopiyo.ex共同開催者のnakoです。

この記事は2022/2/5開催のpiyopiyo.ex#4の手順をまとめたものです。

(2022/6/10追記)
「PostgreSQLにdev.exsのユーザーが登録されているか確認しよう」を追記しました。

前提

本記事はMacユーザー向けのため、Windowsユーザーの方はこちらの記事を参考にしてください。

Elixirをインストール

公式を参考にインストールしていきます。

HomebrewでElixirをインストール

起動したターミナルで下記を実行。

$ brew install elixir

インストールが完了したらバージョン確認。

$ elixir -v
Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.13.2 (compiled with Erlang/OTP 24)

ちなみにPhoenix v1.6はElixir v1.9以上が必要。

Phoenix v1.6 requires Elixir v1.9+.

Phoenixのインストール

ターミナルで下記を実行。

$ mix archive.install hex phx_new

なおアンインストール

$ mix archive.uninstall phx_new

インストールできたらバージョンを確認します。
※2022/1/31現在、Phoenixの最新バージョンは1.6.6です。

$ mix phx.new -v
Phoenix installer v1.6.6

PostgreSQLのインストール、初期設定

HomebrewでPostgreSQLをインストール

ターミナルで下記を実行。

$ brew install postgresql

PostgreSQLのPATHを通す

インストールしたPostgreSQLのパスを確認。
brew --prefix [パッケージ名]でパッケージのインストールディレクトリが確認できます。

$ brew --prefix postgresql

.zprofileを編集します。
ここではviでファイルを編集していますが、好きなエディタで編集してください。

$ vi ~/.zprofile

.zprofileにパスを追記します。

~/.zprofile
# postgreSQL
export PATH="/usr/local/opt/postgresql/bin:$PATH"

編集した.zprofileの内容を反映。

$ source ~/.zprofile

バージョンの確認をします。

$ postgres --version
postgres (PostgreSQL) 14.1

Visual Studio Code(VSCode)のダウンロード

VSCodeのダウンロードページにアクセスします。

自分の使っているOS(ここではMac)を選んでポチーします。

スクリーンショット 2021-11-13 0.18.51.png

zipファイルがダウンロードできるので、ダブルクリックして展開しましょう。
展開したappファイルはアプリケーションフォルダに移動しましょう。

スクリーンショット 2021-11-13 0.20.17.png

VSCodeのelixirの拡張機能をインストールする

VSCodeの拡張機能アイコンをクリックし、「elixir」と検索、「ElixirLS」をインストールします。

スクリーンショット 2021-11-13 0.24.48.png

Hello, world!しよう

Phoenix PJの作成

$ mix phx.new sample
* creating sample/config/config.exs
* creating sample/config/dev.exs
* creating sample/config/prod.exs

〜略〜

Fetch and install dependencies? [Yn] Y # 途中で依存するライブラリのインストールをするか聞かれるのでYを入力

最後に作成されたプロジェクトの起動方法が表示されます。

We are almost there! The following steps are missing:

    $ cd sample

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

sampleディレクトリに移動し、ecto.createでDBを作成するようメッセージが表示されています。
が、その前にDBの設定を確認しましょう。

PostgreSQLにdev.exsのユーザーが登録されているか確認しよう(2022/6/10追記)

config/dev.exs ファイルを開いてみましょう。
おそらく下記のような内容が書かれているはずです。

config/dev.exs
import Config

# Configure your database
config :sample, Sample.Repo,
  username: "postgres",
  password: "postgres",
  hostname: "localhost",
  database: "sample_dev",
~略~

ユーザー名とパスワードがpostgresで設定がされていますね。
このpostgresユーザーがPostgreSQLに登録されているか確認しましょう。

$ psql postgres
psql (14.3)
Type "help" for help.

postgres=#

psqlが実行できたら、PostgreSQLに登録されているユーザーを確認しましょう。

postgres=# select * from pg_user;
 usename  | usesysid | usecreatedb | usesuper | userepl | usebypassrls |  passwd  | valuntil | useconfig
----------+----------+-------------+----------+---------+--------------+----------+----------+-----------
 my-user   |       10 | t           | t        | t       | t            | ******** |          |
 postgres |    16384 | f           | t        | f       | f            | ******** |          |
(2 rows)

もしpostgresユーザーが居なければ作成しましょう。

create role postgres with superuser login password '';

なお、psqlを終了する場合は\qを入力します。

postgres=# \q

DBの作成をしよう

メッセージ通り、sampleディレクトリに移動し、ecto.createでDBを作成します。
※EctoはElixirのデータベースラッパーです。

$ cd sample
$ mix ecto.create

作成したPhoenix PJを起動します。

$ mix phx.server

ブラウザでhttp://localhost:4000を表示しましょう。

スクリーンショット 2021-11-25 1.23.53.png

ビューを書き換える

今回はビューのページを少し変更してみましょう。
sample/lib/sample_web/templates/配下にテンプレートファイルがあります。

※ビューとテンプレートについては下記を参照。
https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/views

2行目のh1タグを書き換えてみましょう。

sample/lib/sample_web/templates/page/index.html.heex
<section class="phx-hero">
  <!-- <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1> -->
  <h1>Hello, world!</h1>
  <p>Peace of mind from prototype to production</p>
</section>

無事変更されました。ようこそPhoenixへ!

スクリーンショット 2021-11-25 1.41.29.png

おわりに

本記事ではいろいろ説明をはしょりましたが、ディレクトリ構造などは公式ドキュメントや、日本語訳ならこちらがおすすめです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?