ブログ構築 2. 開発環境にNuxt.jsを立ち上げる #01
2019年09月28日に更新

Nuxt.jsを動かす環境を構築する

Nuxt.jsを動かすためのツールたち

前提として、OSはmacです。

Nuxt.jsを動かすには

下の2つが必要です。

  • Node.js

    • Nuxt.jsを動かすために必要なJavascriptの開発環境
  • yarn

    • Node.jsの環境上で、パッケージを導入するためのツール

Node.jsをインストールするには

方法は色々ありますが、ここでは下記ツールを使って、Node.jsをインストールしていきます。

  • NodeBrew
    • Node.jsのバージョンを簡単に管理できるツール

NodeBrewをインストールするには

このツールが必要です。

  • Homebrew
    • mac上でのプログラミングに必要なツールを、インストールしたり、アンインストールする時に使うもの

もし、インストールがまだの場合はこの辺りの記事を参考にすると良いです。

Homebrewのインストールから操作まで - Qiita
macOSにHomebrewをインストール - Qiita

すでにインストールしている場合は、状況に応じてスキップしてください。

NodeBrewのインストールとセットアップ

それではターミナルを開いてコマンドを実行していきましょう。

1. Homebrewがmacにインストールされているか確認

Homebrewのバージョンが表示されたらOKです。次に進みましょう。

$ brew -v

Homebrew 2.1.8
Homebrew/homebrew-core (git revision e15ccd; last commit 2019-07-24)

2. Homebrewをupdateする

最新のツールを入れるためにupdateしておきましょう。

$ brew update

3. NodeBrewをインストールする

nodebrewをインストールしましょう。

$ brew install nodebrew

こんな画面でインストールが始まります。

==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%

4. NodeBrewのセットアップ

インストールが完了したら、次はセットアップです。

$ nodebrew setup

nodebrewのpathが表示されます。

....

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

5. NodeBrewのPATHを通す

macの設定ファイル「.bashrc」に先ほどのpathを記入します。

ちなみに、PATHを通すって?と思った方は、この方が分かりやすく説明してくれています。
PATHを通すとは? (Mac OS X) - Qiita

$ vi ~/.bashrc

viコマンドは、ファイルを開けというコマンドです。

ここで指定するファイル名は、「.bash_profile」もしくは「.zshrc」の場合もあります。

自分のmacの環境に合わせてファイル名を指定してください。

何もいじっていなければ、「.bashrc」のはずです。

波波線が表示されますので、先ほどのpathを記入します。

# nodebrewのpaht設定
export PATH=$HOME/.nodebrew/current/bin:$PATH
~                                                                                                      
~                                                                                                      
~  
"~/.bashrc" 5L, 154C

そして、設定を反映させるためのsourceコマンドを実行します。

$ source ~/.bashrc

OK!完璧です。次へ進みましょう。

補足. .bashrcファイルへの編集コマンド

ファイルを開きます。

$ vi ~/.bashrc

キーボードの「i」を押すと、編集モードになり、一番下「"~/.bashrc" 5L, 154C」の文字が「-- INSERT --」になリます。

INSERTの「i」と覚えましょう。

~                                                                                                      
-- INSERT --

この状態でpathを記入します。下記のようにコメントも記入できます。コメントは「#」から始めてください。

# nodebrewのpaht設定
export PATH=$HOME/.nodebrew/current/bin:$PATH

「esc」キーを押して、編集モードを終了します。「-- INSERT --」の表示が消えます。

これではまだ保存できいないので、編集を保存しましょう。

「:wp」 … 保存をして終了

~                                                                                                           
:wq

記入を誤った場合は、保存せず終了しちゃいましょう。

「:q」 … 保存せず終了します

~                                                                                                           
:q

個人的に、この程度のコマンドを覚えておけば十分だと思いますが、もっと知りたいという方は下記の記事が参考になります。
viコマンド(vimコマンド)リファレンス - Qiita

Node.jsをインストールする

さあ、次はNodeBrewを使って、Node.jsをインストールしていきます。

1.安定板を指定してNode.jsをインストール

  • stable => 安定板をインストール
  • latest => 最新版をインストール
$ nodebrew install-binary stable

次のようにInstalled successfullyが出たら成功です。

Fetching: https://nodejs.org/dist/v12.7.0/node-v12.7.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

2. インストールしたNode.jsの確認

バージョンが出てこればインストールが成功しています。

$ nodebrew list

v12.7.0

current: none

インストールしただけでは、Node.jsは使えません。もう少しです。

3. NodeBrewにNode.jsのバージョン指定

current: noneのまま「$ node -v」のコマンドを打ってもcommand not found(nodeのコマンドは無いよ)と言われます。

そこでNodeBrewにNode.jsのバージョンを指定してあげます。

$ nodebrew use stable

下記のコマンドを打ってバージョンが指定できているか確認しましょう。

$ node -v

v12.7.0

OK!バージョンが出てきました。やっとNode.jsが使えるようになりました。

yarnのインストール

yarnはHodeBrewを使ってインストールできます。

そう、brewコマンドです。

$ brew install yarn --ignore-dependencies

–ignore-dependenciesはbrewコマンドのオプションです。

yarnはNode.jsが無いと動きません。

しかし、NodeはNodebrewでインストールしており、Homebrewではインストールしていません。

このまま、HomeBrewにNode.jsがない状態でyarnをインストールしようとすると怒られます。

その問題を解決するのが–ignore-dependenciesオプションです。

インストールが始まります。

Warning: --ignore-dependencies is an unsupported Homebrew developer flag!
Adjust your PATH to put any preferred versions of applications earlier in the
PATH rather than using this unsupported flag!

==> Downloading https://yarnpkg.com/downloads/1.17.3/yarn-v1.17.3.tar.gz
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/49970642/114f8b80-a477-11e9-9a08-70f1f8027b9e?X-Amz-Algorithm=
######################################################################## 100.0%
....

インストールできたか確認しましょう。

バージョンが出てくればインストール成功です。

$ yarn -v
1.17.3

以上でNuxt.jsを動かすツールたちのインストールが完了しました。

まとめ

  1. Homebrewのインストール
  2. NodeBrewのインストール
  3. Node.jaのインストール
  4. yarnのインストール

次の記事では、Nuxt.jsをインストールしていきます。(やっと)

お疲れ様でした。

参考

install nodebrew, node and yarn - Qiita

↑こちらの方がすっきりとまとまっています。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告