Docker+VSCodeによる開発環境の構築 (Laravel+Nuxt編)
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
で開始できます。2回目からはDockerイメージは作成済みなのですぐにDockerコンテナが起動します。
Dockerはホント便利ですね。
この記事が気に入ったらサポートをしてみませんか?