「Phoenix」の記事 - Crieit

(PHP) Phoenix でデータ関係が依存しているDBをマイグレーションする

2022-05-19T23:55:46+09:00

lulco/phoenix でデータ関係が依存しているDBをマイグレーションする方法をメモ。

ドキュメントが全然ないので地道にやっていきます……。

コード

早速コードを。

phoenix.php

return [
    'migration_dirs' => [
        'first'  => __DIR__ . '/migrations/first',
        'second'  => __DIR__ . '/migrations/second',
    ],
    'environments' => [
        'local'      => [
            'adapter'  => 'mysql',
            'host'     => $_ENV['MYSQL_HOST'],
            'port'     => (int)$_ENV['MYSQL_PORT'], // optional
            'username' => $_ENV['MYSQL_USER'],
            'password' => $_ENV['MYSQL_PASSWORD'],
            'db_name'  => $_ENV['MYSQL_DBNAME'],
            'charset'  => 'utf8mb4',
        ],
        'production' => [
            'adapter'  => 'mysql',
            'host'     => $_ENV['MYSQL_HOST'],
            'port'     => (int)$_ENV['MYSQL_PORT'], // optional
            'username' => $_ENV['MYSQL_USER'],
            'password' => $_ENV['MYSQL_PASSWORD'],
            'db_name'  => $_ENV['MYSQL_DBNAME'],
            'charset'  => 'utf8mb4',
        ],
    ],
    'default_environment' => 'local',
    'log_table_name'      => 'phoenix_log',
];

肝は migration_dirs で first と second でそれぞれ対応するディレクトリを指定しているところ。

/migrations/second/fuga.php

table('fuga')
             ->addColumn('create_date', 'datetime')
             ->addColumn('name', 'string')
             ->addColumn('hoge_id', 'integer')
             ->create();

        // select hoge data
        $hogeRows = $this->select('SELECT id, name FROM hoge');
        // insert
        $fugaData = [
            [
                'name' => 'un'
            ],
            [
                'name' => 'deux'
            ],
            [
                'name' => 'trois'
            ],
            // 略
        ];
        $rows = [];
        foreach ($fugaData as $key => $val) {
            $id = 0;
            // hoge の name と fuga の name が一致する要素を array_filter() で抽出し、 array_values() で番号を詰める
            $hogeArray = array_values(
                array_filter(
                    $hogeRows,
                    function($hogeRow) use ($val) {
                        $needle = mb_strlen(mb_strtolower($val[0])) > 0 ? mb_strtolower($val[0]) : 'NOTHING';
                        return mb_strpos(mb_strtolower($hogeRow['name']), $needle) !== false;
                    }
                )
            );
            // $hogeArray の要素が1つ (一意に定まる) 場合はその値を、そうでない場合はデフォルト値をセット
            $id = count($hogeArray) === 1 ? (int)$hogeArray[0]['id'] : 0;
            $rows[] = [
                'create_date' => date('Y-m-d H:i:s'),
                'name' => $val[0],
                'hoge_id' => $id, // 上述でセットした id を使用
            ];
        }
        $this->insert('fuga', $rows);
    }

    protected function down(): void
    {
        $this->table('fuga')
             ->drop();
    }
}

次に fuga を作成し、そこに徐に $this->select() で SQL文を発行、先程流し込んだデータを抽出します。

その抽出したデータと fuga に流し込みたいデータを突き合わせて初期データを生成し、それを fuga に流し込む……という算段。

これで意図したデータをマイグレーションすることができました。

参考

GitHub - lulco\/phoenix: Framework agnostic database migrations for PHP.
- phoenix\/PdoAdapter.php at master · lulco\/phoenix · GitHub

ドキュメントがないのでコードを読んで普通に select とか使えそう、と思って試したりしていました。

Elixir+PhoenixのサービスをHeroku+Dockerで動かす

2019-09-25T09:50:26+09:00

Elixir & PhoenixのサービスをDockerイメージでHerokuにデプロイした時の備忘録です。

背景として、元々GCE上で動作させていましたが、GCEのIPが有料になるかもという情報があったのでHerokuに移行することにしました。ただ、無料枠で運用している限りだとIPも有料にはならないかもということなので意味はなかったかもしれません。

ただ、もう誰も使っていないサービスでデータも少ないですし、ElixirとかNodeのようなビルドがある言語のサービスは本番サーバーでビルドするとサーバーが止まってしまうため本来行うべきではないため、気分転換にDockerでのリリース形式への変更を試してみるのには良かったかなと思いました。

ちなみにHerokuではよく使われているElixir用のBuildpackがあるため、本来はそちらを利用したほうが簡単だと思います。しかし、今回のサービスは結構バージョンが古く、ちらっと試したところ動かないようでした。何か設定がおかしかったのかもしれませんが、とにかく試行錯誤するよりは元々Linuxサーバー上で動いているものなのでDocker化してデプロイするようにした方が早くて確実そうだったのでそちらの形にしました。

環境

Elixir 1.6.0
Phoenix 1.3.0

Dockerfileをつくる

できたのがこんな感じです。

FROM elixir:1.6.0-slim

RUN apt-get update && \
    apt-get install -y dbus git curl
RUN curl -sL https://deb.nodesource.com/setup_9.x | bash -
RUN apt-get install -y nodejs inotify-tools
RUN apt-get install -y --reinstall build-essential
RUN apt-get clean && \
    rm -rf /var/lib/apt/lists/*

ENV MIX_HOME=/root/.mix MIX_ENV=prod

COPY . /app
WORKDIR /app

RUN mix local.hex --force && \
    mix local.rebar --force && \
    mix deps.get && \
    mix compile

EXPOSE 4000

CMD mix phx.server

開発もDockerで行っており、本番もLinuxでデプロイ方法はメモしていたのでここは特に問題ありませんでした（余分な処理は混じっているかもしれませんが）。JavaScriptのビルドもありますがこれはローカルでビルドしてそのまま使っています。今回はもう更新しないサービスのDocker化のため処理を入れていませんが、必要であればここでビルドもしておくと良いかもしれません。

細かい部分をメモがてら解説しておきます。

MIX_HOMEを指定

環境変数としてMIX_HOMEを指定しています。

ENV MIX_HOME=/root/.mix MIX_ENV=prod

HerokuのDockerデプロイではrootユーザーではなく、その場で適当なユーザーが作られそちらで起動などのコマンドが実行されます。そのため、Dockerイメージビルド時にhexやrebarを追加した時にrootのディレクトリにインストールされたものが認識されず、サーバー起動コマンド実行時にまたインストール＆ビルドが行われてしまいます。すると時間が経ちすぎてデプロイに失敗します。そのためイメージビルド時に処理したものを正常に認識させるため、MIX_HOMEを指定しています。

dockerfile内でユーザーの作成＆指定も可能ですが、これは無効となります。

EXPOSEは不要

EXPOSE 4000を書いていますがこれは不要です。後述しますが、デプロイ時にPORTの環境変数が渡されるため、そちらでサーバーを起動するようにPhoenix側で設定する必要があります。

Phoenixの設定

config/prod.exsを設定します。元々のサーバーの設定から変えたところはとりあえずこんな感じになりました。

config :profile, ProfileWeb.Endpoint,
  load_from_system_env: false,
  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],
  http: [port: System.get_env("PORT")],
  cache_static_manifest: "priv/static/cache_manifest.json"

config :profile, Profile.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),
  charset: "utf8mb4",
  ssl: true,
  pool_size: 5

環境変数を使う形にする

下記のように、可能な限り環境変数を使う形にします。

  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),

今はどうか知りませんが、Phoenixのプロジェクトを初期化するとprod.secret.exsを作ってそれがprod.exsから読み込まれることで本番の設定をする、という形になっていましたのでついついその形でやってしまいがちかもしれませんが、Herokuなどで利用することを考えると全部環境変数を利用する形にしておく必要がありますし、そもそも設定も環境毎で別にする必要もなくなるため環境変数を利用する方がシンプルだと思います。

DBのpool_sizeを減らす

  pool_size: 5

Herokuの無料DBはいくつか種類があります。今回はJawsDBを使っていますが、どれにしろ最大接続数が決まっていますので、それより低くpool_sizeを設定しておかないと接続エラーで起動できなくなります。各DBの仕様を見て最大数よりもちょっと少なめにしておきましょう。

ポートの設定

前述したとおり、ポート番号は環境変数で指定されるため、それでListenする必要があります。そのため下記のように指定します。

  http: [port: System.get_env("PORT")],

URLの設定

通常は不要かもしれませんがURLの設定もしています。

  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],

OGPを利用しているため、Routerのヘルパーで正しい完全なURLをテンプレート上に出力する必要がありました。正しく設定をしないとhttp://localhost:11242みたいなURLが出力されてしまうため、上記のような設定を追加しています。port: 443は不要かなと思いましたが、設定しておくとURLのポート表記を消すことができます。

デプロイ

諸々の設定ができたらデプロイします。これはHerokuのダッシュボードのDeployページで全部確認できますので細かくは書きませんが、とりあえず

heroku container:push web

で手元のDockerfileのイメージがビルド＆pushされ、

heroku container:release web

でpushしたイメージでリリースされます。あとはheroku runでマイグレーションを行ったり、heroku logsでログを確認しておかしなところを解決すれば動くと思います。下記は実際に動いているものです。（絵文字が文字化けしていますが他のところでは正常に表示されているので単にここの不具合のようです。もう修正はしませんが…）

https://torima.appllis.net/users/dala00

独自ドメイン

独自ドメインは解約したかったのでついでに適当なサブドメインにURLを変更しました。ただどちらにしろ独自ドメインの設定をHeroku側で行わなければなりません。ただ、どうもHerokuでの独自ドメインは有料プランでないとできないようでした。

しかし、Cloudflare経由にして無理やりSSLにすることもできるようですので、今回はそのようにしました。～～.herokuapp.comをCNAMEとしてDNSレコードを追加すればよいようです。Herokuの画面で一緒にDNS Targetというものも表示されますが、これはCloudflare経由の場合は関係ないようです。

まとめ

Buildpackがあればそれを使えば楽ですが、Dockerを使えば特殊なパッケージをインストールしたサービスも動かす事ができますので、必要に応じてHerokuのDockerデプロイを使ってみると良さそうです。CI上でビルド&pushすればGitHubにpushするだけでも可能そうです。

容量が少ないですが言語問わず無料でRDBが使えて簡単にデプロイできるのはHerokuだけだと思いますので、ユーザーやアクセスの少ない初期のサービスなどはやっぱりここが良さげだなと感じました。

ElixirのExTwitterでツイートする

2018-09-21T20:04:31+09:00

ElixirにはExTwitterというTwitter用のライブラリがある。
それでツイートしてみた。

設定

ExTwitterの説明通り。access_tokenとaccess_token_secretはユーザーのものを使うので空にしている。

  def tweet(token, secret, body) do
    ex_twitter_configure(token, secret)
    ExTwitter.API.Tweets.update(body)
  end

  defp ex_twitter_configure(token, secret) do
    conf = [
      consumer_key: Application.get_env(:extwitter, :oauth)[:consumer_key],
      consumer_secret: Application.get_env(:extwitter, :oauth)[:consumer_secret],
      access_token: token,
      access_token_secret: secret
    ]

    ExTwitter.configure(:process, conf)
  end

ログイン中のユーザーのアクセストークンを使うために、API実行前に設定をしている。

Phoenix1.3でex_adminを使う

2018-04-03T04:36:07+09:00

Phoenixではex_adminという管理画面作成パッケージを導入することで簡単に管理画面が作成できる。

smpallen99/ex_admin: ExAdmin is an auto administration package for Elixir and the Phoenix Framework

しかし依存関係やフォルダ構成の違いの問題で最新のPhoenixではうまく動かない。ただ、よくよく調べてみると下記のphx-1.3ブランチを使えばできるっぽいので試してみた。

https://github.com/smpallen99/ex_admin/tree/phx-1.3(https://github.com/smpallen99/ex_admin/tree/phx-1.3)

導入方法

phx-1.3ブランチを指定して入れる。ビルドに失敗するのでgettextのバージョンも上げる。

mix.exs

defp deps do
  ...
  {:gettext, "~> 0.13.1"},
  {:ex_admin, github: "smpallen99/ex_admin", branch: "phx-1.3"},
  ...
end

configを追加。

config.exs

config :ex_admin,
  repo: MyProject.Repo,
  module: MyProjectWeb,
  modules: [
    MyProject.ExAdmin.Dashboard,
  ]

後は通常通りのインストールと同じ。

brunch-configの修正

そのままだとex_adminのcssとかが混ざってしまう。brunch-config.jsに修正方法が追記されているので、そのとおりに修正。

またその際、node_modules内のcssをインポートしている場合はcssの設定だけ下記に修正が必要。

        "css/app.css": /^(css|node_modules)/,

モデル追加

mix admin.gen.resource User

これは特に変わりはない。ただ、1.3だとphx.gen.htmlを使っている場合、context module以下にモデルを入れていると思う。例えばAccounts.User等。

なので生成されたadmin/user.ex内のモデルの指定だけ修正しておく。

admin/user.ex(before)

  register_resource MyProject.User do

admin/user.ex(after)

  register_resource MyProject.Accounts.User do

これで動作した。

WerckerでPhoenixアプリケーションのCI

2017-12-26T06:09:15+09:00

※1.6.0にしてフォーマットを追記

WerckerにてPhoenixアプリケーションのCIをするためのwercker.yml。
DBもservicesで追加できるので専用のコンテナを準備する必要がない。

box: shufo/phoenix:1.6.0

services:
  - id: mariadb
    name: mysql
    username: root
    password: ""
    tag: latest
    env:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"

build:
  steps:
    - script:
        name: mix format --check-formatted
        code: mix format --check-formatted

    - script:
        name: mix deps.get
        code: mix deps.get

    - script:
        name: mix test
        code: mix test

ほんとはbrunchのビルドもしたかったのだがこのboxだとnpmコマンドが見つからない。
自分で作っているboxを使えば良いのだが、面倒だったのでとりあえずelixir側だけにした。

サイボウズLiveを作る-第6回-イベント作成

2017-12-21T06:19:58+09:00

あと一つ大きなメイン機能であるイベント機能が残っていたのでそちらを作成した。

色々見てみた結果、とりあえず全部FullCalendarに置き換えればいいだろうと言う結論に至った。

FullCalendar - JavaScript Event Calendar

期間や範囲切り替えもあるし、これだけで一通りまかなえる気がする。

イベント予定メニューマスタ

本家にはない(?)が、予定メニューにも色を付けられるようにした。

一覧もvuedraggableを使ってドラッグ＆ドロップで簡単に並び替えできるようにした。

面倒かと思ったが、元々のテンプレートをとりあえずコピーから始められるのでそれほどでもなかった。

	予定メニュー名
		編集削除

保存側。

  def update_schedule_categories_order(group_id, ids) do
    Enum.with_index(ids)
    |> Enum.each(fn{id, index} ->
      schedule_category = get_schedule_category!(id, group_id)
      update_schedule_category(schedule_category, %{"display_order" => index + 1})
    end)
  end

カレンダー

こちらも面倒かと思ったが、データの取得はコールバックに作ればいいだけだったので非常に楽だった。

取得側。
こういう重そうな範囲検索は、大規模サービスだとどう実装してるのか気になる。
日毎にデータを分けてるのかな。（日を子データにしてるとか）大変そう。

  def list_schedules_for_range(group_id, start_date, end_date) do
    query = from s in Schedule,
      where: s.group_id == ^group_id
        and (
          (s.start_date < ^start_date and ^end_date < s.end_date)
          or (^start_date <= s.start_date and s.start_date <= ^end_date)
          or (^start_date <= s.end_date and s.end_date <= ^end_date)
        )
        and is_nil(s.deleted_at)
    Repo.all(query)
    |> Repo.preload(:schedule_category)
  end

不足点

リピートの予定とか放置してる。

あと、設備とかどこで使ってるんだろうと思ったら、アクセスの方法によって登録できたりするっぽい。
完全に抜けてる。

わかりづらいなここは。急にグループ関係なしの画面になるし意味が分からない。

次

テスト放置なので整備しようかと思う。
そっちの方が面白くて書くこと多かったりするかもしれない。
ソース書いてるのVueばっかりだし。

Copying live

Systemdを使ったPhoenixの本番デプロイ詳細例

2017-12-19T06:24:49+09:00

Elixir Advent Calendar 2017 - Qiita

19日目。

サーバーを準備し、コンテナを使わずに運用できるところまでの準備まで一通りまとめてみた。
Systemdで動作させる。

（以前残したログをまとめているだけなので正確でない可能性あり）

前提

Elixir1.5
Phoenix1.3
Debian

初期設定

最初だけ本番で調整したものをコミットしたりもするのでgitもちょっと設定。

sudo apt-get update
sudo apt-get install -y git dbus
sudo timedatectl set-timezone Asia/Tokyo
git config --global user.name "name"
git config --global user.email "email"

Elixir & Phoneix & Node.js

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb
sudo apt-get update
sudo apt-get install -y nodejs inotify-tools esl-erlang elixir
mix local.hex --force
mix local.rebar --force
mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez --force
sudo apt-get install --reinstall build-essential

DB

MySQLとかPostgreSQLとか。
普通は別サーバーだろうし省略。

ビルド

ssh-keygenかtokenかでcloneできるように準備。
適当なので環境変数とかユーザーは適宜いい感じにしてもらった方が良いかもしれない。

git clone ********.git
cd appdir
mix deps.get --only prod
sudo MIX_ENV=prod mix compile
cd assets
npm install
sudo npm install -g brunch
brunch build --production
cd ..
sudo MIX_ENV=prod mix phx.digest
sudo MIX_ENV=prod mix ecto.migrate
sudo MIX_ENV=prod mix phx.server

とりあえずここまでで動くか確認する。

Let's Encrypt

省略。下記の記事に一応詳細は書いてある。

PhoenixでLet's EncryptによるSSL - アルファブレンドプログラミングチップス

Systemd

sudo vi /etc/systemd/system/myapp.service

[Unit]
Description=My app

[Service]
WorkingDirectory=/home/username/appdir

Restart=always
Environment=MIX_ENV=prod HOME=/root
ExecStart=/usr/local/bin/mix phx.server

[Install]
WantedBy=multi-user.target

sudo systemctl enable cybozulive
sudo systemctl start cybozulive

運用

pull, compile, brunch build, digest, migrate, restart

サイボウズLiveを作る-第5回-グループへ参加

2017-12-06T06:25:29+09:00

とりあえず一旦グループにメンバーを追加する機能を進めてみた。

メールアドレスは今のところ登録してほしくないし、とりあえずそれ無しでできる部分だけ進めた。

具体的には本家と同じで、招待URLを使ってそこからアクセスしてログインすればグループ申請となる形。

というか、本当にほとんどそれくらいなので何も書くことがない。
とりあえず、ただそのまま処理を書いてるだけなので何の役にも立たないがソースでも貼っておく。


  def join_request(conn, %{"id" => id, "invitation_hash" => invitation_hash}) do
    user = Auth.get_user(conn)
    group = Groups.get_group!(id)
    cond do
      invitation_hash != Group.invitation_hash(group) ->
        redirect(conn, to: "/")
      user ->
        Groups.create_invitation(user, group)
        redirect(conn, to: group_path(conn, :index))
      true ->
        conn
        |> put_layout(false)
        |> render("join_request.html", group: group, invitation_hash: invitation_hash)
    end
  end

ログインしていたらそのままメッセージもなく申請データが登録されて自分のページに戻るので、
非常にわかりづらい。さすがに直した方がいいかもしれない。

承認。

  def approve(conn, %{"group_id" => group_id, "id" => id}) do
    user = Auth.get_user(conn)
    group = Groups.get_group!(group_id)
    invitation = Groups.get_invitation!(id, group_id)
    invitation_params = %{"closed_at" => Timex.now}

    result = Repo.transaction(fn ->
      Groups.update_invitation!(invitation, invitation_params)
      Groups.create_group_user!(invitation.user, group)
    end)

    case result do
      {:ok, _changes} ->
        conn
        |> put_flash(:info, "承認しました。")
        |> redirect(to: invitation_path(conn, :requests, group_id))
      {:error, _any} ->
        conn
        |> put_flash(:error, "エラーが発生しました。")
        |> redirect(to: invitation_path(conn, :requests, group_id))
    end
  end

あとはページ上に表示されているユーザーのリンクは単純なusersのshowだったが、
関係ないグループのユーザーも表示できてしまうので全てGroupUserのリンクに変更し、
同じグループのユーザーしかアクセスできないものにした。
自分の編集画面などはid等のパラメータなどもなしのURLに変更。

考察

自分の知っている人を新たなグループに招待する機能もサイボウズLiveにはあり、
それは便利なので必要かなと思う。
今回は申請、許可的な機能だがそちらは招待なので参加する側が許可すれば参加できる、
今回とは逆の機能となる。
招待テーブルを作るのか、フラグで分けるのか、また気が向いた時に本家の画面を見て決めたりなどが必要。

次

次はイベント機能を進めようかと思う。
それが終わったら今テストを全く触っておらず、自動生成されたままのためエラー出まくりなので、
そっちを一旦整備もしたい。修正したり要らないものを捨てて絞ったり。
（なんとなくそっちの方が書くことがあるような気がする）

あとはイベント機能に伴い、今まで放置してたタイムゾーン問題も少し時間をかけて調べる時間を取ろうと思う。

個人開発のだいたいの流れの例

2017-12-05T07:03:13+09:00

個人開発 Advent Calendar 2017 - Qiita

の5日目。

概要

普段から時間があればプログラミングで遊びつつ何か作成している。
せっかくなので誰も使わなくてもリリースしたりしていて、
それらは特に仕事でやっているのとかけ離れているものではないので、
適当に箇条書き程度で紹介。

今作っているもの

ちょっと前にサイボウズLiveが終了すると発表された。
自分も丁度お客さんが使っていてそこでやり取りをしていた。
丁度Elixir & Phoenixを使って色々遊んでいたところに飛び込んできたニュースで、
丁度別のアプリケーションをキリのいいところまで作り終えたところだったので、
サイボウズLiveをコピーして作ってみようと思い作成中。

成果物は下記。

Copying live

ちなみに当ブログで連載中。

サイボウズLiveを作るカテゴリーの記事一覧 - アルファブレンドプログラミングチップス

進め方

とりあえずどんどん出来ていくのが楽しいので、細かいところは無視してどんどん自分のやりたいところを先に進める。
細かいところは後回し。
今もデータ登録が中心で削除等の細かい機能は放置している。

デザイン

デザイナーじゃないのでやっぱりBootstrap。
特に

Bootstrap

がおしゃれで何にでも使えるので良いと思う。
JavaScriptのフレームワーク毎にMaterial Desginのライブラリがあったりもするのでそういうのでもいい。

とりあえずの画面

掲示板

Todo

エディタ

Visual Studio Code

今のところ知っている中では軽量＆高機能＆設定手軽なものでベストだと思う。

開発環境

docker-composeを使う。Linux Mintなのでただインストールして使うだけ。

Elixir & Phoenixだと下記のような感じ。
見てのとおりだがPhoenix & MySQL & phpMyAdmin。
Phoenixのイメージは誰かがどこかで公開していたのを参考にしただけのもの。

version: '2'
volumes:
  mysql_data:
    driver: 'local'
services:
  mysql:
    image: mysql:8.0
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3310:3306"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "true"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=
    ports:
      - 8100:80

  cybozulive:
    image: dala00/phoenix:1.3.0
    env_file: .docker-env
    volumes:
      - .:/var/opt/app
    ports:
      - "4000:4000"
    tty: true
    stdin_open: true

ソース管理

自分の場合、ソースを公開していいならGitHubに置くし、
多少大きくてあまり公開したくないものはBitbucketに置いている。
(Bitbucket最近重い気がするけど)

フロント

Vueを使っている。
Phoenixは最初からbrunchが入っているのでVueを入れたらそのまま使える。
Phoenixの開発サーバーに元々ウォッチ機能がついていて、htmlもcssもJavaScriptも全部保存時に勝手に画面を更新してくれるので何も考える必要がない。
そのためjQueryを使う意味すら無いしもう全員Vueで良いと思う。
なにより簡単に適当に一部のみコンポーネント化できるのが最高。

PHPならLaravelも最初からVueが使える。
もしフレームワークに何もついてなくてもwebpack導入してwatchするだけなのでとりあえずもうVueを使っておけばいいと思う。

公開

せっかく作ったならぐちゃぐちゃでも公開していったらいいと思う。

僕の場合、PHPならさくらのスタンダードを１つ借りてるのでそちらにアップして公開する。
（バージョン上げると動かなくなるものも入っているのでもうひとつ借りたくなるところ…）

それ以外の場合、VPSとかでも１アプリケーションごとに500円とか千円とかかかってしまい、
積み重なっていくとモチベーションに影響してしまうので、最近だと全部GCEの無料のプラン。
Herokuでも良いかもしれないがどうもDBの接続が安定しないようなのでちょっと不安。

Phoenixのデプロイ方法はAdvent Calendarの別の記事で紹介する予定。

あとSSLは例えしょうもないアプリでももう必須だと思う。
焦らずにリリース前の、失敗してサーバーをぐちゃぐちゃにしても問題ないタイミングでちゃんと設定しておきたい。

PhoenixでbrunchのままVueを使う

2017-11-30T06:52:24+09:00

Vueといえばwebpackというイメージだが、Phoenixを使うと最初からbrunchが入っている。
webpackを使うこともできるが色々と設定するのも面倒なので、簡単にbrunchのまま使うための方法。

ちなみに下記で紹介されている方法と同じ。

Phoenix, Brunch and VueJS: Part 2 - Baroni Tech

とりあえずVueをインストール

npm install vue

そしてbrunchで使えるようにするためのライブラリもインストール。
両方無いと動かない。

npm install --save-dev babel-plugin-transform-runtime vue2-brunch

サンプルのGithubのbrunch-config.jsを見てみると、下記のようになっているので追記。
(aliasesを追記)

  npm: {
    enabled: true,
    aliases: {
      'vue': 'vue/dist/vue.common.js'
    }
  }

あとは元々あったapp.jsに下記を追記するだけでもう動く。

import 'vueify/lib/insert-css'
import Vue from 'vue'
import Hello from './components/hello.vue'

new Vue({ 
  el: '#container',
  components: { Hello }
});

上記であればhtml上のid=container要素内のhelloタグがあれば動作する。
勝手にcontainer内が全部置きかわってしまったりなどはしないので、
一部だけ実装したいとかでも可能。
非常に簡単で便利。

サイボウズLiveを作る-第4回-Todoをざっと

2017-11-28T07:21:48+09:00

掲示板をざっと作成後、次は次に簡単そうなToDoを作成することにした。
とりあえずざっと下記を作成した。

ToDoの新規登録、編集、コメント追加

特に目新しいこともなく、コメントなどはほとんど掲示板と同じ。
黙々とシンプルに作成したので、特筆することはなかった。

担当者選択UI

本家だとselectのマルチセレクトで複数の担当者を選択できるように実装されている。
昔は良く使われていた気がする。ちゃちゃっとjavascriptで作成できる。

ただ、今の時代はそういったUIはnpmでインストールするだけ。
丁度良さそうなものを見つけたので導入した。

GitHub - SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js

READMEを見ると分かるように、ドラッグで並び替えも、左右のボックスで入れ替えもできる。
Vueのコンポーネントを作成してhiddenタグを自動的に更新するだけで実装できる。

コンポーネントの実装も非常にシンプル。

呼び出しも簡単。

]">

締め切り日時選択

これもよくあるのはinputタグをクリックすると日付選択UIが現れるもの。
ただ、inputタグを使って直接入力させる必要性も感じなかったので完全にDatepickerとTimepickerで選択させるようにした。

Datepicker。左下のリンクをクリックで表示される。ゴミ箱クリックでnullとなる。

Timepicker。

実装も特筆することはなくシンプル。Timepickerもほとんど同じ。

マークダウン

次

次はスケジュールを作成、としたいところだが、グループウェアなのにユーザーが自分しかいないのが意味不明なので、
とりあえず招待とかを作ろうかと思う。
本当はメールアドレスのような個人情報は登録したくはないのだが…非ユーザーを招待するならそれしかなさそう。
（なんかあるのかな）

Copying live

サイボウズLiveを作る-第3回-トピック登録まで

2017-11-21T06:49:27+09:00

グループは作成できたので次は実際のコンテンツを作成していく。
とりあえず仕様的にシンプルそうな掲示板を作ってみることにした。
（もしかすると細かい機能が多くあるのかもしれないが）

処理的に特筆するところは特に何もなかったが、
投稿に関してはwysiwygエディタを入れた。

最終的に画像のアップロードも必要だと思うので有料になるCKEditorは無し。
最近のスタンダードがよく分からなかったのでStarやForkが非常に多い下記を入れてみた。

GitHub - quilljs/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility.

昔のwysiwygエディタといえば、textareaをターゲットにして起動すれば勝手にぜんぶやってくれたが、
これは多分SPA等も考慮されていると思うので勝手にPOSTまで出来るようにはなっていない。
そのため自前でハンドリングしてhiddenタグに入れる。

import Quill from 'quill';

$(function() {
  $('div.richtext').each(function() {
    const $this = $(this);
    const quill = new Quill(this, {
      theme: 'snow',
    })
    $this.data('quill', quill);
    quill.on('text-change', function(delta, oldDelta, source) {
      const html = $this.find('.ql-editor').html();
      this.next('input[type=hidden]').val(html);
    }.bind($this))
})

  
    <%= label f, :body, "本文", class: "control-label" %>
    
      <%= raw(Ecto.Changeset.get_field(@changeset, :body)) %>
    
    
    <%= error_tag f, :body %>

上記は元々jQueryで書いていたが下記はVueで書きなおしたもの。

呼び出しも下記で良いので非常に簡単。新しい時代が来てるなぁという感じ。

htmlを取る方法も特に無いようなので、
issueを探ってみたら.ql-editor内をそのまま使えばいいとの事だったのでそのようにした。

現在までの完成分はこちら。
とりあえずコメント投稿まで。カテゴリも設定、絞り込みできるようにした。
その他の処理はほぼエラー。
あとはタイムゾーンの設定をしていないので時刻がおかしい。

Copying live

サイボウズLiveを作る-第2回-グループ登録まで

2017-11-14T07:04:08+09:00

アイコンは出来たので引き続きグループの作成機能。

本家だととりあえず一番簡単なパターンでは、グループ名だけ入力すれば登録できる。
とりあえずそこまでを作った。
アイコンも選択できるようにしている。

実装は非常にシンプルで、まずモデルに所属メンバー用のアソシエーションを設定。マイグレーションなどもマニュアル通り。

  many_to_many :users, Cybozulive.User, join_through: "groups_users"

登録処理もシンプル。

  def create(conn, %{"group" => group_params}) do
    user = Auth.get_user(conn)
    changeset = Ecto.build_assoc(user, :groups)
    |> Group.changeset(group_params)
    |> Ecto.Changeset.put_assoc(:users, [user])

    case Repo.insert(changeset) do
      {:ok, group} ->
        conn
        |> put_flash(:info, "グループを作成しました。")
        |> redirect(to: group_path(conn, :show, group))
      {:error, changeset} ->
        icons = IconRepo.get_select_icons(user.id)
        render(conn, "new.html", changeset: changeset, icons: icons, show_group: false)
    end
  end

とりあえずここまでを公開した。

Copying live

https://live.alphabrend.com

GCEのf1-micro、1台にDBまで全部詰め込み。
Let's EncryptでSSL対応。
体裁とか未完成の部分はぐちゃぐちゃ。

PhoenixのTaskでDBにアクセスする

2017-11-08T06:42:30+09:00

PhoenixでTaskを試した。

実際にはPhoenixではなくmix自体のtaskを作成して実行するだけ。

ただ、単にtask内でRepoを使ってDBアクセスしようとすると下記のようなエラーが出る。

repo App.Repo is not started, please ensure it is part of your supervision tree

どうもRepoはちゃんとスタートさせなければならないらしい。

最終的に下記の様にRepoの初期化を入れることで動いた。

defmodule Mix.Tasks.Aiue.Oooo do
  use Mix.Task

  alias App.Repo
  alias App.User

  import Mix.Ecto

  @shortdoc "aiueo"

  @moduledoc """
    This is aiuoe
  """

  def run(args) do
    Mix.shell.info "=== Active user ==="

    ensure_repo(Repo, args)
    ensure_started(Repo, [])
    user = Repo.one!(User)

    changeset = User.changeset(user, %{email: "[email protected]"})
    Repo.update!(changeset)

    IO.inspect(user)
  end
end

サイボウズLiveを作る-第1回-アイコン登録まで

2017-11-07T06:28:04+09:00

概要

サイボウズLiveが終了するとのこと。

無料グループウェア「サイボウズLive」サービス終了のお知らせ | サイボウズ株式会社

丁度他のアプリケーション作成が一区切りついたところだったので、今度はサイボウズLiveのコピーを作ってみようと思う。
ざっと見てみたらそんなにページ数も多くなさそうな気もするし。

一通り作ってはみようと思うが特に代替、移行先として呼びこむつもりはない。
そんなアクセスが来たら止まるだろうし。

仕様

Elixir1.5
Phoenix1.3
Bootstrap Material Design

JavaScriptはAngularかVueを使おうかと思ったが、面倒だったことを思い出すと嫌になったのでやめた。
ソロだし付属のbrunchでES6を使ってjQueryで綺麗に書けば十分。

※PhoenixでVueも簡単に使えるようなので置き換え中。

とりあえず作ったところ

認証

とりあえずTwitterでログインできるようにした。

GitHub - ueberauth/ueberauth_twitter: Twitter Strategy for Überauth

ユーザー作成やログイン部分は自分で勝手にやりたかったので、
ログインURLの発行とcallbackのパラメータ構築だけ任せ、
取得したパラメータであれこれやっている。

defmodule Cybozulive.AuthController do
  use Cybozulive.Web, :controller

  alias Cybozulive.UserRepo

  plug Ueberauth

  def request(conn, _params) do
    Ueberauth.Strategy.Helpers.callback_url(conn)
  end

  def callback(%{assigns: %{ueberauth_failure: _fails}} = conn, _params) do
    conn
    |> put_flash(:error, "Failed to authenticate.")
    |> redirect(to: "/")
  end

  def callback(%{assigns: %{ueberauth_auth: auth}} = conn, _params) do
    user = UserRepo.find_or_create!(auth)
    conn
    |> Cybozulive.Auth.set_user(user)
    |> redirect(to: "/")
  end
end

アイコンの登録

とりあえず掲示板とか作りたいところだが、

掲示板作るにはグループが要る
グループ作るにはアイコンが要る

ということで面倒だがとりあえずアイコンを登録できる機能を作った。

phoenix.gen.htmlとarc_ectoでちゃちゃっと作れた。
そのままだと画像は公開されないので、

Elixir / Phoenix — Uploading images locally (With ARC)

にあるとおり、Plug.Staticの設定で公開できる。

  plug Plug.Static,
    at: "/uploads", from: Path.expand("./uploads"), gzip: false

（公開側はBootstrap Material Designだが、管理画面は面倒だし本当は作りたくなかったのでPhoenixデフォルトのBootstrap）

全部これで登録はやってられないのでスクリプトで一括登録で作成予定。

Phoenixで作った請求書作成システムをリリース

2017-10-26T06:27:36+09:00

Elixir & Phonenixで作った請求書作成システムをリリースした。

元々Misocaを使っていたが、弥生の傘下に入ってからフリープランでは５通までしか作成できなくなってしまった。

別に良いかと思っていたが、ちっちゃい請求が続いたりするとどうも超えてしまうのではないかと怖くなることが多くなった。
そのため、ちょうどElixir & Phoenixで遊んでいたので自分で作ったら良いんじゃないかと思い作成してみたところうまくいった。

請求書作成サービス

Bill Builder

基本的には自分で使う用なので質素でシンプル。
別に使いたい人がいたら使ってもらっていいと思う。
まだステージングサーバーもなくDBバックアップもしてないけど、
自分で使っているのでそのうちする予定。

安定するかは不明だけど、自分で使わないといけないから使える程度にはメンテナンス＆拡張する予定。

本番環境

Elixir 1.5
Phoenix 1.3
MySQL 5.7
Google Compute Engine f1-micro
Systemctlによるサービス実行
SendGrid
Let's Encrypt
bootstrap material design

開発環境

docker-composeに下記のようなサービスを入れている。

Phoenix
MySQL
phpMyAdmin
PDF作成

Elixir & Phoenixで開発してみた感想

非常に良い。とにかくphoenix.gen.htmlでモデル、コントローラ、テンプレートまでざっと作成してくれるのが良い。
それだけで参考になるしちょっといじれば動くのでとてもスムーズに色々進む。
テンプレートがデフォルトでbootstrapなのもいい。
phpだとCakePHP3も同様に最高だった。Laravelはコントローラのメソッドが空なのでやる気をなくす。

Elixir自体が今まで使っていた言語とちょっと違うので癖があり躓いたりしたが、
慣れたら本当に気持ちよく迅速に開発できそう。

デプロイ

色々Elixirのデプロイ方法もあるみたいだが、とりあえず今は手動。
頻繁なリリースもないし、今のところ誰も使ってないのでとめちゃいけないということもないし。

とはいえ、手動でもデプロイは非常に簡単。

gitでpull
compile
cssやjsいじってればそちらもビルド
マイグレーション追加してたらmigrate
準備出来たらsystemctlでrestart

多分restartの瞬間くらいしかダウンタイムも無いと思うのでのんびりできる。
Elixir自体が自分でサービス稼働させているからこその利点。

運用費

とりあえずf1-microだし誰も使ってない限りは無料。
（１サーバーにElixirもMySQLも全部入っている）
だれか使い始めたら適当に広告でも張るがあまり意味なさそう。

今後の拡張

毎月同じ金額の請求をメールで送るとかできたら良いな、と思ってたけど、
実は届いていなかった、とかがあると怖いので実装するかどうか検討中。
SendGrid使っているためログは見やすいので問題ないのかもしれない。

領収書は使わないけど、体裁ほとんど同じでいいなら作ろうかなとも思う。

まとめ

またなんかPhoenixで作りたい。

Bill Builder

PhoenixでLet's EncryptによるSSL

2017-10-11T06:42:22+09:00

前提

PhoenixでLet's Encryptにより無料でSSL対応を行う。

Elixir 1.5.2
Phoenix 1.3.0

手順

基本的には

Phoenix/Elixir App Secured with Let’s Encrypt – Andrew Forward – Medium

で書かれている通り。

とりあえずサーバー起動。

MIX_ENV=prod mix phx.server

サーバーを起動したまま.well-knownフォルダを更新しなければならないのでそのための設定を行う。

まず.well-knownフォルダ以下をそのままアクセスできるようにするための設定。

lib/プロジェクト名/web/endpoint.ex
にてPlug.Staticの設定に.well-knownを追加する。

plug Plug.Static,
 at: "/", from: :yourproject, gzip: false,
 only: ~w(css fonts images js favicon.ico robots.txt .well-known)

これで
_build/prod/lib/プロジェクト名/priv/static/.well-known
以下がそのまま公開され、
http://yourdomain.com/.well-known/****.html
のような感じでアクセスできるようになる。

ちなみに、設定を変更したらアプリケーションを再起動する必要があると思う。
また、再起動すると作っていた.well-knownは消えるので混乱しないよう注意。

うまくいったらあとはcertbotで証明書を発行する。

そして設定を更新。

config :yourproject, Yourproject.Web.Endpoint,
  http: [port: 80],
  https: [port: 443,
    url: [host: "yourdomain.com", port: 443],
    keyfile: "/etc/letsencrypt/live/yourdomain.com/privkey.pem",
    cacertfile: "/etc/letsencrypt/live/yourdomain.com/chain.pem",  
    certfile: "/etc/letsencrypt/live/yourdomain.com/cert.pem"],
  force_ssl: [hsts: true]

これで完了。更新などもそのまま普通にできるようになる。

Now your site is being served up only through SSL directly through Phoenix (no Nginx required).

と書かれているので別のWEBサーバーを使う冗長な方法もあったのだろうか。
とはいえ_build以下を使う方法なので今後のバージョンによってはできなくなる可能性などもあるのかもしれない。

Phoenixで他のフォルダの共通テンプレートをrenderする

2017-10-03T06:19:23+09:00

自動生成されたedit.html.eexのformテンプレート読み込み部分を見ると、下記のようになっている。

<%= render "form.html", changeset: @changeset,
                        action: post_path(@conn, :update, @post) %>

ファイル名しか指定されていないので他の共通フォルダなどに入れている場合は指定が出来そうもない。

共通フォルダなどのファイルを指定したい場合どうすればよいかというと、
よくよく調べるとrender関数は第１引数にViewを指定することもできる。

また、自動生成されたプロジェクトのViewを見てみると、LayoutView等、コントローラに連動していないView等もある。

つまり、まず勝手に使用したいフォルダのViewを作成し、

defmodule App.CommonView do
  use App.Web, :view
end

それを使ってrenderを呼べばいい。これでtemplates/common/test.html.eexが表示される。

<%= render App.CommonView, "test.html" %>

Phoenixでmany_to_manyのフォームを対応

2017-08-20T06:28:37+09:00

Phoenixでmany_to_manyを設定してDBからデータを取得して表示するのは非常に簡単。
ではformで新規登録したり更新したりする際に一緒にmany_to_manyのデータを更新するのはどのようにするのか一通り試してみた。

form

例として、Postに複数のTagが紐付いているパターンで考える。
PostsTagのモデルはなく、join_throughにて文字列でposts_tagsのテーブルを指定しているだけ。

formではTagをカンマ区切りで設定できるという仕様。

とりあえず入力欄として使用するためのtag_namesというvirtualフィールドを作っておく。

    field :tag_names, :string, virtual: true

そしてフォームの入力欄を追加。


  
    <%= label f, :tag_names, class: "control-label" %>
    <%= text_input f, :tag_names, class: "form-control" %>

ここまではシンプルで難しいことはない。

既に存在するデータを入力欄のデフォルトとして表示

既に登録されているデータを更新する際に、上記の入力欄に表示を行うための処理。
とくに難しいことはなく、tag_namesにカンマ区切りの値を入れておくだけ。

モデルに値をセットする関数を追加。

  def prepare_form(changeset) do
    tag_names = Enum.map(get_field(changeset, :tags), fn(tag) -> tag.name end)
    |> Enum.join(",")
    put_change(changeset, :tag_names, tag_names)
  end

これをedit時に呼び出すだけ。

    changeset = Post.changeset(post)
    |> Post.prepare_form

新規登録、編集時にTagとtags_postsを登録する

とりあえず、Tagを登録するためのRepoを作った。
（Tagのモデル内に実装しても良いのかもしれないが、
デフォルトでモデルにはRepoがaliasされていないことからモデル内ではRepoを使用しない方が良い想定なのかということも考慮し、
専用のRepoを作る形とした。
実際どういった形が望ましいのかは不明）

文字列でtag_namesを渡すと保存したTagの配列を取得する関数がメイン。

defmodule App.TagRepo do
  import App.Repo
  import Ecto.Changeset
  alias App.Tag

  def save_tags(tag_names) do
    tags = tag_names_to_tags(tag_names)
    |> Enum.map(fn(tag) ->
      case get_by(Tag, name: tag.name) do
        nil ->
          Tag.changeset(tag)
          |> insert!
        saved_tag -> saved_tag
      end
    end)
  end

  def tag_names_to_tags(tag_names) do
    String.split(tag_names, ",")
    |> Enum.map(fn(name) -> %Tag{name: name} end)
  end
end

これをcreateとupdateで呼び出すだけ。

新しく入力されたタグは新しいTagとして保存され、posts_tagsも登録される。
タグが減った場合はposts_tags（のみ）も減る。

    post = Repo.get!(Post, id)
    |> Repo.preload(:tags)

    tags = TagRepo.save_tags(post_params["tag_names"])
    changeset = Post.changeset(post, post_params)
    |> Ecto.Changeset.put_assoc(:tags, tags)

updateの方のみ、上記のようにpreloadが必要となる。

また、タグが減った場合エラーになるので、モデルに下記のon_replaceの追記も必要。

    many_to_many :tags, App.Tag, join_through: "posts_tags", on_replace: :delete

Phoenixでadminルーティングの認証

2017-08-05T06:26:08+09:00

Phoenixでadminルーティングしてそこだけ認証を入れる。

仕様

/admin/articles
のように最初にadminを含むURLは管理画面
管理画面は管理者ユーザーで認証が必要
管理画面もgen.htmlで自動生成。自分で頑張って作ったりしない
コントローラやアクション毎に全部認証チェックを書いたりしない

モデルを作る

mix phoenix.gen.model
でモデルだけ先に作る。もちろんgen.htmlでルーティングのない箇所のCRUDと一緒にモデルを作ってもいい。

管理者側ページを作る。

下記でadmin向けページを作成できる。

mix phoenix.gen.html Admin.Article articles --no-model title:string ....

これでコントローラやテンプレートも全部adminフォルダに分けて作ってくれる。
モデルのaliasにAdminが含まれているのでそこだけ削除。

認証チェックを行う

認証されていない場合にログイン画面へリダイレクトする。まず下記のようなPlugを作る。
(下記のようにAuthモジュールを作るなり直接セッションで見るなりする）

defmodule App.Plug.Prefix do
  import Plug.Conn

  alias App.Auth

  def init(default), do: default

  def call(conn, params) do
    [prefix] = params
    if !Auth.get_user(conn, prefix) do
      Phoenix.Controller.redirect(conn, to: "/admins/login")
      |> halt
    end
    conn
  end
end

(調べたらどこもhaltしてたんだけどほんとにこれでいいんだろうか）

ルーティングの設定

ルーティングで先程のPlugを導入。pipelineで実装。ついでにレイアウトはadmin.html.eexを使用するようにもしておく。

  pipeline :admin do
    plug :put_layout, {App.LayoutView, :admin}
    plug App.Plug.Prefix, [:admin]
  end

URLのルーティング。pipelineは複数設定できるらしい。

  scope "/admin", App, as: :admin do
    pipe_through [:browser, :admin]

    get "/admins/logout", Admin.AdminController, :logout
    resources "/admins", Admin.AdminController
  end

まとめ

これで管理画面側の処理を別に出来た。通常のユーザーのマイページなども同様にしてatomを変えるだけで実装できる。