Heroku | RemoNote

Herokuのアプリ名とGitリモートをコマンドラインから変更する

herokuのアプリ名を変更する際に、上の画像のように、herokuのダッシュボードから変更しようとすると、Warningが出て、「変更後はremotesも変更が必要」と言われるので、手動で変更してやらないといけません。その方法でも可能ではありますが、herokuのコマンドで $ heroku apps:rename ~ を使えば、アプリ名とGitリモートurlも一発で変更してくれます。

まずはpush先となるリモートのurlの確認です。ここのリモートurlが通っていなければ、 $ git push heroku master のコマンドが通らないことになります。

$ git remote -v

heroku https://git.heroku.com/old-name.git (fetch)

heroku https://git.heroku.com/old-name.git (push)

そして、変更したい新しいアプリ名をつけて $ heroku apps:rename ~ のコマンドを打つとこのようなメッセージが出て、gitリモートも変更されます。

$ heroku apps:rename new-name

Renaming remonote to new-name... done

https://new-name.herokuapp.com/ | https://git.heroku.com/new-name.git

Git remote heroku updated

変更されているのが確認できます。

$ git remote -v

heroku https://git.heroku.com/new-name.git (fetch)

heroku https://git.heroku.com/new-name.git (push)

herokuのダッシュボードからも変更されているのが確認でき、https://new-name.herokuapp.comでアクセスできるようになります。

簡単ですが以上です！ご覧いただき、ありがとうございました！！😌

【Bootstrap】Jambotron（ジャンボトロン）の画像がRails本番環境で表示されない問題の対処

Rails開発でBootstrapのJambotronを使って、画像を配置したとき、開発環境では問題なく表示されましたが、Herokuで本番環境にpushして、確認をしてみると、うまく表示されていなかったので、そんな時の対処方法をメモいたします。

対処前の状態

views

<h1>Hello Jumbotron!</h1>

<p>Thanks to wacthing our website!</p>

</div>

画像はapp/assets/images/配下に置いています。

css

.jumbotron {

padding-top: 0px;

background: url(hoge.jpg);

background-size: cover;

background-position: 50% 50%;

}

これで、開発環境では画像が表示されていました。

本番ではエラー

しかし、本番でも確認しようとHerokuにpushして、ブラウザを見てみると、画像が表示されていなかったので、$ heroku logs -tコマンドでログを確認してみると、、、

2018-10-13T01:10:13.141766+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] Started GET "/assets/hoge.jpg" for 106.161.179.190 at 2018-10-13 01:10:13 +0000

2018-10-13T01:10:13.142821+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1]

2018-10-13T01:10:13.142893+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] ActionController::RoutingError (No route matches [GET] "/assets/hoge.jpg"):

2018-10-13T01:10:13.142956+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1]

2018-10-13T01:10:13.143059+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call'

2018-10-13T01:10:13.143061+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'

2018-10-13T01:10:13.143063+00:00 app[web.1]: [d1d26a9d-d270-4e7f-a58c-b6c4171572d1] vendor/bundle/ruby/2.4.0/gems/railties-5.2.1/lib/rails/rack/logger.rb:38:in `call_app'

RoutingErrorが出ていました！

対処方法

image_urlというRailsメソッドで呼び出してやることで、本番環境でも、問題なく表示されるようになりました！

css

1 2	//background: url(hoge.jpg); background: image-url("hoge.jpg");

ログにもエラーは出なくなりました。

2018-10-13T01:16:42.339096+00:00 heroku[router]: at=info method=GET path="/assets/application-41a8a0c910d146b52xxxxxxx91dd1b216f549ebdfaxxxxxxx.css" host=myapp.herokuapp.com request_id=404a0a4c-58ed-4a27-a93a-cef5e4e70829 fwd="106.161.179.190" dyno=web.1 connect=1ms service=1ms status=304 bytes=48 protocol=https

2018-10-13T01:16:42.687836+00:00 heroku[router]: at=info method=GET path="/assets/hoge-399a267db9e5c9efaf01f2903e71700274sssssccccsszzz050fe4c18df8973982d5ef58.jpg" host=myapp.herokuapp.com request_id=7c0334fe-d7d8-4055-8ba6-b7070c83bc80 fwd="106.161.179.190" dyno=web.1 connect=1ms service=2ms status=304 bytes=48 protocol=https

その他の解決方法としては、app/assetsではなくて、public/assetsに画像を配置するという方法があります。ですが、これではRailsの推進するAssetPipelineが適用されません。よって、AssetPipelineの仕組みを使って、よりブラウザからの読み込み速度を上げるためにはapp/assets/images ディレクトリに画像を置くことが良いと言えます。

以上です！
どなたかのお役に立てば幸いです！！

「本番環境でCarrierWaveでS3にアップロードした画像が表示されない問題」の対処

Rails + Heroku + CarrierWave + S3 で、画像をアップロードしても、本番環境では画像が正しく表示されなかったので、その対処した時のメモを残したいと思います。

アップロード自体の方法はこちらの記事をご覧ください。

エラー内容

ブラウザで見るとこのようになって、正常に表示されません。

Amazon S3の管理画面で確認すると、問題なくアップロードはされていました。

対処内容

原因はconfig/initializers/carrierwave.rb内の、urlの指定が間違っていたからでした。以下のように asset_hostのurlの指定を修正すると、無事にストレージから画像を取得できました。そもそも、fog_directoryだけでも、画像の表示はできるようなので、asset_hostの１行を削除しても、問題ありませんでした。

config/initializers/carrierwave.rb

require 'carrierwave/storage/abstract'

require 'carrierwave/storage/file'

require 'carrierwave/storage/fog'

CarrierWave.configure do |config|

if Rails.env.production?

config.storage :fog

config.fog_provider = 'fog/aws'

config.fog_directory = 'バケット名'

- config.asset_host = 'https://s3.amazonaws.com/バケット名' #url間違い

+ config.asset_host = 'https://バケット名.s3.amazonaws.com'　#このように修正、もしくはこの行を削除

config.fog_credentials = {

provider: 'AWS',

aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],

aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],

region: ENV['AWS_REGION'],

path_style: true

}

else

config.storage :file

config.enable_processing = false if Rails.env.test?

end

CarrierWave::SanitizedFile.sanitize_regexp = /[^[:word:]\.\-\+]/

以上です！どなたかの参考になれば幸いです！
ありがとうございました！☺️

Herokuへデプロイ時に「assets precompile error」$ npm install yarn で対処

Rails + webpacker で heroku へ push した時に、「assets:precompile」に関するエラーで失敗した時の対処メモです。

バージョンはこちらです

rails 5.2.0

webpacker 4.0.0

yarn 1.10.1

npm 6.2.0

エラー

$ git push heroku master

Counting objects: 213, done.

Delta compression using up to 8 threads.

Compressing objects: 100% (205/205), done.

Writing objects: 100% (213/213), 90.83 KiB | 0 bytes/s, done.

Total 213 (delta 123), reused 0 (delta 0)

remote: Compressing source files... done.

remote: Building source:

remote:

remote: -----> Ruby app detected

remote: -----> Compiling Ruby/Rails

remote: -----> Using Ruby version: ruby-2.4.4

remote: -----> Installing dependencies using bundler 1.15.2

remote: Running: bundle install --without

## 省略 ##

remote: -----> Installing node-v8.10.0-linux-x64

remote: -----> Installing yarn-v1.5.1

remote: -----> Detecting rake tasks

remote: -----> Preparing app for Rails asset pipeline

remote: Running: rake assets:precompile

remote: yarn install v1.5.1

remote: [1/4] Resolving packages...

remote: [2/4] Fetching packages...

remote: info There appears to be trouble with your network connection. Retrying...

remote: I, [2018-10-08T04:42:21.754233 #867] INFO -- : Writing /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/public/assets/application-d01c56d3d12dfb0fcefff02027e25e98ca40c833dad88e3b2f71cde25d5d28fe.js

remote: I, [2018-10-08T04:42:21.754901 #867] INFO -- : Writing /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/public/assets/application-d01c56d3d12dfb0fcefff02027e25e98ca40c833dad88e3b2f71cde25d5d28fe.js.gz

remote: I, [2018-10-08T04:42:35.317549 #867] INFO -- : Writing /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/public/assets/application-8f94444af718339458ead213c1af2890bcb5388de6282ae7baab395965de1244.css

remote: I, [2018-10-08T04:42:35.318391 #867] INFO -- : Writing /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/public/assets/application-8f94444af718339458ead213c1af2890bcb5388de6282ae7baab395965de1244.css.gz

remote: Compiling…

remote: Compilation failed:

remote: /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-6a59354abcd1/lib/webpacker/webpack_runner.rb:11:in `exec': No such file or directory - /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/node_modules/.bin/webpack (Errno::ENOENT)

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-6a59354abcd1/lib/webpacker/webpack_runner.rb:11:in `block in run'

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-6a59354abcd1/lib/webpacker/webpack_runner.rb:10:in `chdir'

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-6a59354abcd1/lib/webpacker/webpack_runner.rb:10:in `run

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/vendor/bundle/ruby/2.4.0/bundler/gems/webpacker-6a59354abcd1/lib/webpacker/runner.rb:6:in `run'

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/bin/webpack:18:in `block in <main>'

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/bin/webpack:17:in `chdir'

remote: from /tmp/build_a1dd18133eb9ea003adb18d58b2f55fc/bin/webpack:17:in `<main>'

remote:

remote: !

remote: ! Precompiling assets failed.

remote: !

remote: ! Push rejected, failed to compile Ruby app.

remote:

remote: ! Push failed

remote: Verifying deploy...

remote:

remote: ! Push rejected to myapp.

remote:

To https://git.heroku.com/myapp.git

! [remote rejected] master -> master (pre-receive hook declined)

error: failed to push some refs to 'https://git.heroku.com/myapp.git'

対処

こちらの記事を参考にして、 $ mpm install yarn -gコマンドを実行。npm 経由で yarn をインストールし直しました。

$ npm install yarn -g

/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js

/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js

+ yarn@1.10.1

added 1 package in 2.032s

そして再度、プッシュ。

remote:

remote: -----> Compressing...

remote: Done: 83.6M

remote: -----> Launching...

remote: Released v25

remote: https://myapp.herokuapp.com/ deployed to Heroku

remote:

remote: Verifying deploy... done.

To https://git.heroku.com/myapp.git

85a101a..54a36f4 master -> master

デプロイ成功しました！
以上です！😀

【Rails】GitHubのアカウント登録から、Herokuへデプロイまで

ソースコード管理システムのGitHubを活用して、Ruby on Rails アプリケーション開発を効率化しましょう！また、Herokuは無料で使えるクラウドプラットフォームで、Webアプリの公開が簡単にでき、小規模サイトや個人ブログ程度にも使えます。本番アプリとは別でステージング環境も無料で追加できるので、おすすめです。

GitHub アカウント登録

１）まずは、GitHubのトップページにアクセスして、ユーザ名とメールアドレス、パスワードを入力してSign upします。
２）Create an accountをクリック
３）「Choose your personal plan」で無料プランのUnlimited public repositories for free.を選択し、Continue。
４）経験について答えて、Submit
５）登録したメールアドレス宛に認証メールが届くので、そのメールに記載のURLもしくはボタンをクリックして登録完了です。

Gitリポジトリの作成

ルート・ディレクトリで次のコマンドを打ち、Gitリポジトリの新規作成、または既存のGitリポジトリの再初期化を行います。

1	$ git init

Gitはすべてのファイルの変更履歴を管理しますが、管理対象に含めたくないファイルは .gitignore で管理します。ここではRails Tutorial を参考にさせていただきます。

.gitignore

# Ignore bundler config.

/.bundle

# Ignore bundler gems.

vendor/bundle

# Ignore the default SQLite database.

/db/*.sqlite3

/db/*.sqlite3-journal

# Ignore all logfiles and tempfiles.

/log/*.log

/tmp

# Ignore other unneeded files.

doc/

*.swp

.project

.DS_Store

.idea

.secret

Gitに追加、コミット

次のコマンドで、カレントディレクトリ（自分の今いるディレクトリ）以下の全てのファイルをステージングエリアに追加します。「.」がカレントディレクトリを示します。

1	$ git add .

「-m」フラグで、コミットメッセージをつけて変更をコミット(保存)します。

1	$ git commit -m "initialize repository"

※「git add .」と「git commit -m」を一度に行う場合は「git commit -a -m “コミットメッセージ”」です。

GitHubにリモートリポジトリの作成 ~ プッシュ

次にGitHubのリモートリポジトリの作成を行います。

ブラウザで GitHub を開き、 New repository をクリック => Repository name を入力 => Create repository をクリックで作成できます。

次のコマンドでルートディレクトリから、リモートリポジトリを追加することができます。
ここではRepository nameを「test」、 GitHubのusernameを「remonote」としました。それぞれ適宜、変更してください。

1	$ git remote add origin https://github.com/remonote/test.git

登録されているリモートリポジトリの確認は次のコマンドをうつ。

$ git remote -v

origin https://github.com/remonote/test.git (fetch)

origin https://github.com/remonote/test.git (push)

間違えた時にリモートリポジトリを削除する場合はこれです

1	$ git remote rm [Repository name]

続いて次のコマンドで、ローカルリポジトリを、リモートリポジトリにプッシュ（同期)します。

1	$ git push -u origin master

Username と Password を聞かれるのでGitHubのアカウント設定のものを入力。

herokuへdeploy

Gemfileに、下記を追記します。pgはherokuで利用するデータベースPostgreSQLで、rails_12factorは、herokuでまとまったアセットを利用するために使用します。

Gemfile

group :production do

gem 'pg', '1.0.0'

gem 'rails_12factor', '0.0.3'

end

gemのインストール

1	$ bundle install

そして、上記の追加分をコミット。

1	git commit -a -m "add gems for heroku"

続いて、herokuのアカウントを作成してください。
https://dashboard.heroku.com/
そしてルートディレクトリで次のコマンドを実行。

1	$ heroku login

Email と Password を入力。

Herokuに新しいアプリケーションを作成。heroku createの後ろにアプリ名を指定します。指定がないとHeroku側で適当なアプリ名が付けられますが、後から変更も可能です。

$ heroku create test

Creating ⬢ test... !

▸ Name test is already taken

すでにあるからっておこられました。Heroku全体でユニークにする必要があるようです。そのままURLにも使われるので、他のユーザーに使われていないアプリ名が必要ですね。

$ heroku create test-remo

Creating ⬢ test-remo... done

https://test-remo.herokuapp.com/ | https://git.heroku.com/test-remo.git

そしてHerokuへプッシュすればデプロイとなりますが、、、、

1	$ git push heroku master

remote: In Gemfile:

remote: sqlite3

remote:

remote: !

remote: ! Failed to install gems via Bundler.

remote: ! Detected sqlite3 gem which is not supported on Heroku:

remote: ! https://devcenter.heroku.com/articles/sqlite3

remote: !

remote: ! Push rejected, failed to compile Ruby app.

remote:

remote: ! Push failed

remote: Verifying deploy...

remote:

remote: ! Push rejected to test-remo.

remote:

To https://git.heroku.com/test-remo.git

! [remote rejected] master -> master (pre-receive hook declined)

error: failed to push some refs to 'https://git.heroku.com/test-remo.git'

Herokuではsqlite3はサポートしていないということで拒否されました。以下のようにsqlite3は開発環境の指定をします。

Gemfile

1	gem 'sqlite3', group: :development

コミットしてから再度、Herokuにプッシュしたら今度はデプロイに成功しました。

remote: https://test-remo.herokuapp.com/ deployed to Heroku

remote:

remote: Verifying deploy... done.

To https://git.heroku.com/test-remo.git

* [new branch] master -> master

あとはHerokuでもマイグレーションを実行して、シードデータを流す場合は、追加でコマンド入力してください。

1	$ heroku run rails db:migrate

1	$ heroku run rails db:seed

gem ‘seed-fu’使っている場合はseed_fuですね。

1	$ heroku run rails db:seed_fu

これで $ heroku open または https://アプリ名.herokuapp.com でブラウザからアクセスできます。
お疲れ様でした！