Mac OSXでのWeb開発環境構築
こんにちは、@kuck1u です。
この記事は、Mac ( OS X 10.10.4 ) を使用したメモです。
常に更新と修正が行われていきます。
SSH 公開鍵と秘密鍵の生成
# 秘密鍵を生成 $ openssl genrsa -des3 -out ~/.ssh/github_rsa 2048 # パーミッションの変更 $ chmod 600 ~/.ssh/github_rsa # 公開鍵を生成 $ ssh-keygen -y -f ~/.ssh/github_rsa > ~/.ssh/github_rsa.pub # 鍵を登録する $ ssh-add -K ~/.ssh/github_rsa # 公開鍵をクリップボードにコピー $ pbcopy < ~/.ssh/github_rsa.pub
※ コマンド内にある [ github ]の部分はよしなに
※ 次の作業へ移る前に、Github へ公開鍵を登録しておく
Command Line Tools をインストール
Xcode を Apple Store からダウンロード。
ダウンロード後、下記コマンドを実行 。
$ xcode-select --install $ sudo xcodebuild -license
Homebrew をインストール
PATHを通す
$ mkdir -p /usr/local/sbin $ vi $HOME/.bash_profile export PATH=/usr/local/bin:$PATH export PATH=/usr/local/sbin:$PATH export PATH=$HOME/.nodebrew/current/bin:$PATH export HOMEBREW_GITHUB_API_TOKEN=YOURACCESSTOKEN $ source $HOME/.bash_profile
Homebrew をインストール
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
動作確認
$ brew doctor Your system is ready to brew.
動作確認を行った際、エラーが出た場合は下記サイトを参考に修正。
http://d.hatena.ne.jp/january/20130723/1374538421
パッケージのアップデート
$ brew update $ brew doctor
アップデートを行った際、エラーが出た場合は下記サイトを参考に修正。
http://qiita.com/cubdesign/items/6c1ca947e3604365fdc2
Homebrew cask をインストール
$ brew install caskroom/cask/brew-cask $ brew tap caskroom/homebrew-versions $ brew tap homebrew/dupes $ brew tap homebrew/versions $ brew tap homebrew/homebrew-php
GitHubで新しいBrewfileというレポジトリを作り、その中にBrewfileという名前のファイルを1つ作っておく。
$ brew file set_repo -r YOUR_GITHUB_USERNAME/Brewfile
パッケージをインストール
必要なパッケージを適宜追加。
以下はくっくるがインストールしたパッケージ。
$ brew install wget git nodebrew openssl rbenv ruby-build imagemagic $ brew cask install vagrant $ brew cask install virtualbox $ brew cask install google-japanese-ime $ brew cask install firefox-ja $ brew cask install sequel-pro $ brew cask install sublime-text3 $ brew cask install sourcetree $ brew cask install fluid
参考サイト
http://nanapi.co.jp/blog/2014/03/05/homebrew-cask/
http://qiita.com/ryurock/items/1432578d364985f6cb06#comment-2108c17ccf8db130fa60
http://rcmdnk.github.io/blog/2014/08/26/computer-mac-homebrew/
Node.js をインストール
インストール可能なバージョンを確認
$ nodebrew ls-remote
Node.js をインストール
$ nodebrew install v0.11.16
インストール済みの Node.js を確認
$ nodebrew list v0.11.16 current: none
この時点では、node コマンドや npm コマンドは使えないため、Node.js を有効にする。
$ nodebrew use v0.11.16
バージョンの切り替え
$ nodebrew use v0.**.**
インストール
# バージョン指定 $ nodebrew install v0.**.** # 最新版 $ nodebrew install latest # 安定版 $ nodebrew install stable
アンインストール
$ nodebrew uninstall v0.**.**
アップデート
$ nodebrew selfupdate
Vagrant のプラグインをインストール
# VCCW を使用場合は必要 $ vagrant plugin install vagrant-hostsupdater # 一時的に外部に公開したりする予定がないのであれば不要 $ vagrant plugin install vagrant-share
Gulp と bower をインストール
node.js を事前に nodebrew でインストールしておく。
$ sudo npm install gulp –g $ sudo npm install bower –g $ sudo npm update gulp -g $ sudo npm update bower -g
rbenv をインストール
rbenv を利用する事で、OS X 上で複数バージョンの Ruby を切り替えて使用する事ができる。
$ brew install rbenv ruby-build
PATH を通す
$ vi /Users/YOURNAME/.bash_profile export PATH=/usr/local/bin/rbenv:$PATH eval "$(rbenv init -)"
インストール可能なバージョンを確認
$ rbenv install -l
任意のバージョンをインストール
$ rbenv install 2.2.0
バージョンを切り替える
$ rbenv global 2.2.0 $ rbenv rehash
現在のバージョンを確認する
$ rbenv versions system * 2.2.0 (set by /Users/YOURNAME/.rbenv/version)
phpenv をインストール
phpenv を利用する事で、OS X 上で複数バージョンの PHP を切り替えて使用する事ができる。
$ brew install phpenv $ git clone git://github.com/CHH/php-build.git ~/.phpenv/plugins/php-build $ brew install libjpeg $ brew install libpng $ brew reinstall libmcrypt
PATH を通す
$ vi /Users/YOURNAME/.bash_profile export PATH=$PATH:$HOME/.phpenv/bin eval "$(phpenv init -)"
インストール可能なバージョンを確認
$ phpenv install -l
任意のバージョンをインストール
$ phpenv install 5.4.9
バージョンを切り替える
$ phpenv global 5.4.9 $ phpenv rehash
PHP をインストール
Composer を使う場合、phpenvだけだと
brew upgrade
の際にエラーを吐いて upgrade 出来ない。その為、PHP も追加でインストールする。
$ brew install php56
php.ini の編集
$ vi /usr/local/etc/php/5.6/php.ini
date.timezone = Asia/Tokyo default_charset = "UTF-8" mbstring.language = Japanese mbstring.internal_encoding = UTF-8 mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII
Sacc と Compass をインストール
$ sudo gem install compass $ sudo gem install sass $ rbenv rehash
WP-CLI をインストール
$ brew install composer --ignore-dependencies $ brew install wp-cli --ignore-dependencies $ which wp /usr/local/bin/wp
VCCW をインストール
# IDE などのプロジェクトディレクト直下に移動 $ cd /Users/YOURNAME/PhpstormProjects/TEST/ # VCCW + Gulp 1発起動スクリプト VAVG をダウンロード $ wget http://github.com/kuck1u/vavg/archive/master.zip && unzip ./master.zip && rm -rf ./master.zip && mv ./vavg-master/* ./ && rm -rf ./vavg-master # テーマファイル名を編集 $ vi ./_sources/scss/style.scss # VCCW の設定ファイルを編集 $ vi ./site.yml # VAVG のインストールと起動 $ chmod u+x ./vavg && ./vavg -i -s
PhpStorm
WordPress 用のコードスタイル
# 設定ファイル保存場所へ移動 $ cd /Users/YOURNAME/Library/Preferences/WebIde80/codestyles/ # ファイルをダウンロード $ wget https://github.com/Automattic/PhpStorm-Resources/archive/master.zip # ファイルを解凍 $ unzip master.zip # 解凍ファイルを 1 改装上へ移動 $ mv ./PhpStorm-Resources/* ./ # 不要ファイルを削除 $ rm -rf PhpStorm-Resources/ $ rm -rf ./master.zip
Preferences → Code Style → Scheme で WordPress が選択出来るようになっている。
Colors & font
設定ファイルは以下のディレクトリに任意の任意の名前で保存される。
/Users/YOURNAME/Library/Preferences/WebIde80/colors/KUCKLU.icls
くっくるは Monokai をコピーしてフォントサイズとラインハイトを変えたので使ってみてます。
CSS フレームワークのインストール
最後に・・・
今回の記事は完全に自分用のメモです（笑）今年の 1 月に、メイン機の Mac さんが突然お亡くなりになり、その時に行った作業内容です。復旧させるのが面倒臭かったです。いまは、Time Machine を導入しているので、復旧作業はたいした作業にはならないと思いますけれども。
それでは本日はここまで。
@kuck1u でした。
