【M1 Mac版】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEMP環境)を構築する方法〜MacOS M1 Chip対応〜

ゆーたろー

こんにちは、ゆーたろーです。

大阪のHRTechベンチャーのエンジニアです。
TypeScript/Vue.js(Nuxt.js)/Laravelを使っています。

・プログラミングスクール講師
・月1で勉強会運営
・Twitter(フォロワー4700人以上)で情報発信

など色々やっている1児のパパです。

この記事ではこのブログでかなり詳しく解説した「絶対に失敗しないDockerでLaravel + Vue.jsの開発環境(LEMP環境)を構築する方法」シリーズのM1 Mac版です。

この記事では過去記事との変更点のみを記載します。

といってもM1 Macの場合に変更がで必要なのはDB(MySQL)用コンテナ関連のファイルだけです。

それ以外はIntel製チップのMacと同じ手順なので、下の3つの記事をベースにしていただき、MySQLコンテナの設定のところまできたらこの記事を見て適宜修正してください。

Intel製チップMac版

目次

使用ツール・アプリケーションのバージョン

環境構築に使用するツール、アプリケーションのバージョンはこちらです。

ツール・アプリケーションバージョン
Git2.23.1
Docker20.10.5
Docker Compose1.29.0
Composer2.0.13
Laravel6.20.25
npm6.14.6
Vue.js2.6.12
MySQL8.0
使用ツール、アプリケーションのバージョン

完成版のGitHubリポジトリ

このブログで解説する開発環境の完成版のコードは既にGitHubに上げています。

必要に応じて参照ください。

M1 Macでの変更点

修正するのはdocker/mysql/Dockerfileだけです。

修正後

FROM --platform=linux/x86_64 mysql:8.0 

ENV TZ=UTC

COPY ./docker/mysql/my.cnf /etc/my.cnf

変更点

FROM mysql:8.0 → FROM –platform=linux/x86_64 mysql:8.0

理由はこちらの記事にも書いている通りですが、

  • M1Macのプラットフォームはarm64
  • MySQLのDockerイメージのサポートプラットフォームはamd64
  • Dockerイメージをプルする際に実行環境のプラットフォームに合わせて自動的にamd64のイメージを取得するのでビルドするとエラーになる

ということです。

簡単にいうとまだMySQLのイメージはM1には対応してないってことですね。

補足

MySQLではなく、MariaDBを使う方法(MariaDBのイメージはM1対応している)もありますが、設定ファイル(docker/mysql/my.cnf)の修正が必要なのでこの記事での説明は割愛します。

この記事にMariaDBのイメージを使う方法が載っています。

最後に

これでIntel製チップ、M1チップどちらのMacでもDocker+Laravel+Vue.jsの環境を構築する方法をまとめることができました。

Dockerを使うとリポジトリをクローンしてポチポチするだけで環境が構築できるので、環境構築が楽になります。

ぜひこの記事と完成版のリポジトリを参考にしてみてください。

オススメ教材

Laravel

PHPフレームワークLaravel入門 第2版(通称:青本)

定番の青本です。これからLaravelを学習したいという方全員にオススメできる入門書です。
今買うなら上記リンクから飛べるLaravel6対応版の青本を強くオススメします。

PHPフレームワーク Laravel実践開発(通称:緑本)

青本と同じ著者が執筆した技術書で青本の次に読むとLaravelの理解がかなり深まります。
Laravelの基礎は身についた方にオススメです。

Docker

Udemy:米国AI開発者がゼロから教えるDocker講座

Dockerを1から学習したい方にとてもオススメする教材です。
僕はこの教材でしか勉強をしていませんが、実務で困らないレベルまで理解することができました。

Vue.js

【超オススメ】Udemy:超Vue.js 2 完全パック (Vue Router, Vuex含む)

Vue.jsを勉強したい全ての方にオススメできる教材です。
Vue.jsの基礎〜応用まで網羅できるプラス、Vue Router、Vuex、AxiosなどVue.jsでのフロントエンド開発には欠かせないパッケージについても学習できます。超オススメ。

Vue.js&Nuxt.js超入門

書籍でVue.jsを勉強して、Vue.jsのフレームワークNuxt.jsも学習したい方にオススメです。
(僕はNuxt.js学習用に購入しました)

“頭おかしい”プログラミングスクール『やんばるエキスパート』

内定者続出のエンジニア転職特化オンラインコミュニティ『転職クエスト』

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

上場グループのHRTechベンチャーで働くWebエンジニアです。
新卒で入社した大手重工メーカを4年で退職し、2020年4月からエンジニアとキャリアチェンジしました。

仕事ではTypeScript/Vue.js(Nuxt.js)/Laravelを主に使っています。

プログラミングスクールの講師やデザイン関連のお仕事もさせてもらっています。

神戸で「つながる勉強会」という勉強会を月1で運営しています。
https://tsunagaru-kobe.connpass.com/

お仕事のご依頼、ご相談はお問い合わせページもしくはTwitterのDMからお願いします。

コメント

コメントする

目次
閉じる