takaya030の備忘録

PHP、Laravel、Docker などの話がメインです

Lumen で Laravel Sail を使用する

Laravel

Lumen に Laravel Sail をインストールしたときの作業手順のメモ

検証環境

Windows11 Home Edition (version 24H2)

D:\>wsl --version
WSL バージョン: 2.3.26.0
カーネル バージョン: 5.15.167.4-1
WSLg バージョン: 1.0.65
MSRDC バージョン: 1.2.5620
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26100.1-240331-1435.ge-release
Windows バージョン: 10.0.26100.2605

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 27.4.1, build b9d17ea
Docker Compose version v2.32.1
github.com/docker/buildx v0.19.3 48d6a39

Ubuntu 環境に devbox をインストール

下記コマンドで devbox をインストール

$ curl -fsSL https://get.jetify.com/devbox | bash

正常にインストールされたか確認

$ devbox version
0.13.7
$ devbox help
Instant, easy, predictable development environments

Usage:
  devbox [flags]
  devbox [command]

Available Commands:
  add         Add a new package to your devbox
  auth        Devbox auth commands
  cache       Collection of commands to interact with nix cache
  completion  Generate the autocompletion script for the specified shell
  create      Initialize a directory as a devbox project using a template
  generate    Generate supporting files for your project
  global      Manage global devbox packages
  help        Help about any command
  info        Display package info
  init        Initialize a directory as a devbox project
  install     Install all packages mentioned in devbox.json
  list        List installed packages
  rm          Remove a package from your devbox
  run         Run a script or command in a shell with access to your packages
  search      Search for nix packages
  secrets     Interact with devbox secrets in jetify cloud.
  services    Interact with devbox services.
  shell       Start a new shell with access to your packages
  shellenv    Print shell commands that create a Devbox Environment in the shell
  update      Update packages in your devbox
  version     Print version information

Flags:
  -h, --help    help for devbox
  -q, --quiet   suppresses logs

Use "devbox [command] --help" for more information about a command.

Lumen のプロジェクトを作成

Lumen プロジェクトのディレクトリを作成して php と composer をインストール

$ mkdir lumen-project
$ cd lumen-project

$ devbox init
$ devbox add php82 php82Packages.composer

composer を使って Lumen をインストール

$ devbox shell
(devbox) $ composer create-project laravel/lumen ./tmp
(devbox) $ mv ./tmp/* ./tmp/.* .
(devbox) $ rmdir ./tmp

(devbox) $ php artisan --version
Laravel Framework Lumen (10.0.4) (Laravel Components ^10.0)

Laravel Sail のインストール

composer を使って Laravel Sail をインストール

(devbox) $ composer require laravel/sail --dev

boostrap/app.php に下記を追加

if(env('APP_ENV') == 'local')
{
    $app->register(Laravel\Sail\SailServiceProvider::class);
}

sail 関連の artisan コマンドが追加されているか確認

(devbox) $ php artisan list
    .
    .
    .
 sail
  sail:add             Add a service to an existing Sail installation
  sail:install         Install Laravel Sail's default Docker Compose file
  sail:publish         Publish the Laravel Sail Docker files
    .
    .
    .

php artisan sail:install を実行する

(devbox) $ php artisan sail:install --devcontainer

Laravel Sail のカスタマイズ

インストール直後の状態では HTTP サーバーが起動しないためカスタマイズを行う

docker-compose.yml

laravel.test の environment に SUPERVISOR_PHP_COMMAND を追加

--- a/docker-compose.yml  2025-01-02 17:27:54.006158767 +0900
+++ b/docker-compose.yml  2025-01-02 17:14:04.886161856 +0900
@@ -17,6 +17,7 @@
             XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
             XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
             IGNITION_LOCAL_SITES_PATH: '${PWD}'
+            SUPERVISOR_PHP_COMMAND: "/usr/bin/php -d variables_order=EGPCS -S 0.0.0.0:80 -t /var/www/html/public"
         volumes:
             - '.:/var/www/html'
         networks:

.env

WWWGROUP と WWWUSER を追加

WWWGROUP=1000
WWWUSER=1000

動作確認

下記コマンドで sail を立ち上げる

$ ./vendor/bin/sail up -d

http://localhost にアクセスして以下のレスポンスが返れば成功

Lumen (10.0.4) (Laravel Components ^10.0)

トラブルシューティング

artisan sail:publish が動作しない

artisan sail:publish は内部で artisan vendor:publish を呼び出しているため Lumen では動作しない
下記手順で artisna sail:publish と同じ結果が得られる

vendor/laravel/sail/ 以下の docker 関連ファイルを ./docker/ 以下へコピー

$ mkdir ./docker
$ cp -rf ./vendor/laravel/sail/runtimes/* ./docker/
$ cp -rf ./vendor/laravel/sail/database/* ./docker/

必要に応じて docker-compose.yml の context などのパス指定を変更する

--- a/docker-compose.yml  2025-01-02 18:36:41.176152586 +0900
+++ b/docker-compose.yml  2025-01-02 18:37:11.586153133 +0900
@@ -1,7 +1,7 @@
 services:
     laravel.test:
         build:
-            context: './vendor/laravel/sail/runtimes/8.4'
+            context: './docker/8.4'
             dockerfile: Dockerfile
             args:
                 WWWGROUP: '${WWWGROUP}'

参考サイト

readouble.com

www.jetify.com

www.php.net

stackoverflow.com

Docker で Amon2 の開発環境を構築 (2024年7月版)

Docker Perl Amon2

はじめに

以前 Docker で Amon2 の開発環境構築の記事を書きましたが、当時と比較して構成が変わってきたので改めて記事にまとめました

takaya030.hatenablog.com

検証環境

Windows11 Home Edition (version 23H2)

D:\>wsl --version
WSL バージョン: 2.2.4.0
カーネル バージョン: 5.15.153.1-2
WSLg バージョン: 1.0.61
MSRDC バージョン: 1.2.5326
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26091.1-240325-1447.ge-release
Windows バージョン: 10.0.22631.3880

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6

ディレクトリ構成

amon2
├── .dockerignore
├── Dockerfile
├── compose.build.yml
├── compose.yml
└── cpanfile

各種設定ファイル

amon2/.dockerignore

.git
Dockerfile
compose.yml
compose.build.yml
local

amon2/Dockerfile

マルチステージビルドでイメージを作成します
base では Carton のインストールとワークディレクトリの作成
devapp ではイメージへのモジュールのインストールとローカルで編集したソースのイメージへの書き込みを行っています

FROM perl:5.40 AS base

WORKDIR /tmp

# install Carton
RUN cpanm Carton

# create appuser
RUN useradd -d /home/appuser -m -s /bin/bash -u 1000 appuser
USER 1000
RUN mkdir /home/appuser/app
WORKDIR /home/appuser/app

FROM base AS devapp

USER 1000
COPY cpanfile cpanfile.snapshot /home/appuser/app/
RUN carton install
COPY . /home/appuser/app/
EXPOSE 3000

CMD ["carton","exec","--","plackup","-p","3000","-r","myapp/app.psgi"]

amon2/compose.build.yml

base ターゲットをビルドするための compose ファイル
これでビルドしたイメージを使って Amon2 をインストールします

services:
  base:
    build:
      context: .
      dockerfile: ./Dockerfile
      target: base
    image: "takaya030/amon2-base"
    volumes:
      - '.:/home/appuser/app'

amon2/compose.yml

devapp ターゲットのビルドと起動のための compose ファイル
Amon2 をインストールした後はこちらを使ってアプリケーションのイメージをビルドします

services:
  devapp:
    build:
      context: .
      dockerfile: ./Dockerfile
    image: "takaya030/amon2-devapp"
    volumes:
      - '.:/home/appuser/app'
    ports:
      - "3000:3000"
    command: ["carton","exec","--","plackup","-p","3000","-r","myapp/app.psgi"]

amon2/cpanfile

requires 'Plack', '1.0051';
requires 'Amon2', '6.16';
requires 'Amon2::Lite', '0.13';

base イメージのビルド

$ cd amon2
$ docker pull perl:5.40
$ docker compose -f compose.build.yml build base

Amon2 のインストール

base イメージを使ってインストールします

$ docker compose -f compose.build.yml run --rm base carton install

サンプルアプリケーションの作成

$ docker compose -f compose.build.yml run --rm base carton exec -- amon2-setup.pl --flavor=Lite myapp

devapp イメージのビルド

こちらがアプリケーションのイメージとなります

$ docker compose build devapp

動作確認

すべてのビルドが成功した場合は以下のような2個のイメージが作成されます

$ docker images
REPOSITORY                                                 TAG         IMAGE ID       CREATED         SIZE
takaya030/amon2-devapp                                     latest      1bc12fd5ab1c   3 hours ago     1.08GB
takaya030/amon2-base                                       latest      1108e2b78874   3 hours ago     1GB

以下のコマンドでアプリケーションのコンテナが起動します

$ docker compose up -d

web ブラウザで http://localhost:3000 にアクセスして以下の画面が表示されれば成功です

アプリケーションを停止するには下記のコマンドを入力します

$ docker compose down

参考サイト

takaya030.hatenablog.com

qiita.com

React で Hello World を表示

React

検証環境

Windows11 Home Edition (version 23H2)

D:\>wsl --version
WSL バージョン: 2.1.5.0
カーネル バージョン: 5.15.146.1-2
WSLg バージョン: 1.0.60
MSRDC バージョン: 1.2.5105
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6

React のインストール

下記サイトの手順でインストールします

takaya030.hatenablog.com

ソースコード

create-react-app で作成されたソースコードを変更します

react_example/react-app/src/App.tsx

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

react_example/react-app/src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

アプリケーションの起動

下記のコマンドを実行してコンテナを起動することで React アプリケーションが起動します

$ cd react_example
$ docker compose up -d

WEB ブラウザで http://localhost:3000 にアクセスすると Hello World が表示されます

CSS の追加

App.css を作成します

react_example/react-app/src/App.css

.App {
  text-align: center;
}

.title {
  color: red;
}

App.tsx を下記内容に変更します

react_example/react-app/src/App.tsx

import './App.css';

function App() {
  return (
    <div className="App">
      <h1 className="title">Hello World</h1>
    </div>
  );
}

export default App;

WEB ブラウザで http://localhost:3000 にアクセスすると以下の画像の通り CSS が適用された Hello World が表示されます

Docker による React 開発環境の構築

検証環境

Windows11 Home Edition (version 23H2)

D:\>wsl --version
WSL バージョン: 2.1.5.0
カーネル バージョン: 5.15.146.1-2
WSLg バージョン: 1.0.60
MSRDC バージョン: 1.2.5105
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296

# installed ubuntu version
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

# docker
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6

Dockerfile、docker-compose.yml の作成

WSL 上の Linux にログインして下記コマンドを実行

$ mkdir react_example
$ cd react_example
$ touch Dockerfile docker-compose.yml

各ファイルを下記内容に変更

Dockerfile

FROM node:18.20.0-alpine

WORKDIR /usr/src/app

docker-compose.yml

version: '3'

services:
  node:
    image: takaya030/node:18-alpine
    build: .
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd react-app && yarn start'
    ports:
      - '3000:3000'

React、TypeScript のインストール

下記コマンドを実行してインストールする

$ docker compose run --rm node sh -c 'npx create-react-app react-app --template typescript'

react-app フォルダが作成される

React アプリの起動

下記コマンドを実行してコンテナを起動

$ docker compose up -d

コンテナ起動後、WEB ブラウザで http://localhost:3000 にアクセスして以下の画面が表示されれば成功

参考サイト

qiita.com

ja.react.dev

WSL2 Ubuntu 22.04 に Docker をインストール

Linux Docker

検証環境

Windows11 Home Edition (version 22H2)

D:\>wsl --version
WSL バージョン: 1.2.5.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22621.1555

# installed ubuntu version
Ubuntu 22.04.2 LTS (Jammy Jellyfish)

古いバージョンのアンインストール

Docker がインストール済みの場合、古いバージョンをアンインストールする

$ sudo apt-get remove docker docker-engine docker.io containerd runc

リポジトリのセットアップ

$ sudo apt-get update -y

$ sudo apt-get install -y \
    ca-certificates \
    curl \
    gnupg

$ sudo install -m 0755 -d /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ sudo chmod a+r /etc/apt/keyrings/docker.gpg

$ echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Docker エンジンのインストール

$ sudo apt-get update -y

$ sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

ユーザーのグループ追加

sudo なしで docker コマンドが実行できるようにユーザーを docker グループへ追加する

$ sudo gpasswd -a <username> docker

ログアウト後、再ログインすると設定が反映される

config ファイルの作成

$ sudo mkdir -p /etc/systemd/system/docker.service.d
$ sudo touch /etc/systemd/system/docker.service.d/options.conf
$ sudo echo '[Service]' | sudo tee /etc/systemd/system/docker.service.d/options.conf
$ sudo echo 'ExecStart=' | sudo tee --append /etc/systemd/system/docker.service.d/options.conf
$ sudo echo 'ExecStart=/usr/bin/dockerd -H unix://' | sudo tee --append /etc/systemd/system/docker.service.d/options.conf

$ sudo touch /etc/docker/daemon.json
$ sudo echo '{"log-driver":"json-file","log-opts":{"max-size":"10m","max-file":"3"}}' | sudo tee /etc/docker/daemon.json
$ sudo chmod 600 /etc/docker/daemon.json

docker デーモンのリスタート

config ファイルを反映させるため docker デーモンをリスタートさせる

$ sudo systemctl daemon-reload
$ sudo systemctl restart docker

動作確認

$ docker -v
Docker version 23.0.4, build f480fb1

$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
2db29710123e: Pull complete
Digest: sha256:4e83453afed1b4fa1a3500525091dbfca6ce1e66903fd4c01ff015dbcb1ba33e
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

$ docker images
REPOSITORY    TAG       IMAGE ID       CREATED         SIZE
hello-world   latest    feb5d9fea6a5   19 months ago   13.3kB

参考サイト

docs.docker.com

takaya030.hatenablog.com

WSL2 Ubuntu 環境を D ドライブに移動

Linux

検証環境

Windows11 Home Edition (version 22H2)

D:\>wsl --version
WSL バージョン: 1.2.5.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22621.1555

インストール済みディストリビューションの確認

wsl -l -v で現在の状態を確認

D:\>wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-22.04    Stopped         2

Stopped になっていない場合 wsl --shutdown で停止する

イメージのエクスポート

D:\>mkdir wsl
D:\>cd wsl
D:\wsl>wsl --export Ubuntu-22.04 ubuntu_2204.tar

移動前環境の削除

D:\>wsl>wsl --unregister Ubuntu-22.04

イメージのインポート

先ほどエクスポートしたイメージをインポートする

D:\wsl>wsl --import Ubuntu-22.04 D:\wsl D:\wsl\ubuntu_2204.tar

正常にインポートできかた確認

D:\wsl>wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-22.04    Stopped         2

ログインユーザーの変更

インポート直後はログインユーザーが root になっているため変更する
PowerShell を起動して以下を入力 ( <username> は任意のユーザー名)

PS C:\> ubuntu2204 config --default-user <username>

動作確認

Ubuntu が起動してログイン可能か確認

D:\>wsl

参考サイト

zenn.dev

zenn.dev

Windows11 に WSL2 Ubuntu 環境構築

Linux

検証環境

Windows11 Home Edition (version 22H2)

WSL の有効化

PowerShell を管理者として実行
下記のコマンドを入力

PS C\> Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

処理終了後、Windows を再起動

仮想マシンプラットフォームの有効化

チェックを入れて OK を押した後、再起動する

インストール可能なディストリビューション確認

PS C:\> wsl --list --online
インストールできる有効なディストリビューションの一覧を次に示します。
'wsl --install -d <Distro>' を使用してインストールします。

NAME                                   FRIENDLY NAME
Ubuntu                                 Ubuntu
Debian                                 Debian GNU/Linux
kali-linux                             Kali Linux Rolling
Ubuntu-18.04                           Ubuntu 18.04 LTS
Ubuntu-20.04                           Ubuntu 20.04 LTS
Ubuntu-22.04                           Ubuntu 22.04 LTS
OracleLinux_8_5                        Oracle Linux 8.5
OracleLinux_7_9                        Oracle Linux 7.9
SUSE-Linux-Enterprise-Server-15-SP4    SUSE Linux Enterprise Server 15 SP4
openSUSE-Leap-15.4                     openSUSE Leap 15.4
openSUSE-Tumbleweed                    openSUSE Tumbleweed

Ubuntu のインストール

PowerShell を管理者として実行
下記コマンドを入力

PS C\> wsl --set-default-version 2

PS C\> wsl --install -d Ubuntu-22.04

インストール後、Ubuntu 起動時に下記エラーが発生した場合

WslRegisterDistribution failed with error: 0x800701bc

下記コマンドを入力することでエラーが解消する

PS C\> wsl --update

ログインユーザー登録

Ubuntu インストール後、初回起動時にログインユーザーを登録する

PS C:\> wsl --install -d Ubuntu-22.04
Ubuntu 22.04 LTS を起動しています...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: takaya030
New password:
Retype new password:
passwd: password updated successfully
この操作を正しく終了しました。

その後、下記メッセージが表示されればインストール成功

Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 22.04.2 LTS (GNU/Linux 5.15.90.1-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage


This message is shown once a day. To disable it please create the
/home/takaya030/.hushlogin file.

/etc/wsl.conf の変更

デフォルトでは Windows のパス設定が PATH に追加されるのでそれを無効化する

/etc/wsl.conf を下記内容に変更する

[boot]
systemd=true

[interop]
appendWindowsPath=false

Ubuntu をログアウト後、PowerShell で下記コマンドを実行して Ubuntu を再起動する

PS C\> wsl --shutdown
PS C\> wsl

参考サイト

memoryclip.uchiida.com

leokun0210.hatenablog.com