19
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Phoenix 1.6.0でSqlite3を使ってみる

Posted at

##はじめに
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/ にアクセスします。
Screenshot from 2021-10-12 20-23-01.png

確認後サーバは一度落とします。
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/
にアクセスします

「New User」をクリック
Screenshot from 2021-10-12 20-41-15.png

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

Screenshot from 2021-10-12 20-41-58.png

Screenshot from 2021-10-12 20-43-11.png

Screenshot from 2021-10-12 20-43-26.png

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

##おまけ
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> 
19
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?