dockerでnuxt開発環境作成

8301 ワード
alpine Docker nuxt.js Docker テキストリンク

公式の手順で作成したところ少しエラーが発生したので手順を整理

Dockerfile
FROM alpine
WORKDIR /app
RUN apk update
RUN apk add  curl
RUN apk add --update nodejs npm && \
    apk add -f nodejs - && \
   node -v && \
   npm -v
docker-compose.yml
version: '3'
services:
 type_nuxt:
  tty: true
  build:
   context: ./
   dockerfile: docker/node/Dockerfile
  ports:
   - "3000:3000"
  volumes:
   - ./:/app
   - /app/node_modules

$ docker-compose up --build -d
$ docker exec -it [nodeコンテナ] /bin/sh

create-nuxt-app を実行するとエラーになった
ubuntuベースのコンテナでは発生しなかったので、alpineに起因しているかもしれない

# npx create-nuxt-app
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module '/root/.npm/_npx/11/lib/node_modules/create-nuxt-app/node_modules/ejs/postinstall.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node ./postinstall.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-01-11T12_49_17_894Z-debug.log
Install for create-nuxt-app@latest failed with code 1

create-nuxt-appをインストールしてから再度
npx create-nuxt-appを実行するとエラーにならなかった

# npm install -g create-nuxt-app
/usr/bin/create-nuxt-app -> /usr/lib/node_modules/create-nuxt-app/cli.js

> [email protected] postinstall /usr/lib/node_modules/create-nuxt-app/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

+ [email protected]
added 350 packages from 200 contributors in 21.641s

# npx create-nuxt-app

create-nuxt-app v2.12.0
?  Generating Nuxt.js project in .
? Project name app
? Project description My exceptional Nuxt.js project
? Author name
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework Jest
? Choose rendering mode Universal (SSR)

　
　
　
※2020-8-9追記
同じ手順で行ったところエラーとなりました
create-nuxt-app のバージョンが上がったのが原因なのか、空のディレクトリじゃないと失敗する様子

# npm install -g create-nuxt-app
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
/usr/bin/create-nuxt-app -> /usr/lib/node_modules/create-nuxt-app/lib/cli.js
+ [email protected]
added 38 packages from 4 contributors, removed 3 packages and updated 7 packages in 22.642s

/app/django_nuxt_test # ls -l
total 4
drwxr-xr-x    2 root     root          4096 Aug  9 01:34 node_modules

# npx create-nuxt-app .

create-nuxt-app v3.2.0
Can't create . because there's already a non-empty directory . existing in path.

# rm -rf node_modules/
rm: can't remove 'node_modules': Resource busy

コンテナ側のnode_modules以下をマウントしているせいか削除もできず、
バージョンを指定して、@2.15.0くらいにすればエラーが回避されました

# npm install -g [email protected]
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
/usr/bin/create-nuxt-app -> /usr/lib/node_modules/create-nuxt-app/cli.js
+ [email protected]
added 3 packages from 1 contributor, removed 38 packages and updated 7 packages in 23.089s

# ls -l
total 4
drwxr-xr-x    2 root     root          4096 Aug  9 01:34 node_modules

# npx create-nuxt-app .

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name (django_nuxt_test)

※2020-8-9追記 end
　
　
　
npm run devを実行する
起動はするがブラウザからアクセスしても表示はされない

# npm run dev

> [email protected] dev /app
> nuxt


   lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk
   x                                             x
   x   Nuxt.js v2.11.0                           x
   x   Running in development mode (universal)   x
   x                                             x
   x   Listening on: http://localhost:3000/      x
   x                                             x
   mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj

デフォルトでは、Nuxt の開発サーバーのホストは localhostからのみアクセス可能ということで
ホストの 0.0.0.0を設定する必要があるとのこと
https://ja.nuxtjs.org/faq/host-port/

nuxt.config.js を編集し、server.port,server.hostを設定

nuxt.config.js
export default {
  mode: 'universal',
  server: {
    port: 3000,
    host: '0.0.0.0',
  },

再度npm run devを実行するとブラウザから表示された