広告

MAC開発環境　M2

Mac
2023.02.28
この記事は約18分で読めます。

Macbook Pro 14インチを購入したので、開発環境を構築しました。

macOS Ventura 13.2.1なので、phpは入っていない・・・

PHP は、Mac OS X バージョン 10.0.0 以降、 macOS Monterey (12.0.0) より前の MacOS に標準添付されています。 

https://www.php.net/manual/ja/install.macosx.bundled.php

ターミナルでコマンドを打って確認してみました。

php -v

zsh: command not found: php

と、お返事が返ってきたのでphpは入っていません。

Homebrew

公式サイトを見て、インストール

Page not found · GitHub Pages
brew.sh

再びコマンド

brew -v

zsh: command not found: brew

え〜〜〜〜そんな〜〜〜〜

Homebrewをインストールした時、最後に表示されていたコレをしないとダメ。

- Run these two commands in your terminal to add Homebrew to your PATH:
    (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/ユーザー名/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

簡単に言うと「環境変数PATHにパスを通す」ことで解決するので、インストールしたときに表示されたコマンドをそのままコピペ。

環境によってコマンドが違うので、注意してください。

私の場合は、下記のようにコマンドを打ちました。

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/ユーザー名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

再度、Homebrewが動くことを確認。

brew -v

Homebrew 4.0.3

と、無事に表示されました！

正しい構成になっているかを確認しておきます。

brew doctor

Your system is ready to brew.　という表示が出たので、修正必要なし！

グローバルでphpバージョンを切り替える

どうするか迷ったのですが、phpのバージョンを切り替えることがあるので、切り替えられるように構築することにしました。

macOS 15.0 Sequoia Apache Setup: Multiple PHP Versions
Grav is a Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS.
getgrav.org

まずは、上記サイトでアップルシリコンか、インテルシリコンか選択して、表示されるコマンドを切り替えます。

必要なライブラリを入れます。

brew install openssl

Apacheを入れ直します。

新規の場合でもコマンドを入れて問題ありません。

sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

Homebrewで入れ直します。

brew install httpd

インストールしたら、次のように出てきました。

To start httpd now and restart at login:
  brew services start httpd

新しいApacheサーバーが自動起動するように構成してね。と言うことですので。

brew services start httpd

macから指示が色々と出てきます。

上手く設定が完了したら、ブラウザで　http://localhost:8080/　を開きます。

「It works!」と表示されたら成功です。

Apache設定変更

リッスンポートを8080から80に変更します。

Dockerなどで80ポートや8080ポートを使用することがある場合は、11080などを利用するのもいいかと思います。

/opt/homebrew/etc/httpd　フォルダをfinderで開いて、httpd.conf をvscodeで開きます。

Listen 8080

を探して、

Listen 80

に変更します。

いやいや、「11080番のポートにしたいの！」という方は下記のように変更します。

Listen 11080

「11080番でもいいけど、8081でも良くない」という方は下記のように変更します。

Listen 8081

Apache のドキュメント ルートを変更

デフォルトのドキュメントルートは　/opt/homebrew/var/www

独自のホームディレクトリ内のフォルダーを指すようにするとします。

DocumentRoot "/opt/homebrew/var/www"

を探して、

DocumentRoot "/Users/your_user/Sites"

your_userの部分はご自身の環境に合わせます。

DocumentRoot 行のすぐ下

<Directory "/opt/homebrew/var/www">

これも変更します。

<Directory "/Users/your_user/Sites">

<Directory “/Users/your_user/Sites”>の中にある

AllowOverride None

を

AllowOverride All

に変更します。

デフォルトでコメントアウトされているmod_rewrite を有効に。

#LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so

を

LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so

ユーザーグループ

User _www
Group _www

これを

User your_user
Group staff

に変更する。

サーバー名称

#ServerName www.example.com:8080

を

ServerName localhost

に変更します。

Sites フォルダを作る

ターミナルでSitesフォルダを作り、htmlファイルを作ります。

mkdir ~/Sites
echo "<h1>My User Web Root</h1>" > ~/Sites/index.html

Apache を再起動

brew services stop httpd
brew services start httpd

エラーが発生したら、公式サイトを見てね。

ブラウザで確認

http://localhost/　がブラウザで開けるか確認。

ポート81番の方は、　http://localhost:81/　

ポート8081番の方は、　http://localhost:8081/　をブラウザで開けるか確認しましょう。

一応、http://localhost:11180/ もどうぞ。

phpのインストール

brew tap shivammathur/php

全部入れてもいいけど、必要なものだけ入れます。

brew install shivammathur/php/php@7.0
brew install shivammathur/php/php@7.1
brew install shivammathur/php/php@7.2
brew install shivammathur/php/php@7.3
brew install shivammathur/php/php@7.4
brew install shivammathur/php/php@8.0
brew install shivammathur/php/php@8.1
brew install shivammathur/php/php@8.2

phpのメモリやタイムゾーンの設定をするときの構成設定の場所

/opt/homebrew/etc/php/7.0/php.ini
/opt/homebrew/etc/php/7.1/php.ini
/opt/homebrew/etc/php/7.2/php.ini
/opt/homebrew/etc/php/7.3/php.ini
/opt/homebrew/etc/php/7.4/php.ini
/opt/homebrew/etc/php/8.0/php.ini
/opt/homebrew/etc/php/8.1/php.ini
/opt/homebrew/etc/php/8.2/php.ini

端末のタブとウィンドウをすべて閉じる。

phpの切り替え

php7.４に切り替えるのなら

brew unlink php && brew link --overwrite --force php@7.3
php -v

と入力して、バージョンが表示されたら、とりあえずOK。

8.2に切り替えてみる

brew unlink php && brew link --overwrite --force php@8.2
php -v

と入力して、バージョンが表示（切り替わったら）されたら、とりあえずOK。

Apache PHP のセットアップ

/opt/homebrew/etc/httpd/httpd.conf をvscodeで開く。

LoadModule rewrite_module lib/httpd/modules/mod_rewrite.so

を探して、下記を下側に追加します。（phpの設定が8.2の場合です。）

#LoadModule php7_module /opt/homebrew/opt/php@7.0/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.1/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.2/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.3/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.4/lib/httpd/modules/libphp7.so
#LoadModule php_module /opt/homebrew/opt/php@8.0/lib/httpd/modules/libphp.so
#LoadModule php_module /opt/homebrew/opt/php@8.1/lib/httpd/modules/libphp.so
LoadModule php_module /opt/homebrew/opt/php@8.2/lib/httpd/modules/libphp.so

次を検索

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

下記に変更

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

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

Apache を再起動

brew services stop httpd
brew services start httpd

検証

Sitesフォルダに info.php を作成。

echo "<?php phpinfo();" > ~/Sites/info.php

http://localhost/info.php をブラウザで開いて確認。

PHP Switcher Script

/opt/homebrew/bin　にsphpを入れます。

curl -L https://raw.githubusercontent.com/rhukster/sphp.sh/main/sphp.sh > /opt/homebrew/bin/sphp
chmod +x /opt/homebrew/bin/sphp

テスト

sphp 8.1

http://localhost/info.php をブラウザで開いて確認。

sphp 8.2 と入力してphp８.２に変更します。

composerをbrewで入れる

brew install composer

確認

composer

表示されたらOK!

システム全体に PHP_CodeSniffer をインストール

GitHub - squizlabs/PHP_CodeSniffer: PHP_CodeSniffer tokenizes PHP files and detects violations of a defined set of coding standards.
PHP_CodeSniffer tokenizes PHP files and detects violations of a defined set of coding standards. - squizlabs/PHP_CodeSni...
github.com
 
composer global require "squizlabs/php_codesniffer=*"

phpcsのパスを通します。zshの場合

echo 'export PATH=$HOME/.composer/vendor/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

確認

phpcs --version

変更箇所あり

WordPressの規約を入れる（１行です）

git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

--config-setオプションで設定（１行です）

phpcs --config-set installed_paths ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

参考サイト

GitHub - WordPress/WordPress-Coding-Standards: PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions
PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions - WordPress/WordPress-Coding-Standards
github.com

システム全体に入れているので、グローバルでインストールする

composer global config allow-plugins.dealerdirect/phpcodesniffer-composer-installer true
composer global require --dev wp-coding-standards/wpcs:"^3.0"

確認

phpcs -i

WordPress, WordPress-Extra, WordPress-Docs and WordPress-Coreが出てきたらOK。

node.jsバージョン管理ツール

プロジェクト（案件）によって、node.jsのバージョンを変更する必要が多いので、バージョン管理ツールを入れます。

node.jsのバージョン管理ツールは複数ありますが、macでもwindowsでも使える’nvm’を使います。 「nvm」は、「Node Version Manager」の略です。

設定ファイルの作成

設定ファイル .zshrc もしくは .bashrc があるか確認します。

finderで、/Users/ユーザー名 のフォルダを開きます。

隠しファイルなので、「command」+「shift」+「.」で隠しファイルを表示させて探します。

もし、存在しない場合は作成します。

ターミナルを開きます。

ホームディレクトリに移動

cd

使っているシェル名を表示させます。

echo $SHELL

「/bin/zsh」か「/bin/bash」のどちらかが表示されます。

「/bin/zsh」の場合、zsh起動時の設定ファイルである.zshrcを作成します。

.zshrcを作成

touch ~/.zshrc

「/bin/bash」の場合、.bashrcを作成します。

Node Version Managerをインストール

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm
github.com

サイトを訪問し、Install & Update Scriptに沿ってインストールします。

「curl … | bash」というコマンドをターミナルに入力してインストールします。

ターミナルを閉じます！！

ターミナルを開く。

nvmがインストールされているか確認します。

command -v nvm

nvm　と表示されたら成功です。

Node.jsの推奨バージョンをnvmでインストール

nvm install --lts

Node.jsのバージョンを確認

node -v

Node.jsの推奨バージョンをリスト表示

nvm ls

バージョンを指定してNode.jsをインストール

v14.21.3の場合のコマンド

nvm install 14.21.2

Node.jsのバージョンを切り替え

nvm use v14.21.3

Node.jsのアンインストール

nvm uninstall 14.21.3

Node.jsの切り替え方法（いつもの使用）

nvmのバージョン確認（これしないと、動かないときあり）

nvm -v

Node.jsのバージョン指定

nvm use 14.21.3

Node.jsのバージョン確認（これ大事）

node -v

実行コマンドの例

npm run start

gitのインストール

Homebrewを使ってインストールします。

下記のサイトに訪問し、コマンドを確認。gitをインストールします。

Git
git-scm.com
Redirecting…
git-scm.com

おそらく、下記のコマンドになります。

brew install git

SSHキーの作成（ローカルで作る方法）

macの場合、/Users/ユーザー名/.ssh　のディレクトリにssh関係を保存します。（変更も可能のようですが、ディフォルトでいいかと思います）

ターミナルを開く

.sshフォルダ（ディレクトリ）を作成

mkdir ~/.ssh

.sshフォルダ（ディレクトリ）のパーミッション変更

chmod 700 ~/.ssh

sshフォルダ（ディレクトリ）に移動

cd ~/.ssh

SSHキー作成（gitlabの場合）

ssh-keygen -t rsa -b 4096 -C "メールアドレス" -f gitlab_rsakey
  • -t 暗号方式
  • -b ビット数
  • -C コメント（gitlabで使うメールアドレス）
  • -f ファイル名
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

と聞いてくるので必要に応じてパスフレーズを入れます。

git push などの際、パスフレーズを聞かれますので忘れずに。

設定不要なら、そのままenterキーを2回押します。

gitlab_rsakey、gitlab_rsakey.pub（gitlabに登録する公開鍵）の2つが作成されます。

finderで隠しファイルも表示する設定にしていれば、確認できます。

awsやvpsなど、ローカルではなく、サーバーでsshキーを作成しダウンロードした場合は、/Users/ユーザー名/.ssh　のディレクトリにプライベートキーを保存します。

SSHのconfigファイルの作成

github、gitlabなど様々なssh接続を実施する場合、configファイルを作成しておくと、めちゃくちゃ楽になります。

AWS EC2などでssh接続する場合、configファイルには何も記載しないことが多いです。

.sshフォルダ内にconfigファイルがある場合は追加。無い場合は作成します。（拡張子はありません）

私はVS codeで作ってしまいます。

上記で作ったgitlab向けの場合

# コメント
Host gitlab.com
HostName gitlab.com
IdentityFile ~/.ssh/gitlab_rsakey
User 123←gitlabの「Edit profile」の中にある「User ID」

# のある行はコメントになります。

公開鍵を登録（gitlabの例）

ブラウザで、GitLabにログイン。

「Edit profile」の中にある「SSH Keys」を選択します。

gitlab_rsakey.pubをメモ帳で開いて、「Key」エリアにコピペします。

貼り付けたら、「Add key」を押して完了です。

SSH接続

windowsはGit Bashで macはターミナルで

ssh -T git@gitlab.com

接続できると

Are you sure you want to continue connecting (yes/no/[fingerprint])?

と聞いてくるので’yes’と入れます。

Welcome to GitLab, @arimichi!

と言われたら、成功です。

yarnインストール

nodeのパッケージマネージャであるyarnをインストールします。

yarnのインストール前にnvmコマンドでnodeのバージョンを指定します。

nvm use v20.9.0

確認します。

node -v

yarnをグローバルにインストールします。

npm install --global yarn

確認。

yarn -v

バージョンが表示されたら成功です。