create-nuxt-app で現在のディレクトリにNuxtプロジェクトを作成する時に気をつけること
Nuxt.js の勉強していた時に最新のcreate-nuxt-app
(v3.3.0)を使ってNuxtプロジェクトを作成した時にCan't create . because there's already a non-empty directory . existing in path.
というエラーを踏んでしまったのでその時にどう対応したのかのメモをまとめておく.
前提
使用するファイルは以下になる.
# sample-nuxt/docker-compose.yml version: "3" services: frontend: build: ./frontend ports: - 8080:8080 command: /bin/sh -c "yarn dev" volumes: - ./frontend:/app - frontend-node_modules:/app/node_modules environment: - HOST=0.0.0.0 - PORT=8080 tty: true volumes: frontend-node_modules:
# sample-nuxt/frontend/Dockerfile FROM node:12.9.0-alpine ENV APP_HOME /app ENV PATH ${APP_HOME}/node_modules/.bin:$PATH ENV TZ Asia/Tokyo ENV HOST 0.0.0.0 ENV PORT 8080 WORKDIR ${APP_HOME} ADD . ${APP_HOME} RUN apk update \ && apk upgrade \ && yarn install \ && yarn global add create-nuxt-app \ && rm -rf /var/cache/apk/* EXPOSE ${PORT} CMD ["yarn", "dev"]
rails new .
(現在のディレクトリでRailsプロジェクトを作る)のような要領で現在のディレクトリでNuxtプロジェクトコードを作ろうとするとエラーになった.
$ pwd sample-nuxt $ docker-compose run --rm frontend yarn create nuxt-app . yarn create v1.17.3 [1/4] Resolving packages... ⠠ color-name@1.1.3(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limi ・・・省略・・・ warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.17.3". info To upgrade, run the following command: $ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash success Installed "create-nuxt-app@3.3.0" with binaries: - create-nuxt-app create-nuxt-app v3.3.0 Can't create . because there's already a non-empty directory . existing in path. Done in 16.75s.
原因
本家のリポジトリを見てみると,どうやらプロジェクトの作成する先のディレクトリが空ではない場合はエラーになる仕様のようだ.
今回の場合,frontendディレクトリにDockerfile
があるからエラーになったと考えられる.
回避方法
仕様なので仕方ないため力技ではあるが,さらに新しくfrontendプロジェクトを作成し(つまりfrontend/frontend
の中にNuxtプロジェクトが作られる状態になる),その後でfrontend/
直下にNuxtプロジェクトのファイル・ディレクトリを移動するようにする.
$ docker-compose run --rm frontend yarn create nuxt-app frontend yarn create v1.17.3 [1/4] Resolving packages... ⠈ graceful-fs@^4.1.6(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit ・・・省略・・・ create-nuxt-app v3.3.0 ✨ Generating Nuxt.js project in frontend ? Project name: (frontend) ・・・省略・・・ 各設定を入力していく # frontend直下にNuxtプロジェクトのファイル・ディレクトリを隠しファイル込みで移動する. $ mv frontend/frontend/{*,.[^\.]*} frontend # frontend/frontendは削除する $ rm -r frontend/frontend # node_modules内のパス等の情報を更新させるためにyarn installし直す $ docker-compose run --rm --service-ports frontend yarn install
これで,docker-compose up
すればNuxtプロジェクトが起動される.
まとめと所感
今回は create nuxt-app v3.3.0 でプロジェクトを作成する時に少し躓いたことについてまとめてみた.
前(今年の春頃)に使っていた create nuxt-app では現在のディレクトリにNuxtプロジェクトを作成することができていたように思えた(先程のプルリクエストも今年の7月にマージされたようなので...)が,Railsプロジェクトの作成方法とごっちゃに考えていたようにも思えるため混乱しないように気をつける.
docker-compose run --rm --service-ports frontend create-nuxt-app -h
でヘルプを見てもそれらしい便利なオプションも見当たらないため,今後のアップデートに期待かなぁと思いながら作業を再開した.