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

ゆーたろー

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

HRTechベンチャーのエンジニアです。
TypeScript/Vue.js(Nuxt.js)/React/Next.js/PHP/LaravelでWebアプリケーションの開発を行っています。

・プログラミングスクールメンター
・神戸で勉強会「つながる勉強会」を運営
・神戸メインのグルメインスタ運営

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

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

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

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

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

Intel製チップMac版

あわせて読みたい

【導入編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Int… Laravelを勉強していて開発環境にDockerを導入したいけどどうすれば良いの？ と疑問をお持ちの方のお悩みを解決できる記事になっています！ Dockerを使ったLaravel+Vue….

あわせて読みたい

【前編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel… Dockerで環境構築したいけどdocker-compose.ymlやDockerfile等の設定ファイルってどんな風に書けば良いの？ と疑問をお持ちの方のお悩みを解決できる記事になっています…

あわせて読みたい

【後編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel… ・Dockerで環境構築する時にミドルウェアの設定ファイルはどんな風に書くのが良いの？・Laravel、Vue.jsを導入するためにはどうすれば良いの？ と疑問をお持ちの方のお…

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

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

完成版のGitHubリポジトリ

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

GitHub

GitHub – shimotaroo/docker-laravel-vuejs-sample: Laravel6×Vue.js2のDocker環境サンプル(M1 Mac対応) Laravel6×Vue.js2のDocker環境サンプル(M1 Mac対応). Contribute to shimotaroo/docker-laravel-vuejs-sample development by creating an account on 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

このような修正をする理由はこちらです。

以下の記事から参照させていただきました。

Qiita

M1Mac環境でDockerのMySQLを動かす – Qiita 　概要 M1Mac環境でMySQLを起動しようと思ったら下記のようなエラーが出た。 $　docker run -d –rm -e MYSQL_ROOT_PASSWORD=password mysql:8.0 Unab…

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

補足

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

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

Zenn

M1 MacのDockerプレビュー版でLaravelとRuby on Railsは動くのか

最後に

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

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

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

オススメ教材

Laravel

• PHPフレームワークLaravel入門 第2版（通称：青本）

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

• PHPフレームワーク Laravel実践開発（通称：緑本）

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

• PHPフレームワークLaravel Webアプリケーション開発 バージョン8.x対応

現役Laravelエンジニアのレベルアップに最適な技術書です。
サービスコンテナ、レイヤードアーキテクチャ、テストなど実践的な内容が幅広く学べます。
（難しい話もあるのでそこまで初心者向きではないです）

Docker

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

Udemy

米国AI開発者がゼロから教えるDocker講座 AI開発のプロが徹底的に現場目線でわかりやすく教えます．Dockerを使って超本格的なデータサイエンスやWeb開発の環境が作れるようになります．

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

Vue.js

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

Udemy

超Vue.js 2 完全パック (Vue Router, Vuex含む) Vue.jsを、基礎から、Vue CLI、Vue Router、Vuexを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。ReactやAngularエンジニアの方もぜひ…

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

Vue.js&Nuxt.js超入門

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