RailsApiアプリの公開。RailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで今回達成することアプリの公開のために、Herokuへデプロイのセッティングを行っていき、実際にデプロイを行います。今まではNuxtプロジェクトを編集してきましたが、あくまでRailsプロジェクトとしてHerokuにデプロイします。これでRailsApiアプリがインターネット上に公開されます。この記事の読み方ターミナル上のコマンドは、RailsとNuxtで以下のように分けます。コマンド【Nuxt】本番環境のaxiosのセッティング本番環境でaxiosが使えるように、http通信に使うURLを設定します。nuxt.config.jsを開きましょう。...}process.env.BASE_URL本番環境では、axiosのベースURLをHerokuの環境変数から読み込みます。'/'開発環境では@nuxtjs/proxyモジュールで正常に動くので、わざわざbaseURLを設定しなくても良いのですが、空白になってしまうと気持ち悪いのでルートパスを代入しています。【Nuxt】ESLintを開発環境のみで利用する設定を行うNuxtプロジェクト作成時にESLintを導入すると、nuxt.config.jsのdevModulesに'@nuxtjs/eslint-module'が記載されています。今のままHerokuにデプロイすると、ビルド時にESLintなんでモジュールはないよ😡と激おこされます。これはESLintモジュールが開発環境のみにインストールされているからです。そこで、'@nuxtjs/eslint-module'を下記のように移動しましょう。configHerokuに環境変数をセットするさて、Nuxtから離れましょう。ターミナル上でRailsプロジェクトに移動してください。HerokuにBASE_URLの環境変数をセットします。URLはご自身のHerokuアプリのURLに書き換えてコマンドを実行してください。BASE_URL="https://spa-myapp8.herokuapp.com"確認してみましょう。BASE_URLが出てこれば環境変数はセットされています。https://spa-myapp8.herokuapp.com...もし間違えても、環境変数名が同じ場合は上書きされますので安心して実行してください。【Rails】デプロイ前のNuxtビルド設定を行うビルドとは、JSファイルとCSSファイルをプロダクション向けに縮小することです。今のままHerokuにデプロイしても、Nuxtアプリのビルドは行われず、Railsのpublicディレクトリに入っている静的ファイルのみしか表示されません。これを解決するために、Rails側にpackage.jsonファイルを作成し、Herokuデプロイ時にNuxtアプリをビルドする設定を行っていきます。Railsのルートディレクトリ直下(Gemfileと同じ階層)にpackage.jsonファイルを作成してください。}}コードのポイントlicense特段必要ありませんが、念のため使用ライセンスは許可しない。nodeとyarnのバージョン開発環境と一致させておいたほうが良いでしょう。下記のコマンドで開発環境のバージョンを調べられます。-v1.17.3postinstallHerokuデプロイ時のパッケージインストール完了後に呼び出されます。buildを実行してね。YarnHerokuにビルドパックを追加するビルドパックとは、アプリケーションを動かすフレームワークのこと?です。上手く説明できません。Herokuに委託します。ビルドパックRailsプロジェクトをHerokuにデプロイ済みなので、今現状はビルドパックとして自動的にRubyがインストールされています。ここに、Nuxtを動かすNode.jsを追加します。heroku/ruby--indexbuildpacks:addのコマンドオプションです。Nodeを先に実行してNuxtのファイル群をRailsで表示する必要があるため、Rubyより前の「1」としています。Centerコミットしとくさてここまでの編集をコミットしましょう。Railsプロジェクト上でコミットしますのでお間違えのないように。"heroku_deploy_settings"マージしてHerokuにデプロイしようブランチを作っている方は、マスターブランチにこれまでの変更を合算(マージ)しましょう。herokuHerokuデプロイのログに、ちゃんとビルドが表示されていれば上手くいっています。38.94s...Heroku上でちゃんと動いているか、ブラウザで確認してみてください。openOK!これにて完了です。「Auth0」で作る!認証付きシングルページアプリケーションこの本はユーザー認証まで作れておすすめです。本屋はどうしても初心者向けの本が多いため、このような実践的な技術書は貴重です。僕も挑戦しましたが「Auth0」のカスタマイズに苦戦したため、今回のアプリでは一からユーザーログイン機能を作ります。そのお話はもう少し先で。情報が古いところこの本では、cross-envモジュールを使って環境変数のNODE_ENVを埋め込んでいました。Nuxt.2.8ではprocess.env.NODE_ENVの中に、デフォルトで’development’の文字列が入っているため、cross-envはインストールしていません。buildを実行すると’production’の文字列に切り替わります。buildを実行してみてください。ターミナル上に’production’の文字列が表示されるはずです。apiアプリをインターネット上に公開することができました。以上でチャプター「RailsとNuxtを共存させる」を終わります。次回からは、データベース設計とRailsモデル開発を行っていきます。apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。随時お伝えしてまいります。apiとNuxt.jsでSPA開発」のデモアプリを開発中...。Awesomeもインストールするぜ#04初めてのRailsApiアプリの公開。