Next.js開発環境の権限エラー対応

mizky(^ω^) yarn devが何故か実行されない。。。

というわけで、今回はyarn devしてもNext.js開発環境がうまく立ち上がらなかった問題を解決したときのことを備忘録として残します。

エラー内容
解決のための簡単な結論
具体的な解決方法
まとめ

エラー内容

Next.jsプロジェクトで’yarn dev’コマンドを用いてサーバーを立ち上げようとした際に、次のような権限エラーが表示されました。

[Error: EACCES: permission denied, unlink '/workspaces/fronend/.next/types/package.json'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'unlink',
  path: '/workspaces/fronend/.next/types/package.json'
}

解決のための簡単な結論

発生した permission denied エラーは、Next.js 開発環境内で関連ファイルやディレクトリに対するアクセス権限が不足していることが原因でした。

この問題を解決するためには、対象のファイルやディレクトリの所有者を変更し、適切な読み書き権限を設定することが効果的です。

具体的な解決方法

権限の確認

Next.js の開発環境で遭遇した権限問題を解析する最初のステップとして、
問題が発生している .next ディレクトリの権限を確認しました。

この権限確認を行うことで、どのユーザーがどのファイルやフォルダにアクセスできるのかを明確にしました。

実行コマンド

$ ls -la /workspaces/fronend/.next

実行結果（一部省略）

node@xxx:/workspaces/fronend$ ls -la /workspaces/fronend/.next
drwxr-xr-x 1 root root    512 Apr 22 13:29 server
drwxr-xr-x 1 root root    512 Apr 22 13:28 static

上記の出力からわかる通り、.next ディレクトリは root ユーザーが所有しています。

つまり、rootユーザー以外のユーザーが
これらのファイルやディレクトリに対して必要な操作を行えないことが分かります。

現在のユーザーの確認

次に、現在の作業を行っているユーザーを確認しました。

実行コマンド

$ whoami

実行結果

node@xxx:/workspaces/fronend$ whoami 
node

この結果から、現在の作業を行っているユーザーが node であることが分かりました。

このユーザー（node）だと権限不足で操作できないので、権限の変更を行います。

権限の変更

対象のディレクトリ（今回は、/workspaces/fronend/.next）の所有者を、
現在のユーザーに変更しました。

実行コマンド

$ sudo chown -R $(whoami):$(whoami) /workspaces/fronend/.next

実行結果（一部省略）

node@xxx:/workspaces/fronend$ ls -la /workspaces/fronend/.next
drwxr-xr-x 1 node node    512 Apr 22 13:29 server
drwxr-xr-x 1 node node    512 Apr 22 13:28 static