Nuxt.js + CentOS + Vagrant + VirtualBox + Windows 10

Git Bash、VirtualBox、Vagrant をインストールしておく。
- https://gitforwindows.org/
- https://www.virtualbox.org/
- https://www.vagrantup.com/

また、C:\Program Files\Git\git-bash.exe アイコンを右クリックプロパティで開き、
互換性タブの、管理者としてこのプロパティを実行する。にチェックを入れておく。

Git Bashで操作

ディレクトリ作成
```
$ mkdir /c/work/vagrants/sample-nuxtjs
$ cd /c/work/vagrants/sample-nuxtjs
```

VM設定ファイル初期化
```
$ vagrant init centos/7
$ vi Vagrantfile
config.vm.network "private_network", ip: "192.168.56.60" # 各PCのネットワーク環境と合わせる必要あり
config.vm.hostname = "sample-nuxtjs.local"
```

必要なプラグインをインストール
```
$ vagrant plugin list
$ vagrant plugin install vagrant-vbguest
$ vagrant plugin install vagrant-hostsupdater
```

VM起動
```
$ vagrant up
```

ログイン確認
```
$ vagrant ssh
```

OSバージョン確認
```
$ cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)
```

OSバージョンアップ
```
$ sudo yum update
```

時刻を日本時刻に
設定確認
```
$ timedatectl

```
タイムゾーン設定
```
$ sudo timedatectl set-timezone Asia/Tokyo
```
設定確認
```
$ timedatectl
```

バージョン12系のnodeをインストールする
```
$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
$ sudo yum install nodejs
$ node -v
v12.14.1
```

yarnコマンドのインストール
```
$ curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
$ sudo rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg
$ sudo yum install yarn
$ yarn -v
1.21.1
```

サンプルプロジェクトを作成
```
$ mkdir myapp
$ cd myapp/
$ vi package.json
==================================
{
"name": "myapp",
"scripts": {
"dev": "nuxt --hostname 192.168.56.60" ※自PCのネットワークにあわせて設定
}
}
==================================

インストール
$ npm install --save nuxt

ローカルサーバー起動
$ npm run dev
⇒ブラウザで http://192.168.56.60 にアクセス

$ mkdir pages
$ vi pages/index.vue
==================================

==================================
$ npm run dev
⇒ブラウザで http://192.168.56.60 にアクセス
```


投稿日

カテゴリー:

,

投稿者:

タグ: