今流行りの Nuxt.jsに Docker で入門してみる

前段

今時さくっとWEBサービスを公開するなら Vue.js + Firebase と聞きます。(俺調べ)
さらに Vue.js を簡単、というか規約により迷わなくするのが、Nuxt.js らしいので試してみることにしました。
とはいえ、node.js とか npm とか yarn とかすぐバージョンが変わったり、プロジェクトに依存しそうなやつはPCにインストールしたくないので、Docker経由で使いましょう。

確認した環境は以下です。ubuntuですが、dockerさえ入っていれば、MacでもWindowsでも動くと思われます。

• Ubuntu 18.04.2 LTS
• 17.12.0-ce, build c97c6d6

やってみる

Dockerfile

Dockerfileはこんな感じ。

FROM node:lts

RUN apt-get update && \
    apt-get upgrade -y && \
    yarn global add @vue/cli && \
    yarn global add @vue/cli-init && \
    yarn add firebase --save

EXPOSE 3000
WORKDIR /root

CMD tail -f /dev/null

なるべく息が長くなることを祈って、image は nodeのltsをベースにします。
おそらくセットで使われることが多いであろう、firebaseのライブラリもインストールしてみました。
とりあえず単なるnodeの実験場として使えるよう、CMDにtailをセットして、コンテナがあがりっぱなしになるようにしています。
portは nuxt.jsのデフォルトらしい3000番を外部に公開。

docker-compose.yml

続いてdocker-compose.ymlはこんな感じ

version: '3'
services:
  vue:
    build: .
    volumes:
      - ./work:/root
    ports:
      - 3000:3000

こんだけ。
workディレクトリに色々できるはずなので、mkdir workしておいてください。
こんな感じのディレクトリ構成になっていればOKです。

+ Dockerfile
+ docker-compose.yml
+ work/

Nuxt.jsプロジェクトを作る

yarnでnuxtプロジェクトを作成できるらしいので、vueコンテナに生成するコマンドを渡してやります。

docker-compose run vue yarn create nuxt-app nuxt_test1

yarn create nuxt-app が生成コマンド。 nuxt_test1がプロジェクト名です。
うまくいってれば色々聞かれるはずです。

$ docker-compose run vue yarn create nuxt-app nuxt_test1

yarn create v1.13.0
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > ts-node@8.1.0" has unmet peer dependency "typescript@>=2.0".
warning "@vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > apollo-server-express > apollo-server-core > apollo-tracing@0.5.2" has incorrect peer dependency "graphql@0.10.x - 14.1.x".
[4/4] Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.15.2", while you're on "1.13.0".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@2.6.0" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /root/nuxt_test1
? Project name nuxt_test1
? Project description My badass Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support
? Use a custom UI framework bulma
? Use a custom test framework none
? Choose rendering mode Universal
? Author name
? Choose a package manager yarn
warning ../../package.json: No license field

yarn install v1.13.0

  To get started:

        cd nuxt_test1
        yarn run dev

  To build & start for production:

        cd nuxt_test1
        yarn run build
        yarn start

Done in 61.53s.

とりあえず PWA Support と package managerに yarn 選んどけばよいと思います。

続いて nuxt.cofig.js をちょっとだけ修正します。
Docker経由だと起動時のホスト名の設定を変えないとホストOSからアクセスできないんですよね。

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,

       ↓ 

export default {
  mode: 'universal',

  server: {
    port: 3000,
    host: '0.0.0.0',  // <- これ!
  },

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,

ここまで来たら docker-compose.yml にちょこっと追加

    ports:
      - 3000:3000

       ↓

    ports:
      - 3000:3000
    working_dir: /root/nuxt_test1/
    command: yarn dev

最後にコンテナ起動!

docker-compose up

Recreating startnuxtjsondocker_vue_1 ...
Recreating startnuxtjsondocker_vue_1 ... done
Attaching to startnuxtjsondocker_vue_1
vue_1  | yarn run v1.13.0
vue_1  | warning ../../package.json: No license field
vue_1  | $ nuxt
vue_1  | 08:46:12 ℹ Listening on: http://172.21.0.2:3000/
vue_1  | 08:46:12 ℹ Preparing project for development
vue_1  | 08:46:12 ℹ Initial build may take a while
vue_1  | 08:46:13 ✔ Builder initialized
vue_1  | 08:46:13 ✔ Nuxt files generated
vue_1  | webpackbar 08:46:15 ℹ Compiling Client
vue_1  | webpackbar 08:46:15 ℹ Compiling Server
vue_1  |
vue_1  | 08:46:15  ERROR  (node:30) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
vue_1  |
vue_1  | webpackbar 08:46:20 ✔ Server: Compiled successfully in 4.60s
vue_1  | webpackbar 08:46:20 ✔ Client: Compiled successfully in 5.03s
vue_1  | 08:46:20 ℹ Waiting for file changes
vue_1  | 08:46:21 ℹ Memory usage: 183 MB (RSS: 335 MB)

ブラウザで http://localhost:3000/にアクセスしたら以下のページが表示されるはずです。

ちなみに、このコードは以下からcloneできます。よかったらどうぞ。

よし、私もNuxt.jsの勉強だ。。