🤖

Next.jsをDockerでdeployするとpermission deniedが出る

2021/09/21に公開

Docker

概要

やっとローカルのインフラ周りができてきたので
次は認証認可を実装していきたい🏄‍♂️

....が、なんかフロントエンド見えるものがないとやりずらいので
Next.jsをMinikube + Istio環境にデプロイしてみたら
実行時にpermission deniedエラーが出てちょっと詰まったのでメモ

雑談

せっかくprivateで作ってるアプリだし
マイクロフロントエンドやってみようかと思って結構調べたけど
相当上手に設計できないと利点以上に困難さが発生する未来しか見えなかったので断念...

技術がNext.js, Reactに縛られるけど
一旦コンポーネントをマイクロサービスの粒度で分割してみるくらいで
留めておくことにしよう・・・

ぶつかった課題

以下公式に書いてある通りのDockerfileを使ったが

ページにアクセスしてみると画面は表示されてるが
何故か以下エラーが出てきた

[web] [Error: EACCES: permission denied, mkdir '/app/.next/cache/images'] {
[web]   errno: -13,
[web]   code: 'EACCES',
[web]   syscall: 'mkdir',
[web]   path: '/app/.next/cache/images'
[web] }

対処したDockerfile

★1に記載した通り
nextjs, nodejsではなくてnodeをuser:groupに指定して書き込み権限あげたら
permissionエラーが出ないようになった

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
# ★1 nodejsじゃなくてnodeをuser:groupに指定
COPY --from=builder --chown=node:node /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1

CMD ["yarn", "start"]

まとめ

ブラウザからアクセスしてcacheにimage作るのはnodeなので
その子に書き込み権限を与えれ上げれば行けた

しょうもないけど、絶対後で忘れるのでメモメモ

概要

雑談

ぶつかった課題

対処したDockerfile

まとめ

Discussion