Advent Calendar 2022 140日目1の記事です。
I'm looking forward to 12/25,2022 
私のAdvent Calendar 2022 一覧。
はじめに
Elixir を楽しんでいますか
ElixirのWebアプリケーションフレームワークPhoenixで作成したアプリをDockerを使って本番展開しようとしたときに、daisyUIでデコった内容がうまく反映されないことがありました。
この記事は、私はこうしたら解決したよ！ という内容を書いておきます。
結論
COPY lib lib => RUN mix assets.deploy の順となるようにDockerfileを書くのが吉です。
What's daisyUI ?
daisyUI is "The most popular, free and open-source Tailwind CSS component library".
見た目をキレイにデコれます。
見た目は大事です。
daisyUIの導入
話の前提として、Phoenixアプリの準備が必要ですが、そこは省略します。
Phoenixアプリに、daisyUIを導入する手順は紹介しておきます。
以下の通り、進めるとよいです。
Install Tailwind CSS with Phoenix
続いて、assetsフォルダにて、
Install daisyUI as a Tailwind CSS plugin
を行います。
日本語の記事は、
が詳しいです。
Dockerfile
参考となるDockerfileは、
に書いてあります。
これをもとにいくつか書き換えています。
書き換えポイントは次の通りです。
-
COPY lib lib=>RUN mix assets.deployの順になるようにする - Build imageに
OTP-25を使う - npmのインストール
- node_modulesのインストール
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
# Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian instead of
# Alpine to avoid DNS resolution issues in production.
#
# https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
# https://hub.docker.com/_/ubuntu?tab=tags
#
#
# This file is based on these images:
#
# - https://hub.docker.com/r/hexpm/elixir/tags - for the build image
# - https://hub.docker.com/_/debian?tab=tags&page=1&name=bullseye-20210902-slim - for the release image
# - https://pkgs.org/ - resource for finding needed packages
# - Ex: hexpm/elixir:1.12.0-erlang-24.0.1-debian-bullseye-20210902-slim
#
ARG ELIXIR_VERSION=1.13.4
ARG OTP_VERSION=25.0.4
ARG DEBIAN_VERSION=bullseye-20220801-slim
ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
FROM ${BUILDER_IMAGE} as builder
# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git npm \
&& apt-get clean && rm -f /var/lib/apt/lists/*_*
# prepare build dir
WORKDIR /app
# install hex + rebar
RUN mix local.hex --force && \
mix local.rebar --force
# set build ENV
ENV MIX_ENV="prod"
# install mix dependencies
COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config
# copy compile-time config files before we compile dependencies
# to ensure any relevant config change will trigger the dependencies
# to be re-compiled.
COPY config/config.exs config/${MIX_ENV}.exs config/
RUN mix deps.compile
COPY priv priv
# note: if your project uses a tool like https://purgecss.com/,
# which customizes asset compilation based on what it finds in
# your Elixir templates, you will need to move the asset compilation
# step down so that `lib` is available.
COPY assets assets
COPY lib lib
# compile assets
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
RUN mix assets.deploy
# Compile the release
RUN mix compile
# Changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/
# relがないプロジェクトは消しましょう
COPY rel rel
RUN mix release
# start a new build stage so that the final image will only contain
# the compiled release and other runtime necessities
FROM ${RUNNER_IMAGE}
RUN apt-get update -y && apt-get install -y libstdc++6 openssl libncurses5 locales \
&& apt-get clean && rm -f /var/lib/apt/lists/*_*
# Set the locale
RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && locale-gen
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
WORKDIR "/app"
RUN chown nobody /app
# set runner ENV
ENV MIX_ENV="prod"
# Only copy the final release from the build stage
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/my_app ./
USER nobody
CMD /app/bin/server
きちんと理解できていないのですが、サンプルのDockerfileに書いてあるコメントに以下の記述があります。
# note: if your project uses a tool like https://purgecss.com/,
# which customizes asset compilation based on what it finds in
# your Elixir templates, you will need to move the asset compilation
# step down so that `lib` is available.
このコメントと
の記事には、
RUN mix assets.deployより前に、COPY lib libをしなさいと明記されています。
確かにこの通りにやるとうまくいきました 
まとめ
COPY lib lib => RUN mix assets.deploy の順となるようにDockerfileを書くのが吉です。
私はこれで解決しました。
他にもハマるポイントはあるかもしれません。
お便りお待ちしております。
2022/12/25が待ち遠しいです
I organize autoracex.
And I take part in NervesJP, fukuoka.ex, EDI, tokyo.ex, Pelemay.
I hope someday you'll join us.
We Are The Alchemists, my friends!