ローカル開発用Docker環境をDocker DesktopからOrbstackに変えてみた【2】

開発環境

さて、Orbstack上でLAMP環境までできたので、

バーチャルホストの設定

Vagrant時代から、開発用のドメインを [案件名.vagrant.test] という形で運用していたので、いまだにこのドメインを使ってます。
ということで、まずはエディターでホストマシンのhostsファイルを編集。

$ cursor /etc/hosts 
# 127.0.0.1 vagrant.test 
# 上記を追記

続いてApacheのconfを編集。大元のconfファイルのServerNameを書き換えるのではなく、ハナからvhostで設定する。
プロジェクトフォルダの ./config/vhosts/default.confをいじる。

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot ${APACHE_DOCUMENT_ROOT}
    ServerName vagrant.test # <=ここを書き換える
    <Directory ${APACHE_DOCUMENT_ROOT}>
        AllowOverride all
    </Directory>
</VirtualHost>

https化を同時に進めておく

次はSSLの適用でhttpsアクセスを可能にします。

これはmkcertsを入れているのですぐできる。

$ brew install mkcert nss # これは済んでる

# ローカル環境専用のルート認証局(CA)を生成して、
# システムのトラストストア(信頼済みルート証明書ストア)にインストール

$ mkcert -install
The local CA is already installed in the system trust store! 👍
The local CA is already installed in the Firefox trust store! 👍
# あ、以前にやってたww

$ cd ./config/ssl
# サブドメイン運用のためワイルドカードで証明書発行
$ mkcert "*.vagrant.test" vagrant.test

Created a new certificate valid for the following names 📜
 - "*.vagrant.test"
 - "vagrant.test"

Reminder: X.509 wildcards only go one level deep, so this won\'t match a.b.vagrant.test ℹ️

The certificate is at "./_wildcard.vagrant.test+1.pem" and the key at "./_wildcard.vagrant.test+1-key.pem" ✅

It will expire on 18 December 2027 🗓
 $ ls -la
total 16
-rw-------@ 1 yngdrsk  staff  1704  9 18 16:18 _wildcard.vagrant.test+1-key.pem
-rw-r--r--@ 1 yngdrsk  staff  1659  9 18 16:18 _wildcard.vagrant.test+1.pem
drwxr-xr-x  4 yngdrsk  staff   128  9 18 16:18 .
drwxr-xr-x  6 yngdrsk  staff   192  9 18 11:23 ..

これら二つのファイルを、
cert-key.pem
cert.pem
とリネームしておきます。

ここで再度vhostフォルダのdefault.conf を編集。

まず、cert.pem等のマウント場所を確認。

# docker-compose.yml line 16
${SSL_DIR-./config/ssl}:/etc/apache2/ssl/

ホストマシンの ./config/ssl ディレクトリとコンテナ側の /etc/apache2/ssl が対応。
ということで、default.confの下段は以下のようにします。

<VirtualHost *:443>
    ServerAdmin webmaster@localhost
    DocumentRoot ${APACHE_DOCUMENT_ROOT}
    ServerName vagrant.test          # <= ココ
    <Directory ${APACHE_DOCUMENT_ROOT}>
        AllowOverride all
    </Directory>

    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl/cert.pem # <= ココ
    SSLCertificateKeyFile /etc/apache2/ssl/cert-key.pem # <= ココ
</VirtualHost>

サブドメインを増やす際には、このdefault.confをコピーして 案件名.confファイルを作り、内容をよしなに編集という段取りです。

あと、ワードプレス案件が多いということで、ディレクティブを以下のように書き換えておきます。

    <Directory ${APACHE_DOCUMENT_ROOT}>
        Options Indexes FollowSymLinks # <= 追記
        Require all granted # <= 追記
        AllowOverride All
    </Directory>

さて、やることはこれぐらいかな。
いったん再起動します。

$ docker compose down
$ docker compose up -d

そしてブラウザから https://vagrant.test にアクセスできたらOKです!

サブドメイン運用の確認

# hogeディレクトリを作って
$ mkdir www/hoge 

# とりあえずファイルを置いて
$ echo '<?php phpinfo(); ?>' > ./www/hoge/index.php

# ホストマシンにvhost登録して、
$ echo "127.0.0.1 hoge.vagrant.test" | sudo tee -a /etc/hosts

# ./confg/vhostsフォルダで
# default.confをコピーしてhoge.confとし、よしなに書き換えて
$ cp ./config/vhosts/default.conf ./config/vhosts/hoge.conf
$ cursor ./config/vhosts/hoge.conf

で、再起動して、https://hoge.vagrant.test にアクセス。
よく出来ました。今日はここまで。
次回は上記の作業、すなわち新規案件をスタートする際の作業を自動化するシェルを用意します。

開発環境Docker,Orbstack

Posted by YANAGIDAryosuke