Craft Nitro を使った Craft CMS 用ローカル環境の作り方

@mersy の記事でも紹介されていますが Craft CMS のローカル開発環境を簡単に作れる Craft Nitro を試してみました。読み方は「クラフト・ナイトロ」です。

PHP のバージョンの確認

今回は PHP 7.4 の開発環境を構築したいと思います。Craft CMS 自体は先に Mac にインストールするので、Mac の PHP のバージョンも 7.4 にそろえておこうと思います。詳細は下記の記事を参照してください。

macOS 10.15 Catalina の PHP を 7.4 にアップグレードする

Multipass をインストール

Multipass は Ubuntu サーバーベースの仮想環境を簡単に作れるツールです。Craft Nitro はこの Multipass がベースになるので、まずは Multipass をインストールします。

インストール方法は Installing Multipass on macOS | Multipass documentation にも書いてありますが、Craft Nitro - Localhosting Countdown | CraftQuest によるとインストーラーを使った方法がおすすめのようです。流れは以下の通りです。

Releases · canonical/multipass で最新版の .pkg をダウンロード
ダウンロードしたファイルを実行
インストーラーの手順にそってインストール

さて、Multipass のインストールが完了したら Multipass.app を起動します。Multipass が起動するとメニューバーに「M」のアイコンが表示されればインストール成功です。

Craft Nitro をインストール

続いて Craft Nitro をインストールします。Craft Nitro に書いてあるコマンドをターミナルで実行します。2020-07-05 時点では下記のコマンドになります。

bash <(curl -sLS http://installer.getnitro.sh)

上記のコマンドを実行すると Craft Nitro がインストールされます。インストールされると、下記のようにいくつか質問され、Craft Nitro の初期化が始まります。今回はそのまま初期値のままで良いのでエンターしていきました。

Initialize the primary machine now? [yes] 
How many CPU cores? [2] 
How much memory? [4G] 
How much disk space? [40G] 
Which version of PHP? [7.4] 
Which database engine? [mysql] 
Which version of mysql? [5.7] 
Applying the changes now...

Applying the changes now...が表示されてからは少し時間がかかりました。初期化が完了すると下記のように仮想環境の情報が表示されます。

Name:           nitro-dev
State:          Running
IPv4:           192.168.64.2
Release:        Ubuntu 20.04 LTS
Image hash:     a7514e312b7d (Ubuntu 20.04 LTS)
Load:           1.38 0.63 0.26
Disk usage:     2.6G out of 38.6G
Memory usage:   297.4M out of 3.8G

ここで上の情報にかいてある IP アドレスに http://192.168.64.2 とアクセスすると Nginx の Welcome ページが表示されます。

なお、この IP アドレスは後の Craft CMS のセットアップで必要になります。

Craft CMS をインストール

下記のコマンドを順に実行し、ローカル開発環境のプロジェクトディレクトリを作成して、そのディレクトリに移動します。今回はホームディレクトリに Nitro というディレクトリを作って、その中に craft-dev という Craft プロジェクトディレクトリを作ります。

cd
mkdir CraftNitro
cd CraftNitro/
composer create-project craftcms/craft craft-nitro
cd craft-nitro/

サイトを追加

下記のコマンドを実行して Craft CMS を仮想環境に追加します。

nitro add

下記のように hostname などを聞かれますので答えていきます。今回は hostname だけ craft-nitro.test に変更して、あとは初期値のままエンターしました。最後に聞かれるパスワードは Mac のパスワードです。

Enter the hostname [craft-nitro] craft-nitro.test
Enter the webroot [web] 
Added craft-nitro.test to config file
Apply changes from config? [yes] 
Mounting ~/CraftNitro/craft-nitro to nitro-dev
Adding site craft-nitro.test to nitro-dev
Applied changes from /Users/tinybeans/.nitro/nitro-dev.yaml                     
Password:

これで /Users/ユーザー名/.nitro/nitro-dev.yaml というファイルが作成されます。下記のコマンドで確認できます。

cat ~/.nitro/nitro-dev.yaml

php: "7.4"
mounts:
- source: ~/CraftNitro/craft-nitro
  dest: /home/ubuntu/sites/craft-nitro
databases:
- engine: mysql
  version: "5.7"
  port: "3306"
sites:
- hostname: craft-nitro.test
  webroot: /home/ubuntu/sites/craft-nitro/web

また、hosts ファイルにも 192.168.64.2 craft-nitro.test が追加されています。hosts の内容は下記のコマンドで確認できます。

cat /private/etc/hosts

データベースを作成

続いて下記のコマンドでデータベースを作成します。

nitro db add

データベース名を聞かれるので、今回は craft_nitro としました。データベース名には英数かアンダースコアのみ利用できます。

ここで作成されたデータベースのユーザー名とパスワードは nitro になります。

Craft CMS のセットアップ

./craft setup コマンドを利用して Craft CMS の初期設定を行います。Database server name or IP address には Craft Nitro をインストールした後に表示された IP アドレスを設定します。メモし忘れた場合は nitro info コマンドで確認できます。Database name には先程作成したデータベース名を設定します。

% ./craft setup
Which database driver are you using? [mysql,pgsql,?]: mysql
Database server name or IP address: [127.0.0.1] 192.168.64.2
Database port: [3306] 
Database username: [root] nitro
Database password: 
Database name: craft_nitro
Database table prefix: 
Testing database credentials ... success!
Saving database credentials to your .env file ... done

Install Craft now? (yes|no) [yes]:

Username: [admin] your-username
Email: your-email@example.com
Password: 
Confirm: 
Site name: Craft Nitro
Site URL: @web
Site language: [en-US] en-NZ

これで http://craft-nitro.test にアクセスしてウェルカム画面が表示されればインストール成功です。管理画面は http://craft-nitro.test/admin になるので、作成したユーザーでログインできるか確認しましょう。