docker로 nuxt 개발 환경 만들기

공식 단계에서 작성한 결과 조금 오류가 발생하여 절차 정리

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를 실행할 때 오류가 발생했습니다.
우분투 기반 컨테이너에서는 발생하지 않았기 때문에 알파인으로 인한 것일 수 있습니다.

# 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을 설정해야 함
htps : // 그럼. 없는 xtjs. 오 rg / 후 q / 호 st-po rt /

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를 다시 실행하면 브라우저에서 표시됩니다.