Raspberry Pi3 で、Vue.js を動かす環境を構築した時のメモ

1. Rapsberry Pi 環境整備

Raspberry Pi OS 2020.12.02 relase for 32bit イメージ

pi@raspberrypi:~ $ uname -a
Linux raspberrypi 5.4.83-v7+ #1379 SMP Mon Dec 14 13:08:57 GMT 2020 armv7l GNU/Linux
pi@raspberrypi:~ $ 

OS update

pi@raspberrypi:~ $ sudo apt-get -y update
pi@raspberrypi:~ $ sudo apt-get -y upgrade
pi@raspberrypi:~ $ sudo apt-get -y autoremove
pi@raspberrypi:~ $ sudo apt-get -y autoclean

各種ツールをインストール

pi@raspberrypi:~ $ sudo apt-get -y install ttf-kochi-gothic fonts-noto uim uim-mozc nodejs npm apache2 vim emacs libnss3-tools

2. OSのスワップ領域変更

Swap領域管理サービスを停止。

pi@raspberrypi:~$ service dphys-swapfile stop
pi@raspberrypi:~ $ sudo nano /etc/dphys-swapfile
pi@raspberrypi:~ $ sudo vi /etc/dphys-swapfile

スワップ領域変更

CONF_SWAPSIZE=1024 => 16384

Swap領域管理サービスを再開。

$ sudo service dphys-swapfile start

参考

• https://inaba.hatenablog.com/entry/2016/12/13/023251

3. npm 環境バージョンアップ

nodebrew をインストールします。

pi@raspberrypi:~ $ curl -L git.io/nodebrew | perl - setup

環境設定ファイルにnodebrew のパスを通す

pi@raspberrypi:~ $ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.profile

設定を反映させる

pi@raspberrypi:~ $ source ~/.profile

nodebrewの確認

pi@raspberrypi:~ $ nodebrew --version

nodebrewのインストールlist確認

pi@raspberrypi:~ $ nodebrew ls-remote

nodebrew から Node.jsをインストールします。

pi@raspberrypi:~ $ nodebrew install-binary v12.20.1

Node.jsの使用するバージョンを指定する

pi@raspberrypi:~ $ nodebrew use v12.20.1

npm キャッシュクリア

pi@raspberrypi:~ $ npm cache verify
pi@raspberrypi:~ $ npm cache clean --force

npm バージョンアップ

pi@raspberrypi:~ $ sudo npm install -g npm

参考

• http://gurezo.github.io/ubuntu_setup_dev/setup-front-end.html

4. vue/cli インストール

公式ドキュメント

• https://v3.ja.vuejs.org/guide/installation.html#cli

pi@raspberrypi:~ $ npm install -g @vue/cli@latest
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/home/pi/.nodebrew/node/v12.20.1/bin/vue -> /home/pi/.nodebrew/node/v12.20.1/lib/node_modules/@vue/cli/bin/vue.js

> nodemon@1.19.4 postinstall /home/pi/.nodebrew/node/v12.20.1/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0


> ejs@2.7.4 postinstall /home/pi/.nodebrew/node/v12.20.1/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/@vue/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})
npm WARN @vue/compiler-sfc@3.0.5 requires a peer of vue@3.0.5 but none is installed. You must install peer dependencies yourself.

+ @vue/cli@4.5.10
added 205 packages from 92 contributors, removed 349 packages, updated 128 packages and moved 15 packages in 163.82s

vue アプリ作成

pi@raspberrypi:~ $ npm init vite-app vue-fist-sample
npx: installed 8 in 7.065s
Scaffolding project in /home/pi/vue-fist-sample...

Done. Now run:

  cd vue-fist-sample
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

vue アプリのパッケージインストール

pi@raspberrypi:~ $ cd vue-fist-sample/
pi@raspberrypi:~/vue-fist-sample $ npm i
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"

> esbuild@0.8.32 postinstall /home/pi/vue-fist-sample/node_modules/esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/rollup/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})
npm WARN vue-fist-sample@0.0.0 No description
npm WARN vue-fist-sample@0.0.0 No repository field.
npm WARN vue-fist-sample@0.0.0 No license field.

added 329 packages from 302 contributors and audited 332 packages in 56.846s

26 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

vue アプリ起動

pi@raspberrypi:~/vue-fist-sample $ npm run dev

追記

• npm node インストールについては、下記記事の方が手順としては、簡潔で良いです。 lifewood.hatenablog.com