Vagrant + VirtualBox + CentOS 7 に Nuxt.js を入れてみる

自主学習のメモ。ページが表示されるところまでは確認しました。

Vagrantfile の修正

Vagrantfile

Vagrant.configure(2) do |config|
  config.vm.box = "bento/centos-7.6"
  config.vm.box_url = "https://app.vagrantup.com/bento/boxes/centos-7.6"

  #config.vm.network :forwarded_port, guest: 80, host: 8888
  config.vm.network :forwarded_port, guest: 3000, host: 3000
  config.vm.network :private_network, ip: "192.168.33.34"

  #config.vm.synced_folder "./mnt/project/", "/mnt/project/",
  #:owner => "vagrant", :group => "vagrant",
  #:mount_options => ["dmode=777,fmode=777"]
end

後でnuxt.jsでプロジェクトを作る際に、いろいろライブラリをインストールするんですが、
その際にシンボリックリンクを作ろうとします。
しかし、Vagrantでマウントしているディレクトリ内にシンボリックリンクは作成できず、エラーになるので、
マウントしないように設定します。

また、ローカル環境のURL「 http://localhost:3000 」にアクセスできるようにポートフォワーディングの設定をしています。

Node.js のインストール

公式ドキュメントに従い、 Nuxt.js をインストールするために create-nuxt-app を使用します。
create-nuxt-app を使うためには、 npx がインストールされている必要があり、
npx をインストールするには、 npm が必要です。

npm は、 node.js をインストールすれば一緒にインストールされます。
ゆえに、 node.js をインストールします。

執筆時点での最新版であるVer12系をインストールします。

インストール

curl -sL https://rpm.nodesource.com/setup_12.x | bash -
yum install nodejs

バージョン確認

node -v
npm -v

nodejs v12.7.0 と npm v6.10.0 がインストールされました。

npx のインストール

インストール

npm install -g npx

Nuxt.js のインストール

これで create-nuxt-app が使用できるようになり、 Nuxt.js をインストールする準備が整いました。
次のコマンドで、いよいよ Nuxt.js を稼働させます。

cd /path/to/project
npx create-nuxt-app myproject

CUI上でどういうモジュールを入れるか色々と質問されます。
jQueryとPHPで生きてきた人間なので、
ぶっちゃけ質問内容がほとんどよくわかってないですが、フィーリングで乗り越えます。

npx create-nuxt-app myproject

npx: installed 379 in 18.122s
create-nuxt-app v2.8.0
✨  Generating Nuxt.js project in /path/to/project/myproject
? Project name test
? Project description My mind-blowing Nuxt.js project
? Author name
? Choose the package manager Npm
? Choose UI framework Bootstrap Vue
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework Jest
? Choose rendering mode Universal (SSR)

cd test
rpm run dev

おわり

できました。すごい。