Dockerで作るNuxtJS+Vuetifyによる最小限プログラム

Dockerで作るNuxt+Vuetify環境

Dockerを利用してNuxtJS+Vueitifyの環境を作る方法を紹介します。

ほぼ自分のための備忘録ですが、バックエンドAPIの検証用や、フロント開発の初期断面として利用できます!

作成するプログラムが持つ機能
  • Hello Worldの表示
  • v-btnを利用したボタンの配置
  • axiosを利用したAPIリクエスト

この記事で作成するプログラムは、本当に最小限の機能をもつだけのものになります!

プロジェクトディレクトリの全体像

下記が最終的なプロジェクトディレクトリの全体像になります。

.
|-- Dockerfile
|-- components
|   `-- Home.vue
|-- node_modules
|-- nuxt.config.js
|-- package.json
|-- pages
|   `-- index.vue
`-- yarn.lock

上記のうち、実際に自分の手で作成・編集する必要があるものは下記です。それ以外は、自動で作成されます。

  • Dockerfile
  • pages/index.vue
  • components/Home.vue
  • nuxt.config.js
  • (必要があれば)package.json

Dockerfileの作成

まずDockerfileを作成して、Dockerイメージを作成しましょう。

FROM node:17.9.0-alpine3.15
WORKDIR /app
ENV NODE_OPTIONS --openssl-legacy-provider
EXPOSE 8010

ベースイメージとなるnodeのバージョンは、各自に合ったバージョンを指定してください(参考:nodeの公式Docker Hub)。

NODE_OPTIONSを指定する理由

NODE_OPTIONSを指定しないと、プログラム実行時(yarn dev等)にdigital envelope routines::unsupportedというエラーが発生します。

Node.jsとWebPackのバージョンに依存するエラーとのことですが、上記のエラーが出た場合は上記のように環境変数を設定することでエラーを回避することが可能です。

参考:GithubのIssue

Dockerをあえて使う必要はないですが、フロント開発ではバージョン管理が非常に重要なので、Dockerを利用した環境管理がおすすめです。

Dockerイメージのビルド

Dockerfileが完成したら、イメージをビルドしましょう。ここではイメージ名をvue-sampleとしています。

$ docker build -t vue-sample:1.0 .

コンテナを起動して必要なパッケージをインストール

Dockerfileがおいてあるディレクトリ上で、Dockerコンテナを起動しましょう。

ポイントは、現在のディレクトリをコンテナ上にマウントした上でパッケージをインストールすることです。

そうすることで、node_modulesディレクトリが自動生成されます。

# 作成したイメージから、カレントディレクトリを/appディレクトリにマウントしてコンテナを立ち上げる
# (-pオプション後のポート番号は自由に決めてください)
$ docker run -it --rm -p 8010:8010 --volume="`pwd`:/app:rw" vue-sample:1.0 sh

# 立ち上げたコンテナ内で必要なパッケージをインストール
$ yarn add nuxt
$ yarn add @nuxtjs/vuetify
$ yarn add @nuxtjs/axios

プログラムの作成

ここまでで環境構築は完了したので、この後はプログラムを作成していきましょう。

作成・編集するファイルは下記です。

  • package.json
  • nuxt.config.json
  • pages/index.vueとcomponents/Home.vue

package.json

下記にpackage.jsonのサンプルを載せますが、porthostnameは好きに決めても問題ないです。

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt --hostname 0.0.0.0 --port 8010",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "nuxt": "^2.15.8"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3"
  }
}

ポイント

指定するポート番号は、Dockerfile内のEXPOSEで指定しているポート番号とコンテナ起動時に指定しているポート番号と一致している必要があります。

計3か所のすべてのポート番号が揃っているか、注意してく確認してください。

nuxt.config.js

axiosvuetifyを使うための設定を追加します。

module.exports = {
    modules: [
      "@nuxtjs/axios",
    ],
    buildModules: [
        '@nuxtjs/vuetify',
        ['@nuxtjs/vuetify', { /* module options */ }]
    ]
}

pages/index.vueとcomponents/Home.vue

pages/index.vueは、このプログラムの起動時に最初に呼び出される処理が書かれているファイルです。

components/Home.vueは、プログラムの処理部分や表示される内容が記載されているファイルになります。

<pages/index.vue>

<template>
  <Home/>
</template>

<script>
import Home from '../components/Home.vue'
export default {
  name: 'index',
  components: {
    Home
  }
}
</script>

<components/Home.vue>

<template>
    <section class="home">
        <h1>Hello World</h1>
        <v-btn elevation="2" @click="get()">GET</v-btn>
    </section>
</template>

<script>
import axios from 'axios'

export default {
    mounted() {
        console.log('tt')
    },
    methods: {
        get() {
            console.log("=== call GET api")
            const url = "http://hoge"
            axios
                .get(url)
                .then((response) => {
                    console.log(response.data);
                })
        }
    }
}
</script>
ポイント

Home.vueは、v-btnコンポーネントを利用してボタンを設置し、ボタンを押下するとurlにGETリクエストを送る仕様になっています。

プログラムの起動

それでは、作成したプログラムを起動させてみましょう。

# コンテナ起動
$ docker run -it --rm -p 8010:8010 --volume="`pwd`:/app:rw" vue-sample:1.0 sh

# コンテナ内で起動
$ yarn dev

コンテナ内でプログラムを起動したら、ブラウザからhttp://localhost:8010にアクセスしましょう。

サンプルプログラム

上記の画面が出ていたら完成です。

”GET”ボタンを押すことで、get()関数を呼び出すことが可能です。

まとめ

この記事ではDockerを利用して、NuxtJS+Vuetifyの環境を作成する方法を紹介しました。

シンプルな検証環境が欲しい方や、これから開発を始める方は、ぜひ参考にしてみてください。