らいふうっどの閑話休題

興味のあることをゆる~く書いていく

Raspberry Pi OS 64bit版(2020.08.02 release) に npm, node をインストールする時のメモ

f:id:ic_lifewood:20210117221811p:plain

Raspberry Pi OS 64bit版(2020.08.02 release) に npm, node をインストールする時のメモ

OSアップデート

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

npm, node をインストール

  • node v14.x 系をインストールする場合は、下記コマンド実行
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo apt install nodejs

NodeSource Node.js Binary Distributions

github.com

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

f:id:ic_lifewood:20210117011042p:plain

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

参考

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

参考

4. vue/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

f:id:ic_lifewood:20210117004331j:plain

追記

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

2021.01.14 覚書 / 2021.01.14 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

www.infoworld.com

AWS

www.publickey1.jp

Browser

portswigger.net

Develop

www.testjssummit.com

JavaScript

Web Accessibility

dev.to

2021.01.13 覚書 / 2021.01.13 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

blog.angular.io

Develop

www.npmjs.com

liginc.co.jp

blog.hatappi.me

Node

Typescript

devblogs.microsoft.com

zenn.dev

2021.01.12 覚書 / 2021.01.12 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

blog.angular.io

lookout.dev

CSS

JavaScript

Nx

juristr.com

Storybook

Typescript

fettblog.eu

2021.01.11 覚書 / 2021.01.11 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

Design

note.com

dev.to

JavaScript

2ality.com

Typescript

dev.to

zenn.dev

2021.01.10 覚書 / 2021.01.10 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

itnext.io

CSS

JavaScript

NgRx

Typescript