Apache+CakePHP3+Gulp環境設定 for Mac

python get-pip.py 注意:指定した python のバージョンの pip コマンドがインストールされます。 python3 get-pip.py なら python3 の pip コマンドがインストールされます #togable
ネット繋いだらコマンド一発で終わるものを依存関係調べながら末端のパッケージから一つ一つインストールするとか言う地獄の作業に心壊れそう
インストールして2時間くらいなのでよくわかってない気もするけど、「カーソル下のオブジェクトをMOPに追加する」コマンド、パイメニューで確定する瞬間にカーソルから外れてるとエラーになるのが厳しい。パイメニューでカーソルを移動させる距離を計算してパイメニュー起動しろと?
Ubuntu Server Debian GNU/Linuxベースのサーバー用Linuxディストリビューションよ。Ubuntu communityが提供してるわ。 動作に最低限必要なソフトウェアがインストールされてるだけで、 操作環境もコマンドラインだけだわ。
OUIの起動:runInstallerコマンドにて起動。-egnoreSysPrereqsオプション:性能用件を問わずインストールする。-helpオプション:ヘルプを表示。
引数に指定したDebian形式パッケージがインストール元となっているファイルを、検索して表示するには、dpkgコマンドに-Lアクション(あるいは--listfiles)を指定する。 #lpic
数年ぶりにxcodeをインストールするよ! 前はギガアプデ地獄にあって、パケ死したからコマンドラインだけ残して消したんだっけな。
WebサーバーでもDBでも開発環境でもなんでもいいんだけど、同じディストリビューションの同じバージョンに同じ物インストールする「説明」が設定ファイルの保存場所とか使うコマンド自体とか、人によってばらばらなのはさすがに勘弁してほしい
試してないけど、現在はv3.2.1への強制アップデートは要求されてないはずなので、3.2.0をインストールしてコマンド入れて3.2.1アップデートが通用すると思う
rpmコマンドのオプションは、大きく分けて「インストール/アップグレードモード(-i、-U、-F)」「アンインストールモード(-e)」「照会モード(-q)」の3つに分類される。 #lpic
インストール済みのDebian形式パッケージを表示するには、dpkgコマンドに-lアクション(あるいは--list)を指定する。 #lpic

CakePHPに最低限のバックエンド処理だけ持たせて,ルーティングなどはフロントエンドに丸投げするサイトを構成するための環境構築をしたので再構築時のためにメモ.

Nodeの環境設定

Gulpを利用するため,Node.jsをMacに導入するがbrewを利用すれば一瞬で終わる.

brew install nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> .bash_profile
echo '. "/usr/local/opt/nvm/nvm.sh"' >> .bash_profile

これでnvmコマンドが通るはずなのでお好みもNode.jsをインストールすればOK.

CakePHPの環境設定

次にCakePHPの環境設定をするが今回はPHP7.1を利用している.またCakePHPのインストールにはPHPのパッケージマネジャーであるComposerを利用する.基本的に全部brewに任せるが,PHPのパッケージが存在するレジストリを登録する必要がある.

brew tap homebrew/homebrew-
brew install 71 71-intl

後ろのintlがついてるパッケージはComposerを利用するときに必要となるので,忘れずインストールする.続いてComponserをインストールして終了.

brew install composer

上手くいっていればcomposerコマンドがターミナル上で実行可能となる.これを利用してCakePHPのインストールを行う.自分が決めたワーキングディレクトリ上で以下のコマンドを利用することで完了.

composer create-project --prefer-dist cakephp/app cake

コマンド打ってから結構時間かかるので気長に待つ.エラーが出なければCakePHPプロジェクトの展開は完了.

Apacheの環境設定

brewを利用するためPHPの時と同様にレジストリを新しく登録する必要がある.次のコマンドを実行すればインストール完了.

brew tap homebrew/apache
brew install httpd24

これでMax上にApacheが乗るのでapachctlコマンドが使える.これを利用してApacheの再起動などが可能.

あと先ほどのインストールではPHPとApacheを連携させるモジュールがインストールされていない.そこで下記のコマンドを実行する.上手く連携させてhttpd.confの中身を書き換えてくれる.ApacheをPHPより先にインストールするなら上記したinstallコマンドにオプションを付与すれば一発でOK.

brew reinstall php71 --homebrew-apxs

Apacheを起動する前にはPHPとの紐付けのためにApacheの設定がいるので/usr/local/etc/apache2/2.4/httpd.confを以下のように再設定する.
尚,今回はDocumentRootもユーザディレクトリ上に変更している.もし,Apacheでパーミッションエラーが出るようならchmodの755で権限を変更する必要がある.

httpd.conf
DocumentRoot "/Users/[userName]/cake"
<Directory "/Users/[userName]/cake">
    ...
AllowOverride All
    ...
</Directory>

    ...

AddType application/x-httpd-php .php

    ...

DirectoryIndex index.php index.html

    ...

<FilesMatch .php$>
SetHandler application/x-httpd-php
</FilesMatch>

これでApacheをrestartすればCakePHPのデフォルト画面に http://localhost:8080/ からアクセスできるはずである.

Gulpの環境構築

フロントエンドに大きな処理を持たせるためにNodeからReactなどのライブラリを利用する.そのためにタスクランナーで開発環境を整備するが今回はJavascriptではReact+Reduxを採用し,さらにBrowserifyでトランスパイルを行なっている.CssにはSassを利用しており,同様にSassのコンパイルもGulpのタスクの1つに含める.その他,諸々を含めたコンパイル処理でのタスクフローは以下のようになる.

gulpfile.js
const gulp = require("gulp");
const rename = require("gulp-rename");
const browserify = require("browserify");
const babelify = require("babelify");
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");
const uglify = require("gulp-uglify");
const sourcemaps = require("gulp-sourcemaps");
const sass = require("gulp-sass");
const clean = require("gulp-clean-css");

gulp.task("js-compile", function() {
    var bundler = browserify({
        entries: ["./src/Javascript/root.js"]
    }).transform(babelify, { presets: ["es2015", "react"] });
    return bundler.bundle()
           .pipe(source("bundle.js"))
           .pipe(gulp.dest("./webroot/js/"))
           .pipe(buffer())
           .pipe(sourcemaps.init())
           .pipe(uglify())
           .pipe(sourcemaps.write("./maps/"))
           .pipe(rename({extname: ".min.js"}))
           .pipe(gulp.dest("./webroot/js/"));
});

gulp.task("sass-compile", function() {
    return gulp.src("./src/Sass/style.scss")
           .pipe(sass({ outputStyle: "expanded" }))
           .pipe(gulp.dest("./webroot/css/"))
           .pipe(clean())
           .pipe(rename({extname: ".min.css"}))
           .pipe(gulp.dest("./webroot/css/"))
});

今回CakeのデフォルトサーバでなくApacheを利用した最大の目的としてはbrowser-syncのproxy機能を利用した上で,CakePHP+Javascript環境でのライブリロードの実現としているので上記のプログラムに加えて以下のようにタスクを構成する.

gulpfile.js
const gulp = require("gulp");
const browser = require("browser-sync");

gulp.task("server", ["js-compile", "sass-compile"], function() {
    browser({
        proxy: "localhost:8080"
    });
    gulp.watch("./webroot/*.html", ["reload"]);
    gulp.watch("./webroot/*.php", ["reload"]);
    gulp.watch("./webroot/js/*.js", ["reload"]);
    gulp.watch("./webroot/css/*.css", ["reload"]);
});

gulp.task("reload", function() {
    browser.reload();
});

gulp.task("watch", function() {
    gulp.watch("./src/Javascript/*.js", ["js-compile"]);
    gulp.watch("./src/Javascript/**/*.js", ["js-compile"]);
    gulp.watch("./src/Javascript/componets/**/*.jsx", ["js-compile"]);
});

gulp.task("default", ["server", "watch"]);

PHPの監視機能が若干抜けているが.これに多少追記すれば開発環境の構築は終了である.

[紹介元] PHPタグが付けられた新着投稿 – Qiita Apache+CakePHP3+Gulp環境設定 for Mac

  • コメント

    1. 匿名希望
      2017/08/19(土) 15:41:25

      python get-pip.py 注意:指定した python のバージョンの pip コマンドがインストールされます。 python3 get-pip.py なら python3 の pip コマンドがインストールされます #togable

    2. 匿名希望
      2017/08/19(土) 15:41:25

      WebサーバーでもDBでも開発環境でもなんでもいいんだけど、同じディストリビューションの同じバージョンに同じ物インストールする「説明」が設定ファイルの保存場所とか使うコマンド自体とか、人によってばらばらなのはさすがに勘弁してほしい

    3. 匿名希望
      2017/08/19(土) 15:41:25

      数年ぶりにxcodeをインストールするよ!
      前はギガアプデ地獄にあって、パケ死したからコマンドラインだけ残して消したんだっけな。

    4. 匿名希望
      2017/08/19(土) 15:41:25

      引数に指定したDebian形式パッケージがインストール元となっているファイルを、検索して表示するには、dpkgコマンドに-Lアクション(あるいは–listfiles)を指定する。
      #lpic

    5. 匿名希望
      2017/08/19(土) 15:41:25

      OUIの起動:runInstallerコマンドにて起動。-egnoreSysPrereqsオプション:性能用件を問わずインストールする。-helpオプション:ヘルプを表示。

    記事に戻る

関連記事