dockerとtailwindcssについての備忘録

本件について

　本件は、DockerでRemixのウェブフレームワークを使ったサイトを作っていた時に起きたことである。

具体的な症状

　サイト内でほかのページにリダイレクトをしたとき、ページのレイアウトが崩れて、リロードすると正しいレイアウトになる。

解決方法

　Dockerfile内で、postcssのインポートをしていなかったこと。

誤

# ビルドステージ
FROM node:20-alpine AS builder
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
RUN rm -rf node_modules/.cache
COPY . .
RUN npm install @prisma/client bcryptjs @types/bcryptjs argon2 ws @remix-run/dev express-rate-limit uuid @types/uuid jszip
RUN npm run build

# 実行ステージ
FROM node:20-alpine
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app/build ./build
COPY --from=builder /usr/src/app/node_modules ./node_modules
COPY --from=builder /usr/src/app/package*.json ./
RUN rm -rf node_modules/.vite
RUN npm install pm2 -g

正

# ビルドステージ
FROM node:20-alpine AS builder
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install

# 追加
RUN npm install tailwindcss postcss autoprefixer

COPY . .
RUN npm install @prisma/client bcryptjs @types/bcryptjs argon2 ws @remix-run/dev express-rate-limit uuid @types/uuid jszip
RUN npx tailwindcss -i ./public/styles/tailwind.css -o ./app/public/app.css --minify
RUN npm run build

# 実行ステージ
FROM node:20-alpine
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app/build ./build
COPY --from=builder /usr/src/app/node_modules ./node_modules
COPY --from=builder /usr/src/app/package*.json ./

# 追加
COPY --from=builder /usr/src/app/public ./public

RUN rm -rf node_modules/.vite
RUN npm install pm2 -g

感想

tailwind.cssの設定ファイルの問題だと思ったら、そんなことなく、普通にDockerのimageにpostcssがなかっただけでした。Docker特有の現象はあるので、しっかり見よう。