今回達成すること

下記3~5の手順を行って、Nuxt.jsのHerokuデプロイを完了します。

1. Nuxt.jsのDockerfileに本番用のコマンドを追記する（前回）
2. Nuxt.js用heroku.ymlの作成（前回）
3. Herokuアプリケーションの作成（今回）
4. Nuxt.jsアプリをHerokuにpushする（今回）
5. RailsにAPIドメインをセットする（今回）

この記事を完走すると"Hello"を返すAPIアプリケーションが完成します。

やっとですね。それでは作業に入りましょう。

Herokuにアプリケーションを作成する

まずはNuxt.jsを動かすHerokuのアプリケーションを作成しましょう。

今回のこの記事でインストールした--manifestオプションを使用して実行します。

front $ heroku create <任意のアプリ名-front> --manifest

# 筆者の場合
# heroku create udemy-demoapp-v1-front --manifest

このオプションをつける事でHerokuアプリのstackがcontainerに変更されます。

front $ heroku stack

 cedar-14
* container
...

HerokuのリモートリポジトリのURLが正しく設定されているか確認しておきましょう。

front $ git remote -v

heroku	https://git.heroku.com/<任意のアプリ名>.git (fetch)
heroku	https://git.heroku.com/<任意のアプリ名>.git (push)
...

もし表示されない場合は、こちらの記事#リモートリポジトリが無い場合を参考に追加してください。

Nuxt.jsをHerokuにpushする

Nuxt.jsアプリをHerokuにpushします。

front $ git push heroku master

アプリを確認してみましょう。

front $ heroku open

OK!ボタンが表示されました。

RailsにAPIドメインをセットする

今のままでは本番環境のCORS設定ができていません。

設定するには、Railsのcors.rbファイルに本番環境用のドメインを渡す必要があります。

api/config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # このAPI_DOMAINの環境変数に本番用ドメインを設定する
    origins ENV["API_DOMAIN"] || ""

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Railsの「api」ディレクトリに移動しましょう。

front $ cd ../api

環境変数をセットします。

api $ heroku config:set API_DOMAIN=<Nuxt.jsアプリの本番用ドメイン>

# 例）heroku config:set API_DOMAIN=myapp.herokuapp.com

確認しましょう。これが最終的なRailsの環境変数です。

api $ heroku config

API_DOMAIN:               <Nuxt.jsアプリの本番用ドメイン>
DATABASE_URL:             postgres://<database url>
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_LOG_TO_STDOUT:      enabled
RAILS_MASTER_KEY:         <マスターキー>
RAILS_SERVE_STATIC_FILES: enabled

APIアプリを動かしてみよう

Nuxt.jsのアプリケーションを開いて動作を確認してみましょう。

api   $ cd ../front
front $ heroku open

やった。正しいレスポンスが取れています。

rootディレクトリをGitHubにpushしとく

これにて作業は終了です。

コミット履歴の変更があったため、「root」ディレクトリをGitHubにpushしておきましょう。

front $ cd ..
root  $ git commit -am "finished_HelloApiApp_deployment"
rrot  $ git push

このチャプターのまとめ

「Heroku.ymlを使ったDockerデプロイ」では、開発環境に構築したDocker環境のアプリケーションを、Herokuにデプロイしました。

• Herokuにアカウントを作成し、HerokuCLIをインストール
• Railsのpumaセッティングとheroku.ymlを作成
• HerokuCLIのmanifestを使ってRailsをデプロイ完了
• Nuxt.jsのDockerfileとheroku.ymlを本番環境用に編集
• Nuxt.jsのデプロイを完了。"Hello"APIアプリケーションの完成。（今ここ）

次回予告

これでやっと、開発環境と本番環境が構築できました。

作成した"Hello"APIアプリケーションは、本番環境を構築するためのテストアプリです。（先で削除する）

これからはもっとアプリっほい実装を行っていきますね。

さて次回は「Userモデリング開発（仮）」です。

どうぞお楽しみに。