vagrant環境でNuxt.jsプロジェクトとRailsAPIによるBFF環境構築 #初心者向け

開発環境

フロントエンド

nuxt.js @ v2.13.3
vue.js @ v2.6.11
node.js @ v12.18.2

バックエンド

Ruby @ v2.5.7-p206
Ruby on Rails @ v5.2.4.3

仮想環境

vagrant
VirtualBox6.0 @ v6.0.14 r133895 (Qt5.6.3)

その他

sublimetext

事前にnode.jsなどは安定版をインストールしておきましょう
（当環境ではnode.jsをホストOSに直接インストールしているので間々違いがあるやもしれません。ご了承ください）

構築

予め、お使いのテキストビュワーにrubyやvueの構文をハイライトしてくれるパッケージのインストールをおすすめします。

vagrant file

開発環境では3000ポートと5000ポートに分けてそれぞれをrailsサーバー、nuxtサーバーで割り当てます。そのためvagrantfileに一文追加しておきましょう。

vagrantfile

Vagrant.configure("2") do |config|
  …
  config.vm.network "forwarded_port", guest: 5000, host: 5000
  …

プロジェクト作成(ローカル環境)

お好きな名前でディレクトリを作成してください。ここではtestとします。
testディレクトリまできたらrailsとnuxtのプロジェクトを作成しましょう。ここではそれぞれbackend、frontendという名前で作成します。

$ cd test
$ rails new backend —api
$ npx create-nuxt-app frontend //このあと下記の質問に答えます

? Project name: frontend  // 好きにしたらok
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)  // JSの静的検証ツール、お好みでどうぞ
? Testing framework: None
? Rendering mode: Single Page App //SPAでの作成の方はこちら、あとでnuxt.config.jsファイルから変更可能
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

質問に答えた後、しばらく待ってnuxtのマークが出れば成功です。

$ cd frontend
$ rm -rf .git //railsと共にgitに上げたいので、こちらは削除しておきましょう。

事前準備

nuxtプロジェクトのpackage.jsonを書き換えて5000ポートを使うように指定しましょう。

test/frontend/Package.json

{
  …
  "scripts": {”dev”→”dev": "HOST=0.0.0.0 PORT=5000 nuxt"
  …
  }
}

テスト（vagrant環境）

vagrantを立ち上げてそれぞれのサーバーをテスト環境で立ち上げてみましょう。

test/frontend

npm run dev

test/backend

Rails s -b 0.0.0.0

localhost:3000とlocalhost:5000をブラウザで開けば起動確認が取れると思います。

api通信ができるようにしよう（ローカル環境）

ターミナルから下記のモジュールをインストールしよう。

test/frontend

$ npm install @nuxtjs/axios  //api通信をするためのモジュール
$ npm install @nuxtjs/proxy  //開発環境下でのCORSエラー回避

インストールしたモジュールを有効にしよう。

test/frontend/nuxt.config.js

const config = {  // export defaultから変更
  …
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  …
axios: {
    proxy: true
  },  // 追記　（本番環境だと不要と思われる）
 …
}

if (process.env.NODE_EV === 'development') {
  config.proxy = { '/api/: 'http://localhost:3000' }  //自分の場合railsのルーティングをnamespace apiとしているため自分の環境によって'/api/'は書き換え
}   // 追記　（開発環境の場合localhost:3000からjson取得）

export default config  // 追記

とりあえずここまでで下地はできたかと思います。
ここまで初学者の備忘録にお付き合いいただきありがとうございます。
次回はvuetyfyの導入の話をしようと思います。
そのままvuetifyを使った簡易ポートフォリオの作成までできればと考えております。

参考文献

SublimeTextをVue.jsに対応させる手順 https://qiita.com/ta_morimoto/items/16461c99bb339f1c8d13
Node.jsをインストールする https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b
【Nuxt.js】create-nuxt-appのすすめ〜create-nuxt-appの質問に負けたくないあなたへ〜 https://qiita.com/cheez921/items/fdfd224099f686e3173d
仮想環境でRails API × Nuxt.jsのアプリケーション開発をしたいが、まずブラウザに表示されない！ https://qiita.com/yuki82511988/items/afc11cc3c72c92432f44
Nuxt.jsでaxiosの使い方と設定方法を紹介 https://ma-vericks.com/nuxt-axios/
RailsとNuxt.jsを使ってシングルページアプリケーションを開発します。 https://blog.cloud-acct.com/posts/spa-nuxt-firstapi/

参考にさせて頂いた皆様にもこの場をお借りして感謝いたします。
めちゃくちゃ助かってます！！！ありがとうございます！！！