はじめに
カメラをラズパイで制御した観測装置を使用しており、その装置に合わせたダッシュボードを作成したいと考え、忘れないようにVue.jsを使用したSPA（シングルページアプリケーション）の作成方法についてまとめてみた。
環境
・Raspbian GNU/Linux 11 (bullseye)
・Docker version 23.0.1
・node version 14.17.0
一応ね、nodeのインストール
インストールスクリプトのダウンロード
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
NVMをセッションにリロード
source ~/.nvm/nvm.sh
NVMでNode.jsをインストール
nvm install 14.17.3
インストールできたかNode.jsとnpmのバージョンを確認
node -v
npm -v
作っていきやしょー
Vue CLIのインストール
なんかVue CLIを使ったほうがいいらしいのでそれで。
npm install -g @vue/cli
プロジェクトの作成
vueってわかりやすくしたいので vue-app にする。
作ろうと思ってるパスで以下コマンド
vue create vue-app
Dockerfile
カレントディレクトリにあるvue-appディレクトリ内にDockerfileを作り、以下のように記述。
FROM node:14.17.0-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm", "run", "serve"]
・FROM ~ <- イメージの設定
・WORKDIR ~ <- 作業ディレクトリの作成
などなど
意味は適当にDockerfileに関する他の記事見ればわかると思います。
イメージビルド
以下コマンドでDockerイメージをビルド(当然だけどDockerfileあるパスでね).
docker build -t vue-app-image .
コンテナの実行
オプション加えるだけだけど開発におけるビルドとバックグラウンドでの実行に分けた。そこは適当に使い分けてもろて。
開発におけるビルド
docker run -p 8080:8080 vue-app-image
バックグラウンドでの実行
docker run -d -p 8080:8080 vue-app-image
そんなこんなでhttp://localhost:8080に以下のようなのが表示されてると思われる。
あとは自分次第()
これからはそれぞれデザイン等していこう。
常識かもしれないがvue-app/srcディレクトリ内にwebデザインを扱うファイルがある。
以下主な関連ディレクトリ・ファイルとその役割
| 主なディレクトリ・ファイル | 役割 |
|---|---|
src/main.js |
Vueの初期化やプラグインの設定等が行われる |
src/App.vue |
全体のレイアウト等UIを整えるアプリケーションのルートコンポーネント |
src/components/ |
コンポーネント(ヘッダーコンポーネントやフッターコンポーネントといったアプリケーションの部品)を格納するディレクトリ |
src/router/ |
index.jsを用いて各ページのルートパスとコンポーネントをまとめる |
最後に
とまあこんな感じで一応SPAを Docker + Vue.js で作成するための手順が完了！
今後はMySQLやFastAPIを使うなどいろんなことをしていくつもり()