Mac book proを購入したので、
1からの環境構築をしてみました。
備忘録を兼ねて、書きます。
参考になれば幸いです。
##Home brew のインストール
ターミナルを開き、公式サイトにあるスクリプトをそのままコピペ。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following new directories will be created:
/usr/local/Cellar
/usr/local/Homebrew
/usr/local/Frameworks
/usr/local/bin
/usr/local/etc
/usr/local/include
/usr/local/lib
/usr/local/opt
/usr/local/sbin
/usr/local/share
/usr/local/share/zsh
/usr/local/share/zsh/site-functions
/usr/local/var
と、こんな感じでバンバン進んでいく。
途中でエンターキーと、パスワードの入力が要求されるので、入力する。
五分〜六分くらい待って、インストール完了
異常がないか確認する。
$ brew doctor
Your system is ready to brew.
エラーなし。
優秀。
##nodebrewのインストール
次に、
nodebrew なるものをインストールする。
node.jsのバージョン管理とか、楽になるらしい。
$ brew install nodebrew
Updating Homebrew...
==> Downloading https://github.com/hokaccha/nodebrew/archive/v0.9.7.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v0.9.7
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
/usr/local/opt/nodebrew/bin/nodebrew setup_dirs
Add path:
export PATH=$HOME/.nodebrew/current/bin:$PATH
To use Homebrew's directories rather than ~/.nodebrew add to your profile:
export NODEBREW_ROOT=/usr/local/var/nodebrew
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
zsh completions have been installed to:
/usr/local/share/zsh/site-functions
==> Summary
🍺 /usr/local/Cellar/nodebrew/0.9.7: 8 files, 38.2KB, built in 5 seconds
簡単。
ここで、環境変数を設定しなきゃいけない。
上で追加してねと言われたPATHを追加。
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ export NODEBREW_ROOT=/usr/local/var/nodebrew
そしてパスを通すのだけれど、ファイルがないと言われた。
$ source /.bash_profile
-bash: /.bash_profile: No such file or directory
ないなら作れば良い。ということでファイル作成。
$ sudo vi .bash_profile
パスワードを要求されるので、入力する。
すると、ファイルが開くので、『:wq』（ファイルを保存して終了という意味のvimコマンド）をうちこんでenterキーをおす。
そして、再度パスを通してみる。
$ source /.bash_profile
これで、パスの設定は完了。※注意１
次に、セットアップ。
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
##node.jsなどのインストール
最新のnode.jsをインストールする。
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v8.5.0/node-v8.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
成功したらしい。
インストールしたnode.jsのバージョンを確かめて
$ nodebrew ls
v8.5.0
current: none
そのバージョンを使うよう設定する。
ここでは、自分のターミナルで表示されたバージョンを指定すれば良い。
僕がやった時は、v8.5.0であった。
$ nodebrew use v8.5.0
use v8.5.0
一応、ちゃんと設定ができているか確認。
$ node -v
v8.5.0
npmも自動で入ってるらしいので、確認。
$ npm -v
5.3.0
入っていた。よろしい。
##Reactの便利なコマンドを使えるようにする
reactが使えるように設定する。
$ npm install -g create-react-app
/Users/yugo/.nodebrew/node/v8.5.0/bin/create-react-app -> /Users/yugo/.nodebrew/node/v8.5.0/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.0
added 104 packages in 10.515s
良いらしい。
やっとこさ、
アプリを作成してみる。
アプリ名はなんでも良い。ここでは"new_world"
$ create-react-app new_world
Creating a new React app in /Users/[ユーザー名]/new_world.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> fsevents@1.1.2 install /Users/[ユーザー名]/new_world/node_modules/fsevents
> node install
[fsevents] Success: "/Users/[ユーザー名]/new_world/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/[ユーザー名]/new_world/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
+ react-scripts@1.0.13
+ react-dom@15.6.1
+ react@15.6.1
added 1237 packages in 105.505s
Success! Created new_world at /Users/[ユーザー名]/new_world
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd new_world
npm start
Happy hacking!
行けた！
あとは、アプリのディレクトリに移動して起動するだけ。
$cd new_world
$npm start
すると、ブラウザが起動して成功！
サーバを止めたい場合は、ctrl+cで可能。
結構簡単にいけました〜！
初めてmacを使っているのですが、環境構築の手間が窓に比べるととんでもなく楽ですね。
これは開発捗るわ。。。
※注意１
ここで環境変数を設定しても、ターミナルを再起動すると、環境変数がなくなっていることがある。（というか、普通無くなる）
なので、自分で直接.bash_profileのの中に環境変数などを設定しておく必要がある。
$ vi .bash_profile
でファイルを開いた後、『i』を押して編集モードにしてから、
PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew
と書き足して保存。
そうすると、ターミナルを再起動しても、npmなどのコマンドが使える。