Chapter 03

環境構築(Nuxt.js 編)

それでは続いて、Nuxt.js の環境構築を進めていきます。

zenn-app
├── README.md
├── frontend
├── backend
└── docker-compose.yml

環境構築

まずは zenn-app 配下に frontend ディレクトリを作成し、 frontend ディレクトリ配下に、Nuxt.js 用の Dockerfile を作成します。

FROM node:14.3

WORKDIR /app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

# ※1
RUN apt-get update -y && \
  apt-get upgrade -y && \
  npm install npm@6.14.4 && \
  npm install ejs@3.0.1 &&\ # ※2
  npm install nuxt@2.0.0 &&\
  # npm install nuxt-create-app@2.15.0 ※3
  npm install create-nuxt-app@2.15.0
  npm install defu@3.1.0

ADD . /app

※1 バージョンを指定してインストールしないと、 このチュートリアルの開発環境を再現できないため指定しています。(この辺りあまり知見ないので、こうすると良いよ〜というアドバイスがあればいただけると嬉しいです。)

※2 ejs をインストールしているのは、npx create-nuxt-app のコマンドを叩いたとときに、以下のエラーが出ていたためです。

※3
2020/11/27 修正
正しくは create-nuxt-app でした :pray:
thanks to @_hiro_dev

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`
...

参考:

docker-compose.ymlfrontend の記述を追加します。

# zenn-app/docker-compose.yml
version: "3"

services:
  db:
    ...
  backend:
    ...

  frontend:
    container_name: front
    build: ./frontend/
    image: frontend
    volumes:
      - ./frontend:/app
    ports:
      - 3000:3000
    command: "npm run dev"
    networks:
      app_net:
        ipv4_address: '172.20.0.4'

networks:
  ...

次に、 image を build します。

$ docker-compose build

以下のログが表示されたら OK です。

...
...
Successfully built 15e88a71b81b
Successfully tagged frontend:latest

次に、アプリの初期ファイル群を作成します。

$ docker-compose run frontend npx create-nuxt-app

いくつか質問されるので、以下のように回答します。

creating network "zenn-app_app_net" with driver "bridge"

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

🎉  Successfully created project app

  To get started:

	npm run dev

  To build & start for production:

	npm run build
	npm run start
? Project name app
? Project description My impressive Nuxt.js project
? Author name

は未入力で OK ですが( enter をクリックする) 、この辺りはお好みで設定してください。

最後にコンテナを起動させます。

$ docker-compose up

http://localhost:3000 にアクセスして、以下の画面が表示されれば OK です。

参考: