Dockerを使用してLaravelおよびVueプロジェクトの開発環境を構築する詳細な説明

この記事では、Docker で構築された Laravel および Vue プロジェクトの開発環境を紹介し、皆さんと共有します。詳細は次のとおりです。

この記事では、Docker を使用して、ローカル コンピューターにインストールされている開発スイートに依存しない、高速で軽量で再現性のある Laravel および Vue プロジェクト開発環境を個人のローカル コンピューター上に構築します (開発環境のすべての依存関係は Docker ビルド コンテナーにインストールされます)。Vue が追加されているのは、一部のプロジェクトでは Laravel プロジェクトで Vue を使用してフロントエンドとバックエンドを分離して開発するためです。開発環境では、フロントエンド開発に必要なツール セットをインストールする必要があります。もちろん、フロントエンドとバックエンドを 2 つのプロジェクトに分けて開発することもできます。このトピックはこの記事の範囲外です。

私たちの目標は次のとおりです。

• Mamp/Wampのようなソフトウェアをローカルにインストールしないでください
• Vagrantのような仮想マシンは使用しないでください
• PHP開発に必要なツールセットをローカルコンピュータにグローバルにインストールしないでください。
• フロントエンド開発に必要なツールセットをローカルコンピュータにグローバルにインストールしないでください。
• ローカルコンピュータにMysqlとNginxをグローバルにインストールしないでください

始める前に、Docker クライアントをインストールする必要があります。Docker の公式 Web サイトに詳細なインストール手順が記載されています。

ステップ1: Laravelソースパッケージを取得する

Composer がコンピューターにインストールされていないため、Composer を使用して Laravel プロジェクトを作成することはできません。ここでは cURL を使用して、最新の Laravel ソース コード パッケージを GitHub から直接ダウンロードします。wget または git clone を使用してソース コード パッケージを取得することもできます。

curl -L -O https://github.com/laravel/laravel/archive/v5.5.0.tar.gz /
&& tar -zxvf v5.5.0.tar.gz /
&& rm v5.5.0.tar.gz

上記のコマンドは、curl がソース コード パッケージをダウンロードした後に解凍します。解凍後、ソース コード パッケージv5.5.0.tar.gzを削除します。実行後、laravel-5.5.0 プロジェクト ディレクトリが表示されます。

ステップ2: docker-compose.ymlを追加する

プロジェクトにdocker-compose.ymlファイルを作成します。

Composeプロジェクトは、Docker コンテナ クラスターの迅速なオーケストレーションを実現することを目的とした、Docker の公式オープン ソース プロジェクトです。 Dockerfileテンプレート ファイルを使用すると、ユーザーは個別のアプリケーション コンテナーを簡単に定義できることがわかっています。ここでは、4 つのコンテナーを使用して、 PHP 、 Mysql、 Nginx放在四個不同的容器中，通過4 つのアプリケーション コンテナーを関連付けてプロジェクトを形成します。

レイアウト ファイルの冒頭は次のようになります。

バージョン: '2'
サービス:
  # 私たちのサービスはここにあります

オーケストレーション ファイルでは、各コンテナーはサービスと呼ばれ、アプリケーション全体で使用されるすべてのサービス (つまりコンテナー) はサービスの下に定義されます。

アプリサービス

APP サービスのコンテナーはプロジェクト内のコードを実行します。

アプリ：
 建てる：
  コンテクスト： 。/
  dockerfile: app.dockerfile
 作業ディレクトリ: /var/www
 ボリューム:
  - ./:/var/www
 環境：
  - 「DB_PORT=3306」
  - 「DB_HOST=データベース」

注:

• アプリ コンテナを構築するには、イメージ ファイルapp.dockerfileを使用します。イメージ ファイルでは、プロジェクトで使用される PHP モジュール イメージを構成し、フロントエンド コードをビルドするための NPM もインストールします。
• working_dir: /var/www作業ディレクトリを/var/wwwに設定します。コンテナ内では、プロジェクト コードは/var/wwwディレクトリに配置されます。これには、 docker exec app現在の作業ディレクトリとして/var/wwwを使用します。
• volumes 、コンテナ内のデータ ボリュームをマウントするためのパス設定です。ここでは、データ ボリュームを 1 つだけ定義し、ホスト プロジェクト ディレクトリをコンテナ内の/var/wwwにマウントします。このようにして、ローカル コンピュータ上のプロジェクト コードに加えた変更は、すぐにコンテナに同期され、その逆も同様です。コンテナ内のコードに加えた変更も、ローカル コンピュータ上のプロジェクトにすぐにフィードバックされます。
• environment はenvironment変数名を設定します。ここではDB_PORTとDB_HOSTを設定して、プロジェクト内の.envファイルでこれら 2 つの項目の値を変更しなくて済むようにしています。もちろん、開発環境で別途設定する必要がある環境変数はここに記述できます。Laravel が設定の読み取りに使用するDotEnvは、システムに指定された環境変数設定があるかどうかを検出します。ある場合は、 .envファイルを読み取りません。

ここで、上記のビルド手順で説明したapp.dockerfileファイルを作成する必要があります。具体的な内容は次のとおりです。

php:7.1.22-fpm より

# パッケージの更新
apt-get updateを実行する

# PHPとcomposerの依存関係をインストールする
apt-get install -qq git curl libmcrypt-dev libjpeg-dev libpng-dev libfreetype6-dev libbz2-dev を実行します。

# 取得したパッケージファイルのローカルリポジトリをクリアする
# apt-get clean を実行する

# 必要な拡張機能をインストールする
# ここで、テストおよび展開プロセス中に必要なその他の拡張機能をインストールできます
apt-get clean; docker-php-ext-install pdo pdo_mysql mcrypt zip gd pcntl opcache bcmath を実行します。


# PHP 依存関係を簡単に管理できるように Composer をインストールします。
curl --silent --show-error https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer を実行します。

# ノードをインストールする
apt-get update を実行 &&\
  apt-get install -y --no-install-recommends gnupg &&\
  curl -sL https://deb.nodesource.com/setup_10.x | bash - &&\
  apt-get アップデート &&\
  apt-get install -y --no-install-recommends nodejs &&\
  npm config レジストリを設定します https://registry.npm.taobao.org --global &&\
  npm インストール --global gulp-cli

コマンドphp-fpm

注:

まず、開発中に必要になることが多い NPM と Composer をアプリ コンテナーにインストールしました。本番環境にリリースする場合は、アプリケーションを実行するコンテナーにプロジェクト コードを配置するのではなく、別の Composer を使用してプロジェクト コードをビルドするのが一般的です。コンテナーの中心的なアイデアの 1 つは、コンテナーを単一に保つことです。これにより、同じ役割を持つコンテナーをすばやく追加できます。

ウェブサービス

次に、Web サーバーを構成する必要があります。オーケストレーション ファイルでこのコンテナーにweb名前を付けます。

ウェブ：
 建てる：
  コンテクスト： 。/
  dockerfile: web.dockerfile
 作業ディレクトリ: /var/www
 ボリューム数:
  - アプリ
 ポート:
  -8080:80

注:

• volumes_from 、 appサービスで定義されたデータボリュームパスを再利用するために使用されます。
• portsを使用して、ローカル コンピューターのポート 8080 を Web コンテナーのポート 80 にマップします。この方法では、開発環境でホスト ファイルを設定する必要がなく、IP とポートを介して直接サービスにアクセスできます。

Web サーバーは nginx を使用するため、このコンテナーを構築するには nginx イメージ ファイルを使用する必要があります。その前に、nginx イメージに基づいてプロジェクトで使用するvhostを設定する必要があるため、次のように定義されるweb.dockerfileファイルが必要です。

nginx:1.10から

vhost.conf に /etc/nginx/conf.d/default.conf を追加します。

イメージファイルの定義に従って、プロジェクト内のvhost.confコンテナの/etc/nginx/conf.d/default.confにコピーし、基本的な nginx 構成を構成しましたvhost.conf内の定義は次のとおりです。

サーバー{
  聞く 80;
  インデックス index.php index.html;
  ルート /var/www/public;

  位置 / {
    try_files $uri /index.php?$args;
  }

  場所 ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_passアプリ:9000;
    fastcgi_index インデックス.php;
    fastcgi_params を含めます。
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}

注:

• 開発環境のため、最もシンプルな構成のみ実行し、チューニングは考慮しません。
• fastcgi_pass app:9000; nginx は fastcgi を介して PHP のリクエストをappサービスのポート 9000 に渡します。Docker docker-composeサービスで定義されたコンテナー サービスに自動的に接続し、各サービスはサービス名で参照されます。

MySQL サービス

次に、Mysql サービスを設定します。上記の 2 つのサービスと少し異なるのは、PHP-FPM および Nginx コンテナーでは、コンテナー アクセスのためにローカル コンピューター上のファイルをコンテナーに同期するように設定することです。これにより、開発中にファイルに変更を加えたときにコンテナー内ですぐにフィードバックが得られるため、開発プロセスがスピードアップします。ただし、データベース コンテナーでは、コンテナー内に作成されたファイルを永続化できることを期待しています (既定のコンテナーが破棄されると、コンテナー内に作成されたファイルも破棄されます)。Docker のデータ ボリュームを通じて上記の機能を実現できますが、今度はローカル コンピューター上のファイルをデータ ボリュームにマウントする必要がなくなりました。Docker クライアントは、作成されたデータ ボリュームのローカル コンピューター上の特定の保存場所を管理します。

以下はオーケストレーションファイル内のデータベースサービスの設定です。

バージョン: '2'
サービス:

 データベース:
  イメージ:mysql:5.7
  ボリューム:
   -dbdata:/var/lib/mysql
  環境：
   - "MYSQL_DATABASE=ホームステッド"
   - "MYSQL_USER=homestead"
   - "MYSQL_PASSWORD=シークレット"
   - "MYSQL_ROOT_PASSWORD=シークレット"
  ポート:
    - 「33061:3306」

ボリューム:
 dbデータ:

注:

• ファイルの下部では、 volumesコマンドを使用してdbdataという名前のデータ ボリュームを作成しました (dbdata の後のコロンは意図的です。これは YML ファイルの構文制限であり、心配する必要はありません)。
• データ ボリュームを定義した後、上記の<name>:<dir>の形式を使用して、コンテナ内の/var/lib/mysqlディレクトリにdbdataデータ ボリュームをマウントするように Docker に通知します。
• MySQL Docker イメージに必要な 4 つのパラメータは、 environmentsで設定されます。
• portsマッピングでは、ローカル コンピューターのポート 33061 をコンテナーのポート 3306 にマッピングして、コンピューター上のデータベース ツールを介して docker 内の Mysql に接続できるようにします。

すべてのサービスを統合する

以下は完全なdocker-compose.ymlファイルです。オーケストレーション ファイルを通じて、3 つのアプリケーション コンテナーを関連付けて、プロジェクトのサーバーを形成します。

バージョン: '2'
サービス:

 # アプリケーション
 アプリ：
  建てる：
   コンテクスト： 。/
   dockerfile: app.dockerfile
  作業ディレクトリ: /var/www
  ボリューム:
   - ./:/var/www
  環境：
   - 「DB_PORT=3306」
   - 「DB_HOST=データベース」

 # Webサーバー
 ウェブ：
  建てる：
   コンテクスト： 。/
   dockerfile: web.dockerfile
  作業ディレクトリ: /var/www
  ボリューム数:
   - アプリ
  ポート:
   -8080:80

 # データベース
 データベース:
  イメージ:mysql:5.6
  ボリューム:
   -dbdata:/var/lib/mysql
  環境：
   - "MYSQL_DATABASE=ホームステッド"
   - "MYSQL_USER=homestead"
   - "MYSQL_PASSWORD=シークレット"
   - "MYSQL_ROOT_PASSWORD=シークレット"
  ポート:
    - 「33061:3306」

ボリューム:
 dbデータ:

サービスを開始する

上記の手順に従ってオーケストレーション ファイルと指定した Docker イメージ ファイルを設定したら、次のコマンドでサービスを開始できます。実行すると、上記のファイルに定義されている 3 つのサービスが開始されます。

docker-compose を起動 -d

初めて起動する場合、Docker クライアントは上記の 3 つのイメージをダウンロードしてサービスをビルドする必要があるため、起動が遅くなります。イメージのダウンロードとビルドが完了すると、以降の起動は非常に高速になります。

Laravelプロジェクトの初期化

サービスを開始したら、Laravel プロジェクトを初期化できます。手順は公式ドキュメントに記載されているものと同じですが、開始したアプリ サービスのコンテナーで実行する必要があります。

docker-compose exec アプリ composer インストール
docker-compose exec app npm install // フロントエンドプロジェクトが含まれている場合は、関連するコマンドを実行します docker-compose exec app cp .env.example .env
docker-compose exec app php artisan キー:生成
docker-compose exec アプリ php artisan 最適化
docker-compose exec app php artisan migrate --seed
docker-compose exec app php artisan make:controller MyController

注:

• docker-compose execは指定されたコンテナにコマンドを送信して実行します。
• appはdocker-compose.ymlで定義されたサービスであり、php-fpmを実行するコンテナです。
• php artisan migrateはコンテナ内で実行されるコマンドです

nginx ログを表示する方法:

• docker ps nginxサービスのコンテナIDを見つける
• docker exec -it <コンテナID> /bin/bash を実行してnginxコンテナに入ります
• nginx ログの具体的なパスについては、プロジェクト内の vhost.conf を確認してください。

上記のコマンドを実行すると、 http://127.0.0.1:8080/経由でプロジェクトにアクセスできるようになります。

参考のために、私の Github gist に参照ファイルのセットがあります https://gist.github.com/kevinyan815/fa0760902d29f19a4213b4a16fe0501b

gist 内のファイルは少し古いです。その後、使用中にいくつかの新しい PHP モジュールと Node が追加されました。以前は Composer も別のコンテナーに配置されていました。しかし、これを読んだ後は、必要に応じてこれらのファイルを変更できるほど賢明であると信じています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。