自己紹介
- 現在プログラミングの学習中の者です
- 言い回しや知識に関して、諸所間違い等あるかと思います
- その際は、ご指摘いただけますと幸いです
やりたいこと
RailsをAPIとして使用し、Nuxt.jsをフロント側に使用する開発において、
それらを仮想環境で開発を開始すること。
具体的には、@saongtx7様が書いてくださった
こちらの記事を仮想環境で進めたいと思ったことがきっかけです。
[入門]Rails API × Nuxt SPA × Firebase Authで作る Todo Appチュートリアル
https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f
本当に素晴らしいチュートリアルでした。
この場を借りて感謝申し上げます。
問題点
私の場合このような問題が起こりました。
- Rails側でポート指定をしてもブラウザに表在されない(rails s -b 5000)
- Rails側でポートを指定せずに起動した場合、Nuxt.jsとポート番号が競合する
結論
###1.Vagrantfileへ追記をする
まず、仮想環境のあるディレクトリに移動してください。
Vagrantfileがあると思いますのでテキストエディターで起動し、以下の追記をお願いします。
Vagrantfile
//省略
config.vm.network "forwarded_port", guest: 3000, host: 3000
config.vm.network "forwarded_port", guest: 5000, host: 5000 #追記！
//省略
###2.Railsで起動をする際に-b 0.0.0.0を指定する。
大前提としてrails new --apiができており、アプリケーションのディレクトリは完成しているものとします。所定の場所に移動したら、ターミナルで以下を入力し、起動してください。
rails s -b 0.0.0.0 -p 5000
###3.Nuxt.jsのpackage.jsonを書き換える
こちらも大前提として、npx create-nuxt-appができているものとします。所定の場所に移動する前に、テキストエディターでディレクトリを開き、直下のpackage.jsonを開いてください。
//省略
"scripts": {
"dev": "HOST=0.0.0.0 PORT=3000 nuxt", //変更後
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
//省略
これができたら、通常通り
npm run dev
(yarnでインストールしている方は違うかも…？)
そして、locallhost:3000にアクセス。
自分はこれで解決し、無事仮想環境でもRails/Nuxtの同時起動ができました！
参考
初学者ながら加筆させていただいた部分としましては、
- Rails s時の書き方
- Vagrantfileの書き方
以上になります。
超独学プログラマ様の以下の記事に救われました。
本当に何日も悩みましたので・・・
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
https://blog.cloud-acct.com/posts/spa-nuxt-firstapi/
最後に、初投稿となりますので至らない点もあるかと思います。
何かお気づきの点がございましたら、後学のためご指摘をお願いいたします。
この記事が誰かのためになれば幸いです。