🐰

【備忘】Macでnpm run serveがPermission deniedになる

2023/02/05に公開

Vue.js

2023年からMac新参者のとにぃです。
環境を整えいざ開発を始めようとしたところ、npm run serveができず、Vueアプリが立ち上がらない！！となったので、備忘記事です。

Permission denied対応

私が出会ったエラーはこちら↓

sh: /Users/XXX/Documents/project/node_modules/.bin/vue-cli-service: Permission denied

権限がないと。。。gitから落としてきたアプリをnpm installし、いざ起動！と思ったら。。。
windowsの時には出会ったことのないエラーです。
初心者心理には、環境作成のときに何か設定忘れてたのかドキッとしました。

対策は簡単でした↓

XXX@Mac project % chmod u+x node_modules/.bin/vue-cli-service

対象のファイルに権限を付与してあげればいいと。
Macって細かいんですね。

chmodコマンド解説

権限の状態を確認する

まずはlsコマンドで権限の読み方を解説します。

XXX@Mac project % ls -l node_modules/.bin/vue-cli-service  
-rwxrw-r--  1 XXX  staff  346 12 11 12:52 node_modules/.bin/vue-cli-service

先頭のこいつ（-rwxrw-r--）が権限に関する部分ですね。
見方は次の通りですね。UNIXさわったことがあれば余裕です。

「1文字/3文字/3文字/3文字」と区切ってよみます。

ファルの種類	所有者(u)	グループ(g)	その他のユーザ(o)
-	rwx	rw-	r--

それぞれの記号は以下の通りです。

ファイルの種類の記号

記号	意味
-	ファイル
d	ディレクティブ（フォルダ）
l	シンボリックリンク

所有者/グループ/その他のユーザの記号

｜記号	意味
r	読み込権限あり
w	書き込み権限あり
x	実行権限あり
-	権限なし

所有者/グループ/その他のユーザに関しては3文字で先頭から「読み込み(read)権限」「書き込み(write)権限」「実行(execute)権限」を表しています。権限があればアルファベットが、なければハイフンが表示されています。

権限を変更する

権限を確認できたので、権限を変更しましょう！

前述の通り、「chmod」コマンドです。

XXX@Mac project % chmod u+x node_modules/.bin/vue-cli-service

コマンドの構成を解説をすると、以下のようになっています。

chmod [変更する対象ユーザ][権限を付与/削除][変更する権限] [対象のファイル]

＊変更する対象ユーザ

権限を変更するユーザを指定します。「所有者/グループ/その他のユーザ」の誰に付与するかって話ですね。
ここは省略も可能で、省略すると全員に付与されます。
カンマで区切ることで細かく指定することも可能です。

｜記号	意味
a	全員(所有者/グループ/その他のユーザ)
u	所有者
g	グループ
o	その他のユーザ

例）所有者には「読み込み」と「実行」を追加、グループには「読み込み」を追加したい場合

XXX@Mac project % ls -l sample  #最初の状態
----------  1 XXX  staff  10 1 1 0:0 sample
XXX@Mac project % chmod u+rx,g+r sample
XXX@Mac project % ls -l sample  #変更後の状態
-r-xr-----  1 XXX  staff  10 1 1 0:0 sample

権限を付与/削除

ここでは権限を付与するか、削除するかを指定します。
「=」にすると指定した権限にまとめて変更できます。

｜記号	意味
+	付与
-	削除
=	指定した権限に変更

例）所有者は「読み込み」と「実行」に変更、その他のユーザからは「書き込み」を削除したい場合

XXX@Mac project % ls -l sample  #最初の状態
-rw-rw-rw-  1 XXX  staff  10 1 1 0:0 sample
XXX@Mac project % chmod u=rx,o-w sample
XXX@Mac project % ls -l sample  #変更後の状態
-r-xrw-r--  1 XXX  staff  10 1 1 0:0 sample

変更する権限

どの権限を付与/削除するのか、対象の権限を指定します。権限の記載は再掲が次の通りです。

｜記号	意味
r	読み込権限
w	書き込み権限
x	実行権限

【一言】
長年windowsユーザだったのでまだMacの「command」キーに慣れないです。「command + C」が窮屈です。
右クリックのための「control」も面倒ですね。
二刀流になれるのはいつのことやら。。

もう2月ですが（1月まったりしすぎた。。）、2023年は積極的に活動していきたいのでどうぞよろしくお願いいたします！！