フロントエンド環境構築

1. はじめに

　CM4上にフロントエンド環境を作成する。コンポーネントは以下とする。

Vue.js	    2.7.x　　UIコンポーネントフレームワーク
Nuxt.js	    2.x　　　フロントエンドフレームワーク
Vuetify	    2.7.x　　UIコンポーネントライブラリ
vue-router	3.6.x　　クライアントサイド・ルーティング
vuex	    3.6.x　　クライアント状態管理（グローバルストア）

事前に以下の手順で最新版のdockerがインストールされているものとする。

2. 準備

2.1. 作業ディレクトリの作成

すべて作業ディレクトリ内で行う。

mkdir -p ~/frontend/env
cd ~/frontend

2.2. docker グループにユーザーを追加

Dockerデーモンのソケット権限エラーを防ぐために行う設定。

sudo usermod -aG docker $USER
sudo reboot

3. 設定ファイルを作成

Nuxt2ではvue-router / vuex は 内部依存として標準搭載
明示的に version を固定したい場合のみ package.json に書く

3.1. ディレクトリ構成

frontend/
├─ Dockerfile
├─ docker-compose.yml
├─ package.json
├─ nuxt.config.js
├─ pages/
│   └─ index.vue
└─ store/
    └─ index.js

3.2. Dockerfile

FROM node:16-bullseye-slim

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["npm","run","dev"]

3.3. docker-compose.yml

ホットリロード有効

services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
      - /app/node_modules
    environment:
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true

3.4. package.json

@nuxtjs/vuetify を最初から devDependencies に入れておくことで起動時にvuetifyがない事故を防ぐ。

{
  "name": "nuxt2-vuetify-cm4",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "dependencies": {
    "nuxt": "^2.17.0",
    "vue": "^2.7.16",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2",
    "vuetify": "^2.7.2"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3"
  }
}

※ Nuxt 2.17.x は Vue 2.7 対応済み
※ vue-router / vuex を 明示固定する

3.5. nuxt.config.js

Vuetify設定込み

export default {
  ssr: false,

  server: {
    host: '0.0.0.0',
    port: 3000
  },

  buildModules: [
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    theme: { dark: false }
  },

  build: {
    transpile: ['vuetify']
  }
}

3.6. Vuetify module 追加

docker compose run --rm frontend npm install -D @nuxtjs/vuetify

3.7. vue-router

pages/index.vue
Nuxt2 では pages/ 配下＝自動ルーティング。

<template>
  <v-app>
    <v-main class="pa-6">
      <v-card>
        <v-card-title>Nuxt2 + Vuetify on CM4</v-card-title>
        <v-card-text>
          <div class="mb-3">count: {{ count }}</div>
          <v-btn color="primary" @click="increment">+1</v-btn>
        </v-card-text>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  computed: {
    count () { return this.$store.state.count }
  },
  methods: {
    increment () { this.$store.commit('increment') }
  }
}
</script>

3.8. vuex

Nuxt標準構成とする
store/index.js

export const state = () => ({
  count: 0
})

export const mutations = {
  increment (state) {
    state.count++
  }
}

4. 環境ファイル

メモリサイズなどを調整するファイルを作成しておく。コンテナを動かす前にロードする。

4.1. メモリ別 env ファイル（CM4 2G/4G/8G）

env/cm4-2g.env

NODE_OPTIONS=--max-old-space-size=1024
HOST=0.0.0.0
CHOKIDAR_USEPOLLING=true

env/cm4-4g.env

NODE_OPTIONS=--max-old-space-size=1536
HOST=0.0.0.0
CHOKIDAR_USEPOLLING=true

env/cm4-8g.env

NODE_OPTIONS=--max-old-space-size=2048
HOST=0.0.0.0
CHOKIDAR_USEPOLLING=true

5. 起動

docker compose up だけのとき前回のイメージが残っている場合にそれを使おうするが、--build をつけることで最新の状態を反映させてから動かすことができる。

export CM4_ENV_FILE=env/cm4-2g.env
docker compose up --build

6. 確認

ブラウザで以下のコマンドを

http://<Raspberry PiのIPアドレス>:3000

以下のような表示のページが表示される。

7. まとめ

　VueやNuxtをよく知らない者がソースコードを変更して確認できる環境をRaspberry Pi4上に構築できた。RPi+docker上であればPCに悪影響を起こすこともないので、色々なことに活用できるだろう。