HerokuでRailsを動かしたいんです（再録）

この記事は2019年08月31日 に公開した記事の内容を少しだけ更新してます

RailsのアプリをHerokuにデプロイして実行する上で得た知見を色々残します

環境

• Ruby 2.6.2
• Rails 5.2.3
• yarn 1.16.0
• vue-cli 2.9.6

備忘録

HerokuのDB(production環境のDB)はPostgreSQLにする

Railsはデフォルトでsqlite3を使うようになっている

gem 'sqlite3'

だけどもHerokuはsqlite3を使わせないようにしているのでそのままだとdeployできない
その代わりにpostgresqlが無料で使えるので、ローカルはsqlite3、Herokuはpostgresqlを使うようにGemfileを修正する

gem 'pg', '~> 1.1', '>= 1.1.4', group: :production
group :development, :test do
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
end

APIキーはcredentials.yml.encに

credentials.yml.encはRails 5.2系から実装された秘密情報を記述するファイル

apiのアクセスキーのように他者から見られたくない情報を書き込み、 一緒に作成されるmaster.keyによって復号化されるという構造

使い方は以下の記事を参考にしました↓
https://qiita.com/yuuuking/items/53a37a2e998972be32b8

BootstrapVueでwarningがでる

[BootstrapVue warn]: Multiple instances warn.js: 11 of Vue detected!
You may need to set up an alias for Vue in your bundler config.
See: https://bootstrap-vue.js.org/docs#using-module-bundlers

「インスタンスが複数あるんだけど！」って怒られる
この時のapp/javascript/packs/home.jsでのimportの設定は以下

import Vue from 'vue/dist/vue.esm.js'    // これがダメらしい
import BootstrapVue from 'bootstrap-vue'

BootstrapVue公式で解決策を書いてくれてたのでそれにならう

config/webpack/environment.jsを以下のように編集して、

// Vueのaliasをセットする
environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

んでもってapp/javascript/packs/home.jsのimportを変更すると直った

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

twitter gemでapiを叩く

twitter apiをカンタンに叩けるgemがあった