今流行りの 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はこんな感じ。

```sh
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はこんな感じ

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

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

```sh
+ Dockerfile
+ docker-compose.yml
+ work/
```


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

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

```sh
docker-compose run vue yarn create nuxt-app nuxt_test1
```

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

```sh
$ 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からアクセスできないんですよね。

```yml

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`` にちょこっと追加

```yml
    ports:
      - 3000:3000

       ↓

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

```

最後にコンテナ起動!

```sh
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/``にアクセスしたら以下のページが表示されるはずです。

![nuxt.resized.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74328/253da24a-6856-3238-0a8a-09ab98e72ee3.png)



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

https://github.com/furu8ma/start_nuxtjs_on_docker


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