Nuxt.jsのビギナーズガイドをWindows + Vagrant + Virtual box + ubuntu 18.04 + docker + docker-compose の環境で試したメモ #Docker

はじめに

Nuxt.jsビギナーズガイドを買った。
Mac向けの解説だった。
windowsユーザだが、こういう時に、virtual box でlinuxをたてて、
dockerでnode.jsの環境を用意しているのは便利だと思う。
いくつかテキスト通りにいかない部分があったのでメモしておく。
特に、ホストとホットリロード用のポーリングはいつもひっかかるところ。

環境

Windows10
virtualbox 5.2.22
vagrant 2.2.2
Ubuntu 18.04.1 LTS (GNU/Linux 4.15.0-29-generic x86_64)
Docker version 18.09.0, build 4d60db4
docker-compose version 1.23.2, build 1110ad01

ディレクトリ構造

.
├── bin
│   ├── bash.sh
│   ├── container_build.sh
│   ├── up.sh
│   └── work
│       ├── add-axios.sh
│       ├── create-project.sh
│       └── first-install-package.sh
├── docker
│   ├── .envrc
│   ├── .gitignore
│   ├── docker-compose.yml
│   └── nuxt
│       └── Dockerfile
└── src
    └── mypage
        ├── assets
        ├── components
        │   └── AppLogo.vue
        ├── layouts
        │   └──  default.vue
        ├── middleware
        ├── nuxt.config.js
        ├── package.json
        ├── pages
        │   ├── index.vue
        │   └── users
        │       ├── _id.vue
        │       └──  index.vue
        ├── plugins
        │   └── axios.js
        ├── static
        │    └── favicon.ico
        ├── store
        │   └── index.js
        └── yarn.lock

コンテナ

docker/nuxt/Dockerfile

FROM node:11.5.0

WORKDIR /app
RUN npm init -y
RUN yarn global add @vue/cli @vue/cli-init

docker/docker-compose.yml

version: '3'
services:
  nuxt:
    build: ./nuxt
    volumes:
      - ../src/mypage/assets:/app/src/mypage/assets
      - ../src/mypage/components:/app/src/mypage/components
      - ../src/mypage/layouts:/app/src/mypage/layouts
      - ../src/mypage/middleware:/app/src/mypage/middleware
      - ../src/mypage/pages:/app/src/mypage/pages
      - ../src/mypage/plugins:/app/src/mypage/plugins
      - ../src/mypage/static:/app/src/mypage/static
      - ../src/mypage/store:/app/src/mypage/store
      - ../src/mypage/.editorconfig:/app/src/mypage/.editorconfig
      - ../src/mypage/.eslintrc.js:/app/src/mypage/.eslintrc.js
      - ../src/mypage/nuxt.config.js:/app/src/mypage/nuxt.config.js
      - ../src/mypage/package.json:/app/src/mypage/package.json
      - ../src/mypage/yarn.lock:/app/src/mypage/yarn.lock
      - cacheNodeModules:/app/src/mypage/node_modules
    env_file: .envrc
    environment:
      - HOST=0.0.0.0
    working_dir: "/app/src/mypage"
    command: [yarn, dev]
    ports:
      - 3000:3000

volumes:
  # yarnでインストールした結果を保存する
  cacheNodeModules: 
  cacheDotElm:

プロジェクト作成

とりあえず、すべて空で作成。

bin/work/create-project.sh

この時点のソース

packageインストール

mypageを共有すると、windowsでエラーがでるので、必要なフォルダ・ファイルのみ共有。

docker-compose.yml編集

yarn.lockファイルを空のファイルで作成して共有。
node_modules用のキャッシュを作成。

実行

bin/work/first-install-package.sh

無事に終了すると、yarn.lockファイルが上書きされている。

この時点のソース

起動

docker-compose.yml編集

dockerを使っているため、ワイルドカード IP アドレスで起動する.環境変数にHOST=0.0.0.0を設定
portを開ける
作業ディレクトリで実行させる

    environment:
      - HOST=0.0.0.0
    working_dir: "/app/src/mypage"
    command: [yarn, dev]
    ports:
      - 3000:3000

実行

bin/up.sh

ポート3000でアクセスして、表示確認。

この時点のソース

ホットリロードの確認

windows + virtual box + dockerでは、ポーリングしてやらないとホットリロードが有効にならないので、設定を修正

src/mypage/nuxt.config.js編集

module.exports = {
  head: {/* 省略 */},
  loading: { color: '#3B8070' },
  build: {/*省略*/},
  watchers: {
    webpack: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
}

この時点のソース

axios導入

bin/work/add-axios.sh

通信は成功するが、consoleに表示されなかった。

この時点のソース

環境変数導入

テキストでは.envrcを追加したが、自分はdocker-composeを使っているので、env_fileを追加する。

docker-compose.ymlと同じ階層に、.envrcファイルを作ってトークンを記述。
.gitignoreで.envrcファイルは管理外とする。

.envrc

QIITA_TOKEN=取得したトークン

docker-compose.yml

    env_file: .envrc
    environment:
      - HOST=0.0.0.0

axos.js

githubのソースが、テキストと異なっていた。 Bearerが追加されている。

      config.headers.common['Authorization'] = `Bearer ${process.env.QIITA_TOKEN}`

この時点のソース

head()によるHTMLメタ

再起動しないと、nuxt.config.jsを変更した結果は反映されない。
ctrl + c でdocker-composeを止める
再度、以下のコマンド

./bin/up.sh

この時点のソース

Vuexへの移譲

サンプルはこの段階のものがgithubに上がっている

この時点のソース

参考

Nuxt.js ビギナーズガイド
 docker ip
webpack-dev-server host
wabpack-dev-server watch