Phoenix: 静的サイトジェネレータとの連携#

Published on 2020-06-16 00:00:00

静的サイトジェネレータとPhoenixを連携させるには、出力結果をPhoenixのassetsとして管理する必要があります。
その方法は以下の二通りが考えられます。

  • 出力結果を priv 配下に展開する

  • 出力結果を assets/static 配下に展開する

後者がおすすめです。理由は、

前者には以下の デメリット があります。

  • gzip圧縮をする場合、 mix phx.digest をディレクトリ指定で意識的に実行する必要がある

  • priv 配下の見通しが悪くなる

後者には以下の メリット があります。

  • gzip圧縮をする場合、 mix phx.digest をディレクトリを意識せずno optionで実行するだけでよい

  • priv/static に文字通り静的ファイルを集約できる

本サイトは後者の方法でSphinxのHTML出力を assets/static 下に展開させて実現しています。

出力結果を priv 配下に展開する#

ジェネレータの出力先や出力結果のコピー先を priv/directory とし、Plug.Static で配信の設定をするだけです。
※配信設定等については 静的HTMLの配信 を参照ください。

gzip圧縮を行う場合は以下を実行します。

$ mix phx.digest priv/directory -o priv/directory

出力結果を assets/static 配下に展開する#

ジェネレータの出力先や出力結果のコピー先を assets/static/directory とし、Plug.Static で配信の設定をするだけです。
※配信設定等については 静的HTMLの配信 を参照ください。

gzip圧縮を行う場合は以下を実行します。

$ mix phx.digest # オプション無しの場合、 priv/static 配下が圧縮されます。

assets/static と priv/static の関係について#

assets/static 配下のファイル／ディレクトリは webpack によって、
MIX_ENV=devの場合は mix phx.server 実行時に [1]、MIX_ENV=prodの場合は npm run deploy 実行時に
priv/static 配下にコピーされます。
※defaultのphoenixプロジェクトのpriv/static がgit管理されていないのはこのためです。
またMIX_ENV=devの場合、mix phx.server 実行中は assets 配下は webpack の監視対象になっているため、
変更は捕捉され priv/static 配下へコピーされ反映されます。

この監視設定は config/dev.exs で以下のように設定されています。

config :app_name, AppNameWeb.Endpoint,
  # 中略
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]

警告

priv/static へのコピーは上書きで行われるため、 assets/static 配下での削除は priv/static には反映しないことに注意してください。