docker-composeで始めるnuxt.js

対象

• docker、docker-composeをインストールしている方
• vue.js,nuxt.js手軽に触ってみたいよという方
• 開発環境の構築にそんなに時間かけたくないよという方

ゴール

• docker-composeを利用したnuxt.jsの開発環境を手に入れる

docker-compose.ymlを書く

• 以下写経
• 実際Dockerfileだけで今回やる分には十分です。
  • storybookとか後々色々なもの導入したくなると思うので、先にdocker-compose.ymlで複数コンテナを管理できるようにしようという魂胆です。

docker-compose.yml

version: '3'

services:
  node: &app_base
    image: node:11.14.0-alpine # dockerhubにすでに上がっている
    tty: true
    working_dir: /var/www
    volumes:
      - ./src:/var/www # ./srcをコンテナ内の/var/wwwにマウントする
    environment:
      PORT: 3000
      HOST: 0.0.0.0
    restart: always # エラーなどでコンテナが落ちた際に自動で再起動してくれる

  workspace:
    <<: *app_base
    ports:
      - "3000:3000" # localhost:3000にポートをマッピングする
    command: yarn dev # upする際に実行されるコマンド

create-nuxt-appを使う

• まずはdockerコンテナにshで入ってみよう
  docker-compose run --rm node sh

• 以下コンテナ内で実行

/var/www # yarn global add create-nuxt-app

/var/www # create-nuxt-app ./
> Generating Nuxt.js project in /var/www # この後色々聞かれます
? Project name myNuxtApp # プロジェクト名
? Project description My finest Nuxt.js project # プロジェクトの説明
? Use a custom server framework none # サーバーサイドのフレームワーク
? Choose features to install Axios # Axiosやlintなど一緒にインストールするもの
? Use a custom UI framework none # UIフレームワーク
? Use a custom test framework none # Jestなどのテストフレームワーク
? Choose rendering mode Single Page App # レンダリングモード
? Author name # アプリケーション作成者の氏名
? Choose a package manager yarn # パッケージ管理にnpmかyarn

これで準備完了。ローカルの./srcにマウントしているので./src内にnuxtのプロジェクトができているかと思います。
コンテナから出ましょう。

/var/www # exit

いざ実行

• コマンド一つでnuxtサーバーが立ち上がります。

docker-compose up workspace

http://localhost:3000 を確認すると...

きちんと表示される！
nuxt.jsの開発環境がこれで整いました！

終わりに

• まず始めるという部分にフォーカスして、シンプルにまとめてみました。
• ここまででおよそ15分かからない位でnuxt.jsの環境が作れるのでぜひお試しください。