Phoenix 1.6.0でSqlite3を使ってみる

はじめに

Phoenix 1.6.0でSqlite3が使えるので簡単なLiveViewで動くページを作ります

この記事の実行環境

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

Elixir 1.12.2 (compiled with Erlang/OTP 22)

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

プロジェクト作成

--database sqlite3 を指定するとSQLite3用になります。

$ mix phx.new sample --database sqlite3
* creating sample/config/config.exs
* creating sample/config/dev.exs
        〜  中略　〜
* creating sample/priv/static/images/phoenix.png
* creating sample/priv/static/favicon.ico

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile

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

DB作成

$ cd sample

$ mix ecto.create
Compiling 14 files (.ex)
Generated sample app
The database for Sample.Repo has been create

ブロジェクト名.db ファイルが作成されていることを確認

$ ls
README.md  _build  assets  config  deps  lib  mix.exs  mix.lock  priv  sample_dev.db  test

サーバ起動確認

$ mix phx.server

[info] Running SampleWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.12.18.tgz
[info] Access SampleWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

http://localhost:4000/ にアクセスします。

確認後サーバは一度落とします。
Ctrl+C を２回

[info] GET /
[debug] Processing with SampleWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 127ms
^C
BREAK: (a)bort (A)bort with dump (c)ontinue (p)roc info (i)nfo
       (l)oaded (v)ersion (k)ill (D)b-tables (d)istribution
^C

LiveViewのページを作ります

$ mix phx.gen.live Accounts User users name:string
* creating lib/sample_web/live/user_live/show.ex
* creating lib/sample_web/live/user_live/index.ex
* creating lib/sample_web/live/user_live/form_component.ex
* creating lib/sample_web/live/user_live/form_component.html.heex
* creating lib/sample_web/live/user_live/index.html.heex
* creating lib/sample_web/live/user_live/show.html.heex
* creating test/sample_web/live/user_live_test.exs
* creating lib/sample_web/live/modal_component.ex
* creating lib/sample_web/live/live_helpers.ex
* creating lib/sample/accounts/user.ex
* creating priv/repo/migrations/20211012112657_create_users.exs
* creating lib/sample/accounts.ex
* injecting lib/sample/accounts.ex
* creating test/sample/accounts_test.exs
* injecting test/sample/accounts_test.exs
* creating test/support/fixtures/accounts_fixtures.ex
* injecting test/support/fixtures/accounts_fixtures.ex
* injecting lib/sample_web.ex

Add the live routes to your browser scope in lib/sample_web/router.ex:

    live "/users", UserLive.Index, :index
    live "/users/new", UserLive.Index, :new
    live "/users/:id/edit", UserLive.Index, :edit

    live "/users/:id", UserLive.Show, :show
    live "/users/:id/show/edit", UserLive.Show, :edit


Remember to update your repository by running migrations:

    $ mix ecto.migrate

lib/sample_web/router.exを修正する

scope "/", SampleWeb do の中に上記のコマンド実行時に表示している内容に修正します

lib/sample_web/router.ex

defmodule SampleWeb.Router do
  use SampleWeb, :router

   # 〜  中略　〜

  scope "/", SampleWeb do
    pipe_through :browser

    ##↓↓↓↓↓↓↓↓↓↓↓↓↓↓　追加
    live "/users", UserLive.Index, :index
    live "/users/new", UserLive.Index, :new
    live "/users/:id/edit", UserLive.Index, :edit

    live "/users/:id", UserLive.Show, :show
    live "/users/:id/show/edit", UserLive.Show, :edit
    #↑↑↑↑↑↑↑↑↑↑↑↑↑↑　追加

    get "/", PageController, :index
  end

  # 〜  中略　〜
end

マイグレーションし、サーバ起動

$ mix ecto.migrate
Compiling 13 files (.ex)
Generated sample app

20:36:07.098 [info]  == Running 20211012112657 Sample.Repo.Migrations.CreateUsers.change/0 forward

20:36:07.109 [info]  create table users

20:36:07.112 [info]  == Migrated 20211012112657 in 0.0s

$ mix phx.server

動作確認

http://localhost:4000/users/
にアクセスします

「New　User」をクリック

「Name」に好きな文字を入力し、「SAVE」をクリック

これで動作確認できました

おまけ

Ubuntu 20.04でsqlite3で登録した内容を確認

SQLite3をインストール

$ sdo apt install sqlite3

sqlite3 ブロジェクト名.db でアクセス

$ sqlite3 sample_dev.db
SQLite version 3.31.1 2020-01-27 19:55:54
Enter ".help" for usage hints.

sqlite> 

select文で登録した内容を確認

sqlite> select * from users;
1|ほげほげ|2021-10-12T11:43:23|2021-10-12T11:43:23
sqlite>