Open6

Trellis with Apple Silicon で WordPress の環境構築を試す

WordPress
Composer
Apple silicon
Lima
yamatoiizukayamatoiizuka

モチベーション

WordPress サイトを快適に開発したい。Docker にはなるべく触りたくない。

概要

Roots は WordPress に関連するいくつかのツールをオープンソースで開発している。とてもありがたい。

Trellis がサーバーとデプロイ関連のツール、Bedrock はコマンドベースでのプラグイン管理などができる WordPress ボイラープレートらしい。Trellis をインストールすると、Bedrock は /site ですでに構築された状態になっている。

そのほか、モダンな技術スタックのスターターテーマ Sage がある。これはあくまでテーマなので、Trellis や Bedrock とは独立に使用することもできる。

Trellis の構成

example.com/      # → Root folder for the project
├── trellis/      # → Your server configuration (a customized install of Trellis)
└── site/         # → A Bedrock-based WordPress site
    └── web/
        ├── app/  # → WordPress content directory (themes, plugins, etc.)
        └── wp/   # → WordPress core (don't touch! - managed by Composer)

いいところ

Why use Bedrock?

Better folder structure
Dependency management with Composer
Easy WordPress configuration with environment specific files
Environment variables with Dotenv
Autoloader for mu-plugins (use regular plugins as mu-plugins)
Enhanced security (separated web root and secure passwords with wp-password-bcrypt)

What is Trellis?

Trellis is a tool to create WordPress web servers and deploy WordPress sites.

Trellis lets you create and manage servers that are production ready, performance optimized and based on best practices that are continuously improved. Trellis is self-hosting done right since you benefit from the community and experience of Roots.

なんだか嬉しいことばかり書いてある。まずは Trellis での環境構築を進める。
Installation Trellis: https://roots.io/trellis/docs/installation/

yamatoiizukayamatoiizuka

Trellis のインストール (Apple Silicon)

Trellis CLI をグローバルインストール：

$ brew install roots/tap/trellis-cli

Lima をグローバルインストール（Apple Silicon 用）：

brew install lima

プロジェクトの作成と仮想マシンの立ち上げ：

$ trellis new example.com # production のドメイン
$ cd　example.com
$ trellis vm start

ブラウザで開く：

 trellis open #既定ブラウザで example.test が立ち上がる

嬉しい

仮想マシンの停止：

$ trellis vm stop  # Stops the development virtual machine.

仮想マシンの削除：

$ trellis vm delete # Deletes the development virtual machine.

※ trellis up は Vagrant 用のコマンドなので、Apple Silicon Mac では使わない。

yamatoiizukayamatoiizuka

Composer でプラグインのインストール

プラグインを入れてみる。初期状態は何も入っていない。初期状態は何も入っていないの嬉しすぎる。

定番の Advanced Custom Field を入れてみる。WordPress Packagist でパッケージ名を探す。
https://wpackagist.org/

/trellis がサーバー関連のディレクトリ、 /site が WordPress 関連のディレクトリなので、/site（composer.json がある場所）でインストールする。

$ cd site
$ composer require wpackagist-plugin/advanced-custom-fields


コマンドでプラグインが入った。嬉しい。

yamatoiizukayamatoiizuka

Sage でテーマ開発

ここからは自由にテーマの開発環境を作ればいいのだが、せっかくなので Roots が公開しているスターターテーマ Sage を使ってみる。
https://roots.io/sage/

  • Vite
  • Laravel Blade
  • Tailwind CSS（Sass に変更可）
  • Hot Reloading

あたりが特徴。

構造

基本的には resources/ 内で作業していく流れかな。 resources/views/ 内に Blade テンプレートがある。
https://roots.io/sage/docs/structure/

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── Providers/        # → Service providers
│   ├── View/             # → View models
│   ├── filters.php       # → Theme filters
│   └── setup.php         # → Theme setup
├── public/               # → Built theme assets (never edit)
├── resources/            # → Theme assets and templates
│   ├── css/              # → Theme stylesheets
│   ├── fonts/            # → Theme fonts
│   ├── images/           # → Theme images
│   ├── js/               # → Theme JavaScript
│   └── views/            # → Theme templates
│       ├── components/   # → Component templates
│       ├── forms/        # → Form templates
│       ├── layouts/      # → Base templates
│       └── partials/     # → Partial templates
├── vendor/               # → Composer packages (never edit)
├── composer.json         # → Autoloading for `app/` files
├── functions.php         # → Theme bootloader
├── index.php             # → Theme template wrapper
├── node_modules/         # → Node packages (never edit)
├── package.json          # → Node dependencies and scripts
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
└── vite.config.js        # → Vite configuration

インストール

$ cd site/web/app/themes/
$ composer create-project roots/sage your-theme
$ cd your-theme
$ npm install # npm パッケージのインストール

開発

$ npm run dev

APP_URL の指定

npm run devを叩いた時、コンソールで

  LARAVEL   plugin v1.2.0

  ➜  APP_URL: undefined

となってしまう。テーマのディレクトリ（vite.config.js があるところ）に .env ファイルを作り、APP_URL を指定すると解消する。

# themes/your-theme/.env
APP_URL=example.test

  LARAVEL   plugin v1.2.0

  ➜  APP_URL: example.test

これで快適。

参考：https://discourse.roots.io/t/no-hot-reloading-dev-site-when-using-vite/29229/4

TailwindCSS → Scss に変更

公式のガイドがある。やってみたけどそのままだと Hot Reloading に対応していない？
How to Use Sass with Sage

感想

結構いい気がする。Blade のテンプレートも最小限の構成になっていて扱いやすそう。これを機に Tailwind も触ってみようかなあ。

yamatoiizukayamatoiizuka

wp-admin へのログイン：
trellis/group_vars/[environment]/wordpress_sites.yml に admin_email が、
trellis/group_vars/[environment]/vault.yml に admin_password がそれぞれ記載されている。

ローカル開発環境では、
trellis/group_vars/development/wordpress_sites.yml
trellis/group_vars/development/vault.yml
をそれぞれ参照する。