Nuxt3 x Docker環境の構築（最新版）ソースコードあります。

Nuxt3プロジェクトを進めておりますが、その際に簡単なdocker環境を構築したので共有します。

お急ぎの方はこちらのソースコードを最初にダウンロードください

とりあえずブログの記事はどっちでも良いからDocker環境を動作させたいという方はgitHubへ直接ソースコードをダウンロードください。

環境

MacOS：Sonoma 14.1.1

①まずはNuxtjsのプロジェクトを作成します。

$ npx nuxi@latest init nuxt-docker

②次にnodeディレクトリを作成します

$ mkdir node

③DockerでのNode.js環境の構築

FROM node:20.10.0-slim

ENV TZ Asia/Tokyo

WORKDIR /app

RUN apt-get update \
    && apt-get install -y

④docker-compose.ymlファイルを作成する

version: '3.9'

services:
  nuxt:
    container_name: nuxt
    build: ./node
    volumes:
      - ./:/app
    ports:
      - "3000:3000"
      - "24678:24678"
    tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    command: ./entrypoint.sh

なぜDockerfileとdocker-compose.ymlファイルを分けるの？

docker-compose.ymlではapt-getなどのコマンドが実行できないため分けるのが通例になっています。

↑個人的な感想かもしれません。

エラーに遭遇する

2023年12月8日にこちらの環境を構築しているとNuxtを起動する際にスクショのようなエラーに遭遇しました。

参考

[BUG] Platform-specific optional dependencies not being included in `package-lock.json` when reinstalling with `node_modules` present · Issue #4828 · npm/cli

GitHub

このエラーを改善するためには、package-lock.jsonとnode_modulesを削除して、もう一度 npm install を実行してくださいということなので、entrypoint.shを用意してこちらを実行できるように対応することで、問題がなくなります。

entrypoint.sh

#!/bin/sh

rm -rf package-lock.json node_modules

# パッケージのインストール
npm i

# npm run dev を実行
npm run dev

entrypoint.shを作成して、docker buildを行うと、permission errorで怒られる可能性があります。

Permission Errorに遭遇した場合は、下記のコマンドをローカルPC環境で実行して、実行権限を与えてあげることで問題が解決します。

chmod +x entrypoint.sh

エラー出力も記載しておきます。

nuxt  |  ERROR  [unhandledRejection] Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try npm i again after removing both package-lock.json and node_modules directory.
nuxt  | 
nuxt  |   at requireWithFriendlyError (node_modules/rollup/dist/native.js:64:9)
nuxt  |   at Object.<anonymous> (node_modules/rollup/dist/native.js:73:48)
nuxt  |   at Module._compile (node:internal/modules/cjs/loader:1356:14)
nuxt  |   at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
nuxt  |   at Module.load (node:internal/modules/cjs/loader:1197:32)
nuxt  |   at Module._load (node:internal/modules/cjs/loader:1013:12)
nuxt  |   at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:202:29)
nuxt  |   at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
nuxt  |   at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
nuxt  |   at async Module.loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:2583:37)
nuxt  |