前回の記事「ラズパイ4に安定版のnode.jsをインストールする」でラズパイ4にSSHでログインできるようにして、 node.jsの推奨版をインストールするところまでやりました。

今回はvueと行きたいところですが、私の案件の都合上先にnuxt.jsを導入します。

といってもnuxt.jsはvueのラッパーですから必然的にvueを使います。

vueそのものの入門についてはまた別途やろうかなと思っていますので、 今回はnuxt.jsを導入してとりあえず入門をしてみましょう。

Nuxt.jsを導入

新たなディレクトリを作りその後npxでnuxt.jsを導入していきます。

npxについては

npxコマンドとは？何ができるのか？ https://zenn.dev/ryuu/articles/what-npxcommand

上記のブログに詳しく説明されていますので、興味があったら読んでみるといいでしょう。

本来ならnpmのコマンドを実行するにはnpm initしてpackage.jsonが生成されてそこにスクリプトを書き込んで なんやらする必要があるのですが、nuxtに関してはnpxでそれをしなくてもいい感じです。

今回は難しく考えず便利だなーって思っておいたらいいかなと思います。

まずはグローバル環境にnuxtを導入するためのソフトをインストールします。

sudo npm install -g create-nuxt-app

その後npxでインストールします。

sudo npx create-nuxt-app nuxt-first-app

色々質問を聞かれると思いますが、わからない人は私と合わせてもらったらいいかなと思います。

create-nuxt-app v3.5.2
?・ Generating Nuxt.js project in nuxt-first-app
? Project name: nuxt-first-app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

SSHでPuttyを使って実行すると選択してる部分が真っ黒になってるのでちょっと分かりづらかったですね（笑）

環境によって見え方が変わってくると思います。

今回はTypeScriptを使わずJavaScriptでやります。

インストールは時間がかかりますので、その間になんかしておきましょう。

っとここで私の環境でエラーが発生しました。

しかしちゃんとインストールされており普通にnuxt.jsが動作してくれました。

なんだか気持ち悪いですし、特定の物がインストールされてないきがするのでエラーコードを良く見てみると

gyp WARN EACCES current user ("[ラズパイログインユーザー名]") does not have permission to access the dev dir "/root/.cache/node-gyp/14.16.0"

なにやら権限エラーがでていますね。

そりゃルートのディレクトリに書き込むことはできませんぜって感じですね。

恐らくちゃんと設定して書き込めるようにしてやれば行けるかと思いますが、一旦は無視します。

npmでインストールする際に権限が厳しい系のコンピュータの場合、権限系のエラーがでるみたいなので 特に問題がなさそうであれば以下のオプションを付けてみるとすんなり通るみたいです。

「--unsafe-perm」

名前の通りアンセーフなパーミッションって感じで権限を無視してやる感じでしょうか？

あんまり詳しく調べてないのでそのうちちゃんと調べてみようかなと思います。

とりあえず失敗したけど作成されてるディレクトリに移動して、 package.jsonに記述されているものをnpm installを試してみましょう。

cd nuxt-fist-app
sudo npm install --unsafe-perm

npm installはpackage.jsonに記述されているものをもとにインストールをします。

create-nuxt-appコマンドで自動生成されて、それをもとに内部でnpmを実行してインストールしているので 自分でやろうが自動で野郎がやってることは一緒なんですよね。

なので一度--unsafe-permを付けてnpm install を実行します。

……待ってみるとちょっと警告はありますが特にエラーもなくインストールされました。

一旦このまま進めてみようと思います。

エラーが出たらその際に何がダメだったのか見つけてエラー解決に挑みます。

nuxt.js入門

やっとnuxt.jsに入門できますね。

パーミッション関連でエラーがでてちょっと歯がゆいですが、一応起動は問題なく動いてくれたので試しましょう。

sudo npm run dev

最初に何か聞かれるのでYを押して進めてください。

問題がなければ開発サーバーが立ち上がります。

しかしデフォルトのままではLAN内含む外部からアクセスできない状態になっているので、 ちょっと設定を加えてやる必要があります。

nuxt.config.jsに追記する

「nuxt.config.js」というファイルが「nuxt-first-app」直下に存在しているので、 viとかnanoで編集していきます。

sudo nano nuxt.config.js

開くとexport defaultから始まる設定が書かれています。

一番下はおそらくbuild {}とカッコの中になにもない状態になっているかなと思います。（改行はあります）

なのでbuildの閉じカッコの最後にカンマをつけてサーバーの設定を加えます。

export default {

  // --------------------
  // 長いので途中まで省略
  // --------------------

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },
  server: {
    host: '0'
  }
}

こんな感じにserverの中にhostの項目を作って内容を「'0'」という文字を与えてやります。

これは「0.0.0.0」と同じ意味になります。

設定してやるとLAN内限定で外部からもアクセスができるようになります。

SSHで開発している人は必須の設定になりますのでやっておきましょう。

保存したらもう一度実行してみましょう。

sudo npm run dev

今度は外部のPCからブラウザで「192.168.0.11:3000」と 起動したラズパイのIPに置き換えてアクセスしてみます。

問題なくnuxtの初期画面にアクセスできれば入門完了です！

次回はaxiosを使って非同期通信を試みてみます。

axiosはAPIを叩く時によく使われるので覚えるのは必須になります。

それでは！