Docker+VSCodeによる開発環境の構築（Laravel+Nuxt編）

2020年6月6日 00:02

LaravelとNuxtを使って開発を行うときの環境の構築方法を記述していきたいと思います。

DockerとVSCodeを使ってステップでのデバッグを実行できるようにするのが目標です。 Docker DesktopとVisual Studio Codeは既にインストール済みの前提で記述していきます。

環境構築

開発環境として下記のものをDockerコンテナ上に構築します。

・CentOS: 7.8
・Node.js: 14.4.0
・PHP: 7.4.6
・Laravel: 7.14.1
・Nuxt: 2.12.2

VSCodeに入れる拡張機能（プラグイン）は以下のものを入れます。

・PHP Debug
・Vetur

Docker開発環境のディレクトリ・ファイル構成は以下の形になります。

laranuxt_dev
  │
  ├ dev
  │  │
  │  ├ src
  │  │  │
  │  │  └ laranuxt	    ※ <-- Laravelプロジェクト
  │  │      └ .vscode	※ <-- VSCode設定ファイル
  │  │           │
  │  │           └ launch.json
  │  │  
  │  ├ Dockerfile
  │  ├ httpd.conf
  │  ├ php.ini
  │  ├ ssl.conf
  │  └ ssh.sh
  │
  └ docker-compose.yml

まず以下のDockerfileを作成します。

[laranuxt_dev/dev/Dockerfile]
	
 Dockerfile


	FROM centos:7

	RUN yum -y update && yum clean all && \
	    yum -y install \
	    wget \
	    git \
	    gcc \
	    tar \
	    gzip \
	    bzip2 \
	    make \
	    procps \
	    systemd-sysv \
	    iputils \
	    net-tools \
	    cronie \
	    which \
	    vim

	# Apache
	RUN yum install -y \
	    httpd \
	    httpd-devel \
	    httpd-tools \
	    mod_ssl

	# apache conf
	ADD ./httpd.conf /etc/httpd/conf/httpd.conf
	ADD ./ssl.conf /etc/httpd/conf.d/ssl.conf

	# SSL
	RUN yum install -y openssl
	RUN yum install -y epel-release
	RUN yum install -y nkf --enablerepo=epel
	ADD ssl.sh /opt/ssl.sh
	RUN chmod a+x /opt/ssl.sh
	RUN nkf -Lu --overwrite /opt/ssl.sh
	RUN /bin/bash -c "source /opt/ssl.sh /etc/httpd/conf/ssl_keys localhost"

	# php.ini
	ADD php.ini /etc/php.ini
	# Install PHP 7.4
	RUN yum install -y gcc-c++
	RUN yum install -y php-devel php-mbstring php-mysqli php-opcache php-xml php-mcrypt php-zip php-xmlrpc php-gd php-curl php-gmp php-openssl php-pear
	RUN yum install -y libxml2-devel libcurl-devel openssl-devel libpng-devel  freetype-devel libmcrypt-devel libicu-devel libxslt-devel sqlite-devel
	RUN yum install -y https://rpms.remirepo.net/enterprise/remi-release-7.rpm
	RUN yum install -y --enablerepo=remi oniguruma oniguruma-devel
	ENV PHP_VERSION 7.4.6
	WORKDIR /usr/src
	RUN wget -O php-${PHP_VERSION}.bz2 http://jp2.php.net/get/php-${PHP_VERSION}.tar.bz2/from/this/mirror && \
	    tar jvxf php-${PHP_VERSION}.bz2 && \
	    rm php-${PHP_VERSION}.bz2
	RUN cd php-${PHP_VERSION} && \
	    ./configure \
	    --with-mysqli \
	    --with-pdo-mysql \
	    --with-mysqli \
	    --with-mysql-sock=/tmp/mysql.sock \
	    --with-openssl \
	    --with-zlib \
	    --with-curl \
	    --with-mhash \
	    --with-xsl \
	    --with-pear \
	    --with-gettext \
	    --with-expat \
	    --with-freetype \
	    --without-unixODBC \
	    --enable-mbstring \
	    --enable-mbregex \
	    --enable-pcntl \
	    --enable-fpm \
	    --enable-exif \
	    --enable-ftp \
	    --enable-gd \
	    --enable-gd-jis-conv \
	    --enable-bcmath \
	    --enable-sockets \
	    --enable-opcache \
	    --enable-exif \
	    --enable-calendar \
	    --enable-inline-optimization \
	    --disable-posix \
	    --disable-sysvmsg \
	    --disable-sysvshm \
	    --disable-sysvsem \
	    --disable-debug \
	    --enable-intl \
	    --with-config-file-path=/etc \
	    --with-apxs2=/usr/bin/apxs && \
	    make && \
	    make install

	# Xdebug
	RUN pecl install xdebug

	# PHP Composer install
	RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

	# Node.js install
	RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash -
	RUN yum install -y nodejs
	RUN npm install -g yarn

	# local environment
	RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
	ENV LANG ja_JP.UTF-8

	RUN systemctl enable httpd

	EXPOSE 80 443 3000 9000
	WORKDIR /var/www
	RUN rm -fR cgi-bin
	RUN rm -fR html

次に開発用Webサーバー(Apache)でSSLを使えるよう秘密鍵・SSL証明書をDockerkコンテナ内に作るためのシェルを作成します。

[laranuxt_dev/dev/ssl.sh]
	
 ssl.sh


	#!/bin/sh

	path=$1
	servername=$2

	mkdir -p ${path}
	openssl genrsa -out ${path}/server.key 2048
	openssl req -new -key ${path}/server.key -out ${path}/server.csr -subj '/C=JP/ST=Tokyo/L=Tokyo/O=Example Ltd./OU=Web/CN='${servername}
	openssl x509 -in ${path}/server.csr -days 3650 -req -signkey ${path}/server.key -out ${path}/server.crt

開発用サーバー(Apache)の設定ファイルをhttpd.conf編集・追記します。

[laranuxt_dev/dev/httpd.conf]
	
 httpd.conf


      ・
      ・

	DocumentRoot "/var/www/laranuxt/public"

      ・
      ・
      ・
      ・

	# Laranuxt
	<Directory "/var/www/laranuxt/public">
	    Options Indexes FollowSymLinks
	    AllowOverride All
	    Require all granted
	    <IfModule mod_rewrite.c>
	        <IfModule mod_negotiation.c>
	            Options -MultiViews
	        </IfModule>
	        RewriteEngine On
	        RewriteRule ^(.*)/$ /$1 [L,R=301]
	        RewriteCond %{REQUEST_FILENAME} !-d
	        RewriteCond %{REQUEST_FILENAME} !-f
	        RewriteRule ^ index.php [L]
	    </IfModule>
	    <IfModule headers_module>
	        Header append Access-Control-Allow-Origin: *
	        Header append Access-Control-Allow-Credentials: true
	        Header append Access-Control-Allow-Headers: "X-Requested-Withundefined Authorization"
	    </IfModule>
	</Directory>

	# Apache/php
	LoadModule php7_module   /usr/lib64/httpd/modules/libphp7.so
	AddType application/x-httpd-php .php

▽ 編集済みhttpd.conf

開発用サーバー(Apache)のSSL設定ファイルをssl.conf編集・追記します。

[laranuxt_dev/dev/ssl.conf]
	
 ssl.conf


      ・
      ・

	<VirtualHost>

      ・
      ・
      ・
      ・

    # SSL File
    SSLCertificateFile /etc/httpd/conf/ssl_keys/server.crt
    SSLCertificateKeyFile /etc/httpd/conf/ssl_keys/server.key

	# Laranuxt
	<Directory "/var/www/laranuxt/public">
	    Options Indexes FollowSymLinks
	    AllowOverride All
	    Require all granted
	    <IfModule mod_rewrite.c>
	        <IfModule mod_negotiation.c>
	            Options -MultiViews
	        </IfModule>
	        RewriteEngine On
	        RewriteRule ^(.*)/$ /$1 [L,R=301]
	        RewriteCond %{REQUEST_FILENAME} !-d
	        RewriteCond %{REQUEST_FILENAME} !-f
	        RewriteRule ^ index.php [L]
	    </IfModule>
	    <IfModule headers_module>
	        Header append Access-Control-Allow-Origin: *
	        Header append Access-Control-Allow-Credentials: true
	        Header append Access-Control-Allow-Headers: "X-Requested-Withundefined Authorization"
	    </IfModule>
	</Directory>
	DirectoryIndex index.php index.html

	</VirtualHost>

▽ 編集済みssl.conf

PHPの設定ファイルphp.iniを編集・追記します。各値は必要に応じて変更。

[laranuxt_dev/dev/php.ini]
	
 php.ini


    [PHP]
    
      ・
      ・

    default_charset = "UTF-8"

      ・
      ・

	[Date]
	date.timezone = "Asia/Tokyo"

      ・
      ・
      ・
      ・

	[xdebug]
	zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so
	xdebug.remote_enable=1
	xdebug.remote_autostart=1
	xdebug.remote_host=host.docker.internal
	xdebug.remote_port=9000
	xdebug.remote_log=/tmp/xdebug.log

▽ 編集済みphp.ini

最後にDocker ComposeのYAMLファイルを作成します。

[laranuxt_dev/docker-compose.yml]
	
 docker-compose.yml


	version: "3"
	services:
	    web:
	        build:
	            context: ./dev
	        image: "laranuxt-dev"
	        container_name: "laranuxt-dev"
	        ports:
	            - "8000:80"
	            - "8443:443"
	            - "3000:3000"
	        tty: true
	        stdin_open: true
	        volumes:
	            - ./dev/src:/var/www:delegated
	        working_dir: /var/www
	        privileged: true
	        command: /sbin/init

これらのファイルを用意してDockerイメージを作成してみます。

Dockerイメージの構築

Dockerイメージを作ってみます。コマンドプロンプト／ターミナル等で以下のコマンドを実行します。

※docker-compose.ymlのある場所で

	docker-compose up -d

上記コマンドを実行するとDockerイメージの構築が始まります。結構時間がかかりますが上手くイメージが作れればDockerコンテナの起動までしてくれます。

こんなメッセージが表示されれば成功です。

VSCodeの設定

VSCodeを開いて[ファイル]⇒[フォルダを開く]を選択して下記のフォルダを開きます。※laranuxtプロジェクト作成方法

laranuxt_dev/dev/src/laranuxt

Laravelプロジェクトが開いたら、その中にVSCodeの設定ファイルを作成します。 laranuxt/.vscodeフォルダ作成後、以下のlaunch.jsonファイルを作成します

laranuxt	※ <-- Laravelプロジェクト
  └ .vscode	※ <-- VSCode設定ファイル
       │
       └ launch.json

[laranuxt_dev/dev/src/laranuxt/.vscode/launch.json]
	
 launch.json


	{
	    "version": "0.2.0",
	    "configurations": [
	        {
	            "name": "Listen for XDebug",
	            "type": "php",
	            "request": "launch",
	            "port": 9000,
	            "pathMappings": {
	                "/var/www/laranuxt": "${workspaceRoot}"
	            },
	        },
	    ]
	}

拡張機能に「PHP Debug」を入れておかないとデバッグの開始が動かないので入ってない場合はインストールします。ついでに「Vetur」も入れておきます。

拡張機能をインストールした場合はVSCodeの再読み込みが必要なので再読み込みをします。

VSCodeでデバッグ

launch.jsonファイルの設定、PHP Debugプラグインのインストールができたらデバッグを開始できます。開発用Webサーバー(Apache)とNuxtの開発サーバーを立ち上げてデバッグしてみます。

開発用Webサーバー(http://localhost:8000)はDockerコンテナの起動時に立ち上がるようになってるので何もしなくてもそのままで使えます。（※ただしlaranuxtフォルダが存在しない状態でDockerコンテナを起動した場合はサーバー起動エラーになっています。その場合はlaranuxtプロジェクト作成後、下記Nuxtサーバー立ち上げと同じように、Dokcerコンテナ内で systemctl start httpd コマンドを打って立ち上げます。）

Nuxt開発サーバーはDockerコンテナ内に入ってコマンドラインを打って起動します。コマンドプロンプト／ターミナル等でDockerコンテナに入ります。

docker exec -it laranuxt-dev bash

コンテナ内に入れたらnuxtディレクトリの直下まで移動します。

cd /var/www/laranuxt/nuxt

その位置で下記コマンドでNuxt開発サーバーを起動します

※package.jsonの存在する場所です

	yarn run dev

Nuxt開発サーバーが立ち上がりビルドが始まります。ビルド完了したら以下のListening on画面になります。

これでhttp://localhost:3000/nuxtにアクセスできるようになっています

デバッグはVSCodeのデバッグの開始から行います。

デバッグ開始後、http://localhost:8000(もしくはhttps://locahost:8443)でLaravelのページにアクセスしてみます。

あとはLaravelのソースコードの任意に位置にブレークポイントを貼っておきます。その箇所が実行されればブレークポイントの行で実行が止まり[F10]でステップ移動できることでしょう。

以上でLaravel+Nuxtの開発環境の構築は完了です。開発を中断するときはDockerコンテナを落とすのをお忘れなく。

docker-compose stop

再開は

docker-compose up -d

で開始できます。２回目からはDockerイメージは作成済みなのですぐにDockerコンテナが起動します。
Dockerはホント便利ですね。

この記事が気に入ったらサポートをしてみませんか？

Docker+VSCodeによる開発環境の構築 （Laravel+Nuxt編）

環境構築

Dockerイメージの構築

VSCodeの設定

VSCodeでデバッグ

Docker+VSCodeによる開発環境の構築（Laravel+Nuxt編）