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

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

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

エラー内容

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

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

対処内容

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

config/initializers/carrierwave.rb

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

AWS Cloud9でRuby on Railsを始める

AWS Cloud9とは

AWS(Amazon Web Services) Cloud9はブラウザから使える、クラウド型の統合開発環境(IDE)です。クラウド上に開発環境を設けることによって、MacやWindowsなどのOSの違いに関わらず、共通の開発環境で開発を進められ、また開発環境の構築というハードルを一気にクリアして、素早くアプリケーション開発を開始できます。

Cloud9を使う上での注意点
・対応ブラウザが「Google Chrome」か「Firefox」だけなので、それ以外のブラウザをお使いの場合はGoogle Chromeをインストールしましょう。
・最初にクレジットカードの登録が必須となります。

AWS Cloud9 料金
AWS アカウントを作成すると、1年間は無料で利用できます。それ以降もAWS Cloud9自体には料金はかかりませんが Amazon EC2 インスタンスを使用する場合は、使用量に対して料金が発生します。以下のリンク内の「料金の例」にもあるように、1か月に90時間利用する場合でも、1.85ドル(約200円)の料金となります。自前のサーバーにSSH経由で接続する場合は料金はかかりません。
https://aws.amazon.com/jp/cloud9/pricing/

AWS Cloud9のセットアップ

それでは、AWS Cloud9を利用を開始するために、以下のリンクより「初めてのセットアップ」に進みましょう。すでにAWSアカウントを取得済みの場合は適宜スキップしてください。
https://aws.amazon.com/jp/cloud9/getting-started/

AWS アカウントを作成する

手順
1)「AWS アカウントを作成する」リンクをクリックします。
2)登録するメールアドレス、パスワード、確認用パスワード、アカウント名を入力します。
3)アカウントの種類「パーソナル」に変更して、必要記入情報を入力し、同意にチェックを入れます。
4)クレジットカード情報を入力します。
5)電話による確認フォーム画面でセキュリティチェックを入力します。
6)Amazonからの自動音声電話を取り、キーパッドで表示されている4桁の番号を入力します。
7)ベーシックプラン(無料)を選択します。
これで、AWS アカウント作成完了です。

AWS IAMユーザーを作成する

IAM(Identity and Access Management)はAWSのリソースへ安全にアクセスするためのユーザー設定です。

手順
1)画面右上の「コンソールへログイン」を選択します。
2)AWSアカウント情報を入力してログインします。
3)上部「サービス」メニューの「セキュリティ、アイデンティティ、コンプライアンス」項目の「IAM」をクリックします。
4)左メニューの「ユーザー」を選択します。
5)「ユーザーを追加」を押します。
6)ユーザー名を入力し、アクセスの種類の「プログラムによるアクセス」と「AWS マネジメントコンソールへのアクセス」にチェックを入れます。※コンソールのパスワードは任意で設定してください。
7)「グループの作成」を押します。
8)グループ名を入力して、検索から探し「AWSCloud9Administrator」と「AmazonEC2FullAccess」にチェックを入れて「グループの作成」を押します。
9)確認画面で「ユーザーの作成」を押して作成完了です。
※ここでパスワードを表示させてコピーをして控えておきます

10)作成完了画面に表示されているリンクをクリックして作成したユーザーで再ログインをします。
※自動生成パスワードにした場合はここで、新しいパスワードを設定。

AWS Cloud9 環境を作成する

手順
1)IAMユーザーでログインをします。
2)上部「サービス」メニューの「開発者用ツール」項目の「Colud9」をクリックします。
3)「Create environment」をクリックします。

4)Nameを入力してします。Descriptionは任意です。
5)「Configure settings」ではデフォルトのままNext Stepを選択します。
 ※「Environment type」を「Connect and run in remote server (SSH)」を選択して自前のサーバーに接続する場合は料金はかかりません。
6)最終確認画面で問題なければCreate environmentを選択します。
7)以下の画面が表示されたらColud9導入は完了です。

Cloud9でRailsアプリを起動する

さっそく、導入されたCloud9でRailsアプリを作成して、起動させてみましょう。すでにCloud9にはRubyやRailsはインストールされています。
それを確認するためにターミナルでruby -vrails -vと入力してみると、それぞれのバージョンが表示されるかと思います。
次にRailsアプリを作成するためにrails new アプリ名のコマンドを実行すると、必要なファイルが生成されます。

そして、cd アプリ名のコマンドで作成したアプリのディレクトリに移動して、rails serverでサーバーが起動します。

起動したアプリを確認するためには①上部にある「Preview」から「Preview Running Application」をクリックすると、右下にブラウザが表示され、②ここで新しいウィンドウで表示させるためのボタンをクリックします。

すると、、、

これで成功です!それでは楽しいRails開発ライフを!!

【Rails5】Carrierwave + Fog で AWS S3 に画像をアップロードする

CarrierWave を利用することで手軽に画像アップロードをおこない、fog と連携してクラウド上にあるAWS S3へのアップロードをおこなえるようにします。ちなみに、S3 は新規登録から1年間は無料で利用できます。
前提として、Rails アプリにあらかじめ既存モデル(本記事ではArticle)があり、 AWS S3 でバケットを作成してある状態で進めていきます。

Amazon S3
https://aws.amazon.com/jp/s3/
CarrierWave
https://github.com/carrierwaveuploader/carrierwave
Fog::Aws
https://github.com/fog/fog-aws
rmagick
https://github.com/rmagick

環境はこちらです

準備

本記事で必要な gem をインストールします。RMagickは画像処理を行うライブラリで、CarrierWaveからサムネイルなどを作るときに必要になります。

Gemfile

画像保存用のカラムを追加するためのマイグレーションファイルを生成します。本記事では Article テーブルに追加します。

db/migrate/20xxxxxxxx_add_image_to_articles.rb

アップローダの作成

次のコマンドで生成されたアップローダーをそれぞれの好みで設定してください。本番環境もしくはステージング環境で s3 に送り、開発環境等では public 配下に一時的に保存します。

app/uploaders/image_uploader.rb

モデルとの紐づけ

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/article.rb

AWSの設定

config/initializers/carrierwave.rb を作成して、以下のように設定します。

config/initializers/carrierwave.rb

ちなみにこちらは Heroku に環境変数を入れる時のコマンドです。

ファイルのアップロード

モデル.persisted?は保存済みかどうかをチェックしてくれます。<%= f.file_field :image %> でアップロードできます。あとはお好みですが、バリデーション時も値を保持させるために <%= f.hidden_field :image_cache %> や、既存の画像を削除したい場合の <%= f.check_box :remove_image %> を追加します。

app/views/articles/_form.html.erb

ストロングパラメータの設定もしておきます

app/controllers/articles_controller.rb

画像の表示

こちらもお好みですが、もし画像がない場合は no_image.png を表示させます。その画像は app/assets/images/ などに置いておきます。

app/views/articles/show.html.erb

はい、今回は以上です!ご覧いただきありがとうございました!😆