##はじめに
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 を2回
[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/
にアクセスします
「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>