Install Docker - opensource-workshop/connect-cms GitHub Wiki

概要

Windows10・11で開発環境をDockerで構築する手順です。

セットアップ

WSL2にディストリビューションをインストールする

コマンドプロンプト、もしくはPowerShellを管理者権限で起動し、インストールしてください。

wsl --install -d {distribution}

任意のユーザー、パスワードを入力すれば完了です。

参考：以下のコマンドでインストール可能なディストリビューションを確認できます。

wsl -l -o

Docker Desktopをインストールする

Docker公式サイトからダウンロード、インストールをしてください。
Docker Desktop for Mac and Windows | Docker

Connect-CMSをダウンロードする

WSLのターミナルにて、Connect-CMSをgit cloneして、ソースコードをダウンロードします。

VS CodeでWSLのターミナルを開く

以下の手順でターミナルを開きます。

  1. VS Codeの拡張機能で「WSL」 をインストールする
  2. VS Codeの左下「><」をクリック、「WSL への接続」を選択しWSLに入る
  3. ターミナル(T) -> 新しいターミナル でWSLのターミナルを開く

git clone

Connec-CMSのソースコードをダウンロードします。

mkdir src # お好きなディレクトリにgit clone してください。
cd src
git clone https://github.com/opensource-workshop/connect-cms.git
cd connect-cms

※ 「注意」connect-cmsをwindows側のフォルダに配置して、シンボリックリンクで共有はしない方がよいです。DockerはLinuxのため、windowsとのファイルのやり取りは都度変換が走って遅いです。また db のファイル永続化がうまくいかず、db コンテナが再起動を繰り返す挙動になりました。

DockerでConnect-CMSを立ち上げる

Docker Composeを利用して、WEB、DB、メールサーバーを立ち上げます。

docker compose build
docker compose up -d

※ docker-composeが無い場合（The command 'docker-compose' could not be foundエラー）、Docker Desktopを起動すれば使えるようになります。

Connect-CMSをセットアップする

Docker webapp コンテナのセットアップオプション

docker/webapp/setup.sh は Web アプリケーションコンテナの初期化時に実行され、依存パッケージのインストールや Laravel の初期設定を自動化します。
以下の環境変数を設定することで挙動をカスタマイズできます。

変数 役割 デフォルト
SETUP_COMPOSER_FILE 利用する composer ファイルを明示的に指定します。 未指定の場合、PHP_INI_ENV または APP_ENV が development / local のとき composer-dev.json、それ以外は composer.json を使用
SETUP_FORCE_UPDATE_ENV 既存の .env に対してもコンテナ用の値を上書きします。 未指定
SETUP_RESET_DB / SETUP_MIGRATE_FRESH いずれかが 1 / true / yes の場合、php artisan migrate:fresh --seed --force を実行してデータベースを初期化します。 未指定（安全な migrate + db:seed のみ）
SETUP_SKIP_SEED db:seed の実行をスキップします。 未指定（db:seed --force を実行）

典型的な使い方

初回セットアップ（安全な更新）

docker compose run --rm webapp bash docker/webapp/setup.sh

データベースには php artisan migrate --force および php artisan db:seed --force が実行されます。既存データは削除されません。

データベースを完全に初期化したい場合

SETUP_RESET_DB=1 docker compose run --rm webapp bash docker/webapp/setup.sh

または互換性のために SETUP_MIGRATE_FRESH=1 を利用できます。
この場合は 既存テーブルがすべて削除されます。

シードを抑止してマイグレーションだけ行う場合

SETUP_SKIP_SEED=1 docker compose run --rm webapp bash docker/webapp/setup.sh

これらのオプションを組み合わせることで、環境や目的に応じた初期化フローを柔軟に構成できます。

動作確認

ブラウザからlocalhostを確認してください。 Connect-CMSの画面が確認出来れば完了です。

ソースコードを修正したい場合は、このままVSCのリモートウィンドウで進めると便利です。
もちろん、githubへpushできます。

Docker で Laravel Dusk を利用する方法

Docker で Laravel Dusk を利用する方法

参考：１度作った環境で開発を再開する

  1. Docker Desktopを起動
  2. VS CodeでWSLのターミナルを開く
    1. VS Code起動
    2. 「Remote Explore」＞（Remote Explore上部）のセレクトボックス「WSL Tergets」選択
    3. Connect環境を選んで開くとVS Code「WSLのConnect環境」が開く
      1. その環境で Ctrl＋@ でWSLのターミナル起動
  3. WSLのターミナルで操作
    1. DockerでConnect-CMSを立ち上げる
      • docker compose up -d
    2. コンテナに入る
      • docker exec -it webapp bash
  4. localhostでConnect-CMSが見れる

他、やっておいたほうがよいこと

git設定 (WSL)

# github の ユーザー名、メールアドレスを設定
# これをやらないと、githubでcommit log がgithubのアカウントと紐づかないです
git config --global user.name {username}
git config --global user.email "{mail address}"
# 改行コードの自動変換 OFF
git config --global core.autocrlf false

Dockerがメモリを食いすぎてPCが重い場合

メモリが16GBあれば問題なさそうですが、8GBだと激重になることがあります。
そういうときは、WSLが使えるメモリを制限することで解消します。

Qiita 結論: 暫定対処でメモリサイズを固定する

Windowsにある.wslconfigを修正します。
メモリ8GBのPCでは、2GBでちょうどよかったです。

%USERPROFILE%.wslconfig

[wsl2]
memory=2GB
swap=0

phpのバージョンを切り替える場合

Connect-CMSのDockerfile修正

Connect-CMS/docker/app/Dockerfile

#FROM php:7-apache
FROM php:8.1-apache

コンテナ再作成

# appコンテナからログアウト後

docker pull php:8.1-apache
docker compose build
docker compose up -d

app コンテナに入ってphpのバージョン確認

# appコンテナにログイン
docker exec -it app bash

# appコンテナ内
php -v

PHP 8.1.10 (cli) (built: Sep  1 2022 21:16:25) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.10, Copyright (c) Zend Technologies

# 初期セットアップ
bash /var/www/html/connect-cms/docker/app/setup.sh

これでphpが切り替わりました。

参考

参考URL

参考：docker-composeコマンド

// 起動
docker-compose up -d

// 起動状態 確認
docker-compose ps

// コンテナID 確認
docker ps

// 停止
docker-compose stop

// コンテナ削除
docker-compose rm

// イメージも合わせて削除
docker-compose down --rmi all

参考：apache,php等のログ確認

方法１：docker-composeコマンドで確認

docker-compose logs -f app

方法２：Docker Desktopで確認

  • (左側) Containers＞app （行）縦･･･押下＞View details押下

エラー対応

エラー対応：WSLでファイル修正したらpermission denied

git pull等でファイルの書きこみpermission が無くなった場合、書きこみができずにエラーになります。
その場合はコンテナ内で下記コマンド例を参考に、パーミッション変更やファイルオーナーを修正するとエラーが解消します。

chmod o+w -R /var/www/html/connect-cms/

画像：permission deniedエラー

permission denied

エラー対応：docker-compose up -d で ERROR [app internal] load metadata for docker.io/library/php:7-apache

対応

docker composeする前に、先に各イメージをpullしておく

docker pull php:7-apache

エラーログ

akagane99@vaiof14:~/connect-cms-docker$ docker-compose up -d
[+] Building 10.7s (2/2) FINISHED                                                                                                                                                              docker:default
 => [app internal] load build definition from Dockerfile                                                                                                                                                 0.0s
 => => transferring dockerfile: 1.48kB                                                                                                                                                                   0.0s
 => ERROR [app internal] load metadata for docker.io/library/php:7-apache                                                                                                                               10.7s
------
 > [app internal] load metadata for docker.io/library/php:7-apache:
------
failed to solve: php:7-apache: failed to authorize: failed to fetch anonymous token: Get "https://auth.docker.io/token?scope=repository%3Alibrary%2Fphp%3Apull&service=registry.docker.io": dial tcp: lookup auth.docker.io on 172.19.64.1:53: read udp 172.19.73.60:52132->172.19.64.1:53: i/o timeout

情報源

エラー対応：DB dumpをインポート時にCannot add foreign key constraintエラー

  • 初期セットアップで、DBテーブルを作成後、他環境のDB dumpファイルをインポート時に発生

原因

  • 初期セットアップの空テーブルの外部キー制約にひっかかり、DBインポート時に外部キー制約が発生していた

対応

  • (方法1) 一旦DBテーブルを全削除後、再度インポートで解消
  • (方法2) インポート時にforeign key制約を外すオプションがあれば、それを指定する。

エラー対応：Dockerのdb起動時に Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3306

  • エラー内容
    • Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3306 -> 0.0.0.0:0: listen tcp 0.0.0.0:3306: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.

原因

  • 3306 ポートが既に別サービスで使われている。

対応

  • ポートを使っている別サービスを止めて、Dockerのdbを再度起動する。

エラー対応：buildのときに apt-get でエラーになる

原因

PC と WSL で時刻がずれている

対応

WSL でコマンドを実行して時刻を合わせる

sudo hwclock --hctosys`

エラー対応：Allowed memory size of xxx bytes exhausted (tried to allocate xxx bytes)エラー

対応

  • コンテナ内でphp.iniの以下を変更
vi /usr/local/etc/php/php.ini

memory_limit = 512M
  • コンテナ再起動

エラー対応：npm run prod実行時のPermission denied対応

対応

npm コマンドの有効化

Connect-CMS/docker/app/Dockerfile

RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
vim \    # ←末尾\追加
nodejs \ # ←追記
npm      # ←追記

# （以下追記）
# npm アップデート
RUN npm install -g n && n stable
RUN npm install -g npm@latest

# npm run prod Permission denied対策
RUN npm config set cache /tmp --global

コンテナ再作成

# appコンテナからログアウト後

docker-compose down
docker-compose build
docker-compose up -d

# appコンテナにログイン
docker exec -it app bash

コンテナ内でコマンド実行

# （※ 既にあれば一度 node_modules をフォルダごと削除）
cd /var/www/html/connect-cms/
rm -rd ./node_modules

# 依存パッケージを再インストール 
npm install

npm run prod

エラー1 [Error: EACCES: permission denied, scandir '/root/.npm/_logs']

root@2fa0658c3496:/var/www/html/connect-cms# npm run prod

> prod
> npm run production

glob error [Error: EACCES: permission denied, scandir '/root/.npm/_logs'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'scandir',
  path: '/root/.npm/_logs'
}

> production
> mix --production

sh: 1: mix: Permission denied
npm ERR! code 126
npm ERR! path /var/www/html/connect-cms
npm ERR! command failed
npm ERR! command sh -c mix --production
npm ERR! code 126
npm ERR! path /var/www/html/connect-cms
npm ERR! command failed
npm ERR! command sh -c npm run production

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2025-02-19T06_37_11_680Z-debug.log

エラー2 sh: 1: mix: Permission denied

root@2fa0658c3496:/var/www/html/connect-cms# npm run prod

> prod
> npm run production


> production
> mix --production

sh: 1: mix: Permission denied
npm ERR! code 126
npm ERR! path /var/www/html/connect-cms
npm ERR! command failed
npm ERR! command sh -c mix --production

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/_logs/2025-02-19T06_43_25_281Z-debug.log
npm ERR! code 126
npm ERR! path /var/www/html/connect-cms
npm ERR! command failed
npm ERR! command sh -c npm run production

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/_logs/2025-02-19T06_43_25_299Z-debug.log

情報源

エラー対応：画像アップロードで500エラー対応（Reading Exif data is not supported by this PHP installation.）

対応

phpのexif有効化

Connect-CMS/docker/app/Dockerfile

RUN apt-get update \
（略）
    && docker-php-ext-install -j$(nproc) gd pcntl exif      # ←末尾exif追加

コンテナ再作成

# appコンテナからログアウト後

docker-compose down
docker-compose build
docker-compose up -d

# appコンテナにログイン
docker exec -it app bash

エラー詳細

[2025-05-02 09:23:38] production.ERROR: Reading Exif data is not supported by this PHP installation. {"userId":1,"exception":"[object] (Intervention\\Image\\Exception\\NotSupportedException(code: 0): Reading Exif data is not supported by this PHP installation. at /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/Commands/ExifCommand.php:22)
[stacktrace]
#0 /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/AbstractDriver.php(94): Intervention\\Image\\Commands\\ExifCommand->execute(Object(Intervention\\Image\\Image))
#1 /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/Image.php(108): Intervention\\Image\\AbstractDriver->executeCommand(Object(Intervention\\Image\\Image), 'exif', Array)
#2 /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/Commands/OrientateCommand.php(15): Intervention\\Image\\Image->__call('exif', Array)
#3 /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/AbstractDriver.php(94): Intervention\\Image\\Commands\\OrientateCommand->execute(Object(Intervention\\Image\\Image))
#4 /var/www/html/connect-cms/vendor/intervention/image/src/Intervention/Image/Image.php(108): Intervention\\Image\\AbstractDriver->executeCommand(Object(Intervention\\Image\\Image), 'orientate', Array)
#5 /var/www/html/connect-cms/app/Http/Controllers/Core/UploadController.php(795): Intervention\\Image\\Image->__call('orientate', Array)
#6 /var/www/html/connect-cms/app/Http/Controllers/Core/UploadController.php(613): App\\Http\\Controllers\\Core\\UploadController->postFile(Object(Illuminate\\Http\\Request))
(略)

情報源

公式サイト | 機能一覧・仕様 | FAQ | マニュアル | マーケット | フォーラム

⚠️ **GitHub.com Fallback** ⚠️