Zenn
🧑‍🔧

Node.js 12をM3 Macで動作させる方法

2024/12/14に公開
Nuxt
Vue.js
Node.js
Vue 2
Nuxt 2
tech

はじめに

Vue2/Nuxt2のレガシープロジェクトを引き継ぎ、M3 Mac（ARM64アーキテクチャ）で開発環境を構築しようとしたところ、Node.js 12.5.0の互換性問題に直面しました。解決までに試行錯誤の時間を要したため、同じ課題に直面している開発者の方々の参考になるよう、対応方法を記事にまとめることにしました✍️

問題に遭遇

1. プロジェクトの要件

  • .node-versionで指定されたNode.js 12.5.0
  • Vue2/Nuxt2ベースの開発環境
  • yarnによるパッケージ管理

2. 発生した問題

  • yarn dev 実行後、ビルドが進まない
  • 7分経過しても「building (25%) 132/158 modules」の状態で止まったまま
  • 実質的な開発が不可能な状態

原因

  • M3 MacのCPUはARM64アーキテクチャ
  • Node.js 12系は ARM64アーキテクチャのネイティブサポートが不完全
  • 特に古いバージョン（12.5.0）では互換性の問題が顕著

解決への道のり

1. アプローチ

  • x86_64（Intel）アーキテクチャ環境で実行することで互換性を確保
  • 同時に12.22.12（LTS最終版）への更新も実施

2. Node.js環境の再構築

# nodenvのインストール
brew install nodenv

# シェルの設定
echo 'eval "$(nodenv init -)"' >> ~/.zshrc
source ~/.zshrc

# Intel版（x86_64）シェルで実行
arch -x86_64 zsh

# アーキテクチャの確認
arch  # x86_64であることを確認

# Node.jsのインストール
nodenv install 12.22.12

# プロジェクトディレクトリで
cd プロジェクトディレクトリ
nodenv local 12.22.12
yarn install

改善結果

  • ビルドが正常に完了するように
  • 開発サーバーの起動が安定化
  • 通常の開発作業が可能に

今後の課題

  • Node.js 14以降への移行計画（ARM64ネイティブサポートの改善）
  • Vue3/Nuxt3へのアップグレード検討
  • チーム全体での開発環境の統一

まとめ

M3 MacのARM64アーキテクチャでの Node.js 12.5.0の互換性問題に対し、nodenvでIntel（x86_64）版の12.22.12をインストールして実行することで解決しました。Intel版シェルでNode.jsを動作させることで、レガシープロジェクトの開発環境を正常に構築できました🎉

Discussion