先日、2009年から愛用していた懐かしの白いMacBook(Early 2009)を卒業して、MacBook Air2020(1,1GHz i5クアッドコア+SSD 512GB+16GB RAM)に乗り換えました。
先代はメモリを8GBまで増設して内臓HDDもSSDに換装してなんとか延命をしており、普段使用するアプリケーション（Photoshop CCの最新版とかphpStormとかableton Liveとか）はほぼストレス無く使えていました。
現在はうつ病の療養中で無職のためこれまでやってきてなかった事をしたいと思い、今更ながらSassなどこれまで業務の中で触れなかった技術を学ぼうと思い、まずはVirtualBox+CentOSで環境を作ってみたのですが、公式リポジトリのCentOSのバージョンが7系でphpも5.4系とかなり古いものでした。
そこでDockerを使ってみようとしたところ、旧マシンではOSのアップデートがSierra(10.12)で止まってしまっており現行バージョンのDocker Desktopが使えなかったので、例の一人10万円給付金を使ったMacBook Air2020の購入へと至りました。
...と前置きが長くなりましたが本題に入りたいと思います。
本稿は長くなるので３回に別けて投稿したいと思います。
ゴール
Docker Desktop for Mac でWordpress環境を作り、スターターテーマのunderscores(_S)を使ったテーマ開発ができるようにする。
cssはSassを使い、phpStorm側でコンパイルが出来るようにする。
ついでにphpMyAdminも使えるようにする。
前提条件
- MacOS Catalina(10.15) ※セットアップとデータ移行が済んだ状態
- phpStorm(2020.1)
ステップ
- XCodeのインストール(1/3)
- Homebrewのインストール(1/3)
- node(npm)+node-sassのインストール(1/3)
- Docker Desktop for Mac のインストール（(2/3)
- Docker-composeによるコンテナの構築（2/3）
- underscores(_s)でのスターターテーマの作成とファイルの設置(3/3)
- phpStormでのSassウォッチャーの登録(3/3)
Xcodeのインストール
まずはXCodeをインストールします。
これは後にHomebrew経由でnodeを導入し、さらにnode-sassを導入するための前準備です。
AppStoreからXcodeを検索してポチればOKです。
インストールにはそこそこ時間が掛かるので、しばらく放っておきましょう。自分は1時間くらい掛かったような。
もしくはターミナルから以下のコマンドでもインストールできるようです。
$ xcode-select --install
Homebrewのインストール
インストールが完了したら次はHomebrewのインストールを行います。
HomebrewをはMacOS向けのパッケージマネージャーで必要なものをコマンドで簡単にインストールできる、というものです。
これにより後のnodeのインストールを行います。
公式サイトによれば以下のコマンドでインストールが可能なようです。
＄ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
インストールが完了したらバージョンを確認し、以下のようにバージョンが表示されればOKです。
$ brew --version
Homebrew 2.4.3
Homebrew/homebrew-core (git revision 06581; last commit 2020-07-07)
node(npm)+node-sassのインストール
続いてHomebrew経由でnode(npm)をインストールします。
npmとはnodeのパッケージ管理ツールの事です。
$ brew install -g node
インストールが済んだらバージョンが正常に表示されるか確認しましょう。
$ node -v
v14.5.0
無事、インストールできたようです。
npmのバージョンは以下のコマンドで確認できます。
＄ npm version
{
npm: '6.14.5',
ares: '1.16.0',
brotli: '1.0.7',
cldr: '37.0',
icu: '67.1',
llhttp: '2.0.4',
modules: '83',
napi: '6',
nghttp2: '1.41.0',
node: '14.5.0',
openssl: '1.1.1g',
tz: '2019c',
unicode: '13.0',
uv: '1.38.0',
v8: '8.3.110.9-node.23',
zlib: '1.2.11'
}
私の環境では以上のような結果になりました。
npmのインストールが確認できたら、今度はnpmでnode-sassをインストールします。
＄ npm install --global --save-dev node-sass
特にエラーらしきものが出ていなければOKでしょう。
``
以降は次のエントリーに続きます。