LoginSignup
25
22

More than 3 years have passed since last update.

dockerでnuxt開発環境作成

Last updated at Posted at 2020-01-11

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

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! ejs@2.7.4 postinstall: `node ./postinstall.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ejs@2.7.4 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

> ejs@2.7.4 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/)

+ create-nuxt-app@2.12.0
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 resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
/usr/bin/create-nuxt-app -> /usr/lib/node_modules/create-nuxt-app/lib/cli.js
+ create-nuxt-app@3.2.0
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 create-nuxt-app@2.15.0
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
/usr/bin/create-nuxt-app -> /usr/lib/node_modules/create-nuxt-app/cli.js
+ create-nuxt-app@2.15.0
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

> app@1.0.0 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を実行するとブラウザから表示された
2020-01-11_22h00_59.png

25
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
22