この記事はLCL Advent Calendar 2021 - 21日目です。
フロントエンドエンジニアの川辺です。
早いもので私がLCLに入社してから5年以上の月日が経ちました。 入社時に購入していただいた当時の最新のMac Book Proも今ではすっかり古くなってしまったので、9月に新しいM1 Macを購入してもらいました。
今回は弊社のメインのサイトであるバス比較なび(以降なびと呼びます)の開発環境をM1 Macに対応した際に行った作業をまとめました。
はじめに
M1 Macで開発環境を構築していく進め方としては、既存の開発環境の構築方法をM1環境でも試して、発生したエラーを都度潰していく感じで進めていきました。 作業をしているとwebpackの設定が古くなっていたり、現在は使われていないスクリプトがあったり、ついでに修正したくなる箇所がパラパラと発生したのですが、そこまでやってしまうと作業量がどんどん膨れ上がってしまうので、今回はできるだけM1環境で動かすための最小限の対応を心がけました。
node-sassをDartSassに変更
環境構築を進める中で最初に発生したエラーがこちらです。
調べてみるとM1 Macではnode-sassを使うことができないようです。 https://github.com/sass/node-sass/issues/3033
公式ページでもnode-sassの使用は非推奨になっていて、代わりにDart Sassを使用するようにと書かれていたのでそれに従うようにしました。 https://www.npmjs.com/package/node-sass
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
具体的な作業内容としては以下になります。
- DartSassのインストール
- node-sassのアンインストール
- package.jsonのbuild:scssコマンドの書き換え
- node-sass-globbingの廃止
- css-loaderとsass-loaderのインストール
- 各種エラーの対応
1. DartSassのインストール
以下のコマンドでDartSassをインストールします。
npm install sass -D
2. node-sassのアンインストール
以下のコマンドでnode-sassをアンインストールします。
npm uninstall node-sass
3. package.jsonのbuild:scssコマンドの書き換え
Sassコンパイルのコマンドをnode-sassからDartSassに置き換えました。 ※--importerは4で説明するプラグインのオプションです。 ※--source-commentsはコンパイルしたファイルに元ファイルの情報を追記してくれるオプションです。かなり便利だったのでDartSassでもこれに相当するオプションがないか探したのですが、見つかりませんでした。ただ、移行してしばらく経った現在では意外となくても開発にそこまで支障はありませんでした。
# node-sass "build:scss": "node-sass XXXX/sass/entry --importer node_modules/node-sass-globbing/index.js --output YYYY/stylesheets/dist --source-comments true", # DartSass "build:scss": "sass XXXX/sass/entry:YYYY/stylesheets/dist -I ./XXXX/sass/",
4. node-sass-globbingの廃止
node-sass-globbingとはインポートする際に@import "../../pc/atoms/**";
のようにディレクトリ配下のファイルを丸ごとインポートできるようにするプラグインです。
DartSassでもこれに代わるプラグインがないか探してみたのですが見つからなかったので、仕方なく各ディレクトリ配下に_index.scssを作成して対応しました。
やり方はこちらの記事を参考にしました。 https://haniwaman.com/dart-sass/#index_id6
5. css-loaderとsass-loaderのインストール
node-sassからDartSassに変更したことによってコンパイル時にcss-loaderやsass-loaderが見つからないと怒られるようになりました。(逆になぜ今まで怒られずに動いていたのかわかりません。) 実際にpackage.jsonにはどちらも含まれていなかったのでインストールしましたが、その時にwebpackのバージョンの問題がりました。(なびではwebpack v4を使用しています。)
css-loader
css-loader v6.0.0
からwebpack v5
以降のサポートになったので、css-loader v5.2.7
をインストールしました。
https://github.com/webpack-contrib/css-loader/releases/tag/v6.0.0
sass-loader
sass-loader v11.0.0
からwebpack v5
以降のサポートになったので、sass-loader v10.2.0
をインストールしました。
https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0
6. 各種エラーの対応
3で設定したコマンドを実行した際に発生したエラーを、一つずつ潰していきました。 どこでどういったエラーが発生しているかはコンソールに表示されるので、地道に一つ一つ対応していきました。
7. @importを@useに変更
この対応は厳密には今回やる必要はありませんが、@importは2022年10月に廃止される予定なのでこのタイミングで@useに置き換えることにしました。
https://sass-lang.com/blog/the-module-system-is-launched#future-plans
One year after this deprecation goes into effect (1 October 2022 at latest), we will drop support for @import and most global functions entirely. This will involve a major version release for all implementations.
具体的なやり方としては、sass-migrator
というツールを使用しました。
https://sass-lang.com/documentation/cli/migrator
以下のコマンドで一括置き換えします。
npx sass-migrator --migrate-deps module frontend/src/sass/** --load-path ./frontend/src/sass/
上記コマンド実行後に、どこかしらのファイルでエラーが発生するので、それを個別に修正していきました。
これでDartSassへの移行作業は完了です。
Node.jsのバージョンアップ
Node.jsのバージョンを10.13.0
から16.13.0
に上げました。
Node.jsはv16からM1対応になったのと、16.13.0
からLTSになったので一気に上げてしまいました。
https://zenn.dev/ryuu/articles/node-supports-applesilicon https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V16.md#16.13.1
メジャーバージョンが一気に6も上がるので、動作的な問題がないか心配でしたが、意外と何も問題なくなく上げることが出来ました。
コードの修正は.node-version
とpackage.json
とpackage-lock.json
とREADME.md
くらいでした。
それ以外に、テストサーバーやデプロイサーバーのNode.jsのバージョンを上げる必要がありました。
デプロイサーバーでの作業は本番環境に影響するのでペアで作業を行いました。
gem関連のエラーの解消
Railsサーバーの起動時にmini_racer v0.3.1
が原因で以下のエラーが発生しました。
dyld: lazy symbol binding failed: Symbol not found
こちらのエラーはmini_racer
のバージョンを0.4.0
に上げたらローカル環境では動くようになったのですが、今度はテスト環境のデプロイに失敗するようになってしまいました。
この問題は、インフラメンバーが暫定で開発環境だけlibv8-nodeのM1対応がマージされたmini_racerを参照するように変更してくれました。 https://github.com/rubyjs/mini_racer/pull/210
環境構築の手順を整理
ここではREADME.mdや起動スクリプトの更新を行いました。
特に書くこともないので割愛させていただきます。
動作確認
私以外のフロントチームはIntel Macを使っているので、他のメンバーのローカル環境のまっさらな状態から、なびの開発環境構築ができるかを確認してもらいました。
また、今回サイト全体に影響する変更を行なったので、サイト全体の挙動や見た目の確認をかなりしっかりめにしました。 エンジニア内で一通り確認作業を行なった後に、ディレクターサイドでも確認をしてもらいました。
まとめ
M1 Macにしたことによって、良くも悪くも開発環境を見直す機会を得ました。 M1 Macに対応するための作業量の多さや、終わりの見えないバグの調査をしているときは大変でしたが、今思うと普段開発しているときに意識しない部分を見れたりして、個人的には良い経験ができたと思っています。 M1 Macに移行してからまだそんなに時間は経っていませんが、今のところは何の問題もなく快適に開発できています。 少しでもIntel MacからM1 Macへの移行で苦しんでいる人の役に立てれば嬉しいです。
採用情報
フロントエンドチームでは、より良いサービスを提供していくために新しい仲間を募集しています。
カジュアルに会話できる機会もご用意できますので、もし興味がある方は気軽にご連絡ください。