Skip to content

Install Docker

Jump to bottom Edit New page
Mitsuru Mutaguchi edited this page May 2, 2025 · 51 revisions

概要

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. 「Remote - WSL」 をインストールする
  2. VSCの左下「><」をクリック、「New WSL Window」を選択し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 pull php:7-apache
docker-compose up -d

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

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

セットアップのシェルを用意しています。コンテナに入り、シェルを実行します。

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

# appコンテナ内
bash /var/www/html/connect-cms/docker/app/setup.sh
#########################
### ※ windows以外は上記setup.sh内の下記部分でエラーが出ます。都度変更してください。
### # WSLから編集可能にする
### chown 1000:1000 .env
#########################

### ※ 開発環境の場合、下記コマンドも追加実行
cd /var/www/html/connect-cms/
COMPOSER=composer-dev.json composer install

動作確認

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

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

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

  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 app 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が切り替わりました。

DuskテストをDockerで行う場合

下記作業が必要です。

  1. Duskの準備
  2. docker-compose.yml の修正、ビルド
  3. .env と .env.dusk.local の修正
  4. tests/DuskTestCase.php の修正
  5. Dusk実行

Duskの準備

Duskの準備 を参照して準備を行う。
マイグレーション等の実行は、コンテナ内から行う。

※ 参考：(コンテナ外から) appコンテナに入る

docker exec -it app bash

※ 参考：(コンテナ内) マイグレーション等を実行する例

### (connect-cmsディレクトリに移動すると)
cd /var/www/html/connect-cms

### (php artisanコマンドを実行できる)
php artisan migrate --env=dusk.local

docker-compose.yml の修正、ビルド

docker-compose.yml 修正内容 
services:
    app:
        container_name: app
        build: ./docker/app
        volumes:
            - .:/var/www/html/connect-cms
        ports:
            - 80:80
        environment:
            # DB_USERNAME: JohnDoe   # ←コメントアウト。Dusk実行＞.env自動切り替わり時の値を反映させるため
            # DB_PASSWORD: foobar    # ←コメントアウト。同上
            # DB_DATABASE: connect   # ←コメントアウト。同上
            TZ: 'Asia/Tokyo'
#
# (省略)
#
# （↓最下部に追記）
    selenium:
        container_name: selenium
        image: selenium/standalone-chrome-debug
        ports:
          - 4444:4444
        depends_on:
          - app
        privileged: true

コンテナのビルド

コンテナ外で操作

### ビルド
docker-compose build

### 起動
docker-compose up -d

.env と .env.dusk.local の修正

.env 修正内容 
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
# DB_DATABASE=$DB_DATABASE     # ←コメントアウト
# DB_USERNAME=$DB_USERNAME     # ←コメントアウト
# DB_PASSWORD=$DB_PASSWORD     # ←コメントアウト
DB_DATABASE=connect            # ←追記
DB_USERNAME=JohnDoe            # ←追記
DB_PASSWORD=foobar             # ←追記
.env.dusk.local 修正内容 
# APP_URL=http://localhost     # ←コメントアウト
APP_URL=http://app             # ←追記 (appはコンテナ内から見えるコンテナ名)
#
# (省略)
#
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
# DB_DATABASE=$DB_DATABASE     # ←コメントアウト
# DB_USERNAME=$DB_USERNAME     # ←コメントアウト
# DB_PASSWORD=$DB_PASSWORD     # ←コメントアウト
DB_DATABASE=test               # ←追記（任意のテストDB名）
DB_USERNAME=root               # ←追記
DB_PASSWORD=hogehoge           # ←追記

tests/DuskTestCase.php の修正

tests/DuskTestCase.php 修正内容 
    protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
            '--window-size=1920,1080',
        ]);

        return RemoteWebDriver::create(
            // $_ENV['DUSK_DRIVER_URL'] ?? 'http://localhost:9515',  // ← コメントアウト
            'http://selenium:4444/wd/hub',                           // ← 追記
            DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }

Dusk実行

(コンテナ外から) appコンテナに入る

docker exec -it app bash

(コンテナ内) Dusk実行

cd /var/www/html/connect-cms

### Linux+Dockerの場合
APP_ENV=local php artisan dusk tests/Browser/Manage/IndexManageTest.php

参考リンク

DB情報

参考

参考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 | マニュアル | マーケット | フォーラム

Clone this wiki locally