ローカルのPHP環境構築メモ
※Node.jsはインストールしてあるの前提。
Docker
nginxとphpの環境構築
ディレクトリ構成
- [ test ]
- ┝ [ data ]
- │ ┗─[ html ]
- ┝ docker-compose.yml
- ┗ [ web ]
- ┗─default.conf
docker-compose.yml
ポートは任意で変える
version: '3'
services:
web:
image: nginx:1.13.5-alpine
ports:
- "80:80"
depends_on:
- app
volumes:
- ./web/default.conf:/etc/nginx/conf.d/default.conf
- ./data/html:/var/www/html
app:
image: php:7.1.9-fpm-alpine
volumes:
- ./data/html:/var/www/html
default.conf
server {
listen 80;
server_name _;
root /var/www/html;
index index.php;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(\.+)$;
fastcgi_pass app:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
}
実行コマンド
docker-compose up -d
Gulp
インストール
最終的な想定ディレクトリ構成。自分で作成するものは青色。
- [ test ]
- ┗ [ data ]
- ┗─[ html ]
- ┝ [ sass ]
- ┝ [ css ]
- ┝ gulpfile.js
- ┝ package-lock.json
- ┝ package.json
- ┗ [ node_modules ]
コマンド
cdでインストールしたいフォルダに移動。
package.jsonを作成
npm init -y
Gulpのインストール(最近はグローバルインストールじゃないらしい)
npm install -D gulp
SassモジュールとGulpモジュールを連携
npm install -D gulp sass gulp-sass
実行コマンド
npx gulp
gulpfile.js
監視付き。VS Codeのターミナルでgulpfile.jsを置いているフォルダへ移動してgulpと打てば監視開始。
切るのはControl + C。
// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));
// style.scssの監視タスクを作成する
gulp.task("default", function() {
// ★ style.scssファイルを監視
return gulp.watch("sass/style.scss", function() {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
return (
gulp
.src("sass/style.scss")
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: "expanded"
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on("error", sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest("css"))
);
});
});
ありがとうございます
docker-compose による nginx + HTTP/2 + PHP-FPM7 + MySQL 環境の構築方法
絶対つまずかないGulp 4入門(2021年版)インストールとSassを使うまでの手順
