はじめに

オリジナルアプリの完成が近づいてきました。もっともっと盛り込みたい機能が山ほどあるのですが、転職活動のほうも疎かにできないので、とりあえずAWSにはデプロイしようということで作業を進めていました。

AWSにデプロイするにあたって、アプリの改修などをした際に、結構たくさんのコマンドを打たなければならなくて、大変なので自動デプロイを導入しました。

Capistranoという自動デプロイツールを使って導入したのですが、完成後、手動デプロイしていた時にはしっかり表示されていたアプリ内で使われている画像たちが表示されなくなってしまいました。

~~明確な理由はわからないまま、自分なりに仮説を立てて解決できましたので記事に残しておきます。~~
よろしくお願いします。

画像が表示されなくなった

私の画像はapp/assets/imagesの配下に置いていて、img_tagで呼び出していました。
手動でデプロイを行なっていた時は、ちゃんと呼び出されていたのですが、自動デプロイをした後に小さな画像が壊れたようなマークだけが表示されて、目的の画像が表示されていなくなりました。

確実に自動デプロイの過程で問題が生じたとしか考えられませんでしたので、その辺を振り返っていたところ、そういえばアプリのファイルたちの階層を一段階深くしたために、パスを書き換えた作業を思い出し、これが怪しいんじゃないかと思いました。

解決

もしかするとパスが変わっているのかもと思い、その周辺をネットで嗅ぎ回っていたところ、やはり自動デプロイの際に画像がコンパイルされ、パスが変わるのだとおっしゃっている方がいました。あまり意味はわかっていませんが。。。

その方が言うには↓（下記のコードは私のコードをもとに作成しています）

<%= image_tag "Textbook student.png" %>

このようなコードを

<%= image_tag asset_path("Textbook student.png"%>

というふうに書き換えることで解決できるそうなので試してみました。
しかし、私の場合うまくいきませんでした。。。

パスが悪いのかどうかわからないですが、他にパスを書き換えるとしたら、、、と考えていたら一つ思い浮かびました。
もしpublicフォルダの配下に置いたらどうなるのかな、と思いまして、画像たちをpublicフォルダ配下へお引越しさせ、パスを下記のように書き換えました。

<%= image_tag "/Textbook student.png" %>

public配下の時は相対パスで/を置いてあげるだけで場所を示せるのですね。
初めて知りました。

これでどうだと言わんばかりにデプロイしてリロード押したら、見事に画像の表示に成功しました！

本当の解決

実はこの記事を書いた後に、理由が判明しました。
自動デプロイをした際にいじっていたNginxの設定に記述ミスがありました。
こちらその設定画面↓

upstream app_server {
  # Unicornと連携させるための設定
  server unix:/var/www/リポジトリ名/shared/tmp/sockets/unicorn.sock;
}

# {}で囲った部分をブロックと呼ぶ。サーバの設定ができる
server {
  # このプログラムが接続を受け付けるポート番号
  listen 80;
  # 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない
  server_name Elastic IP;

  # クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォルトは1メガなので大きめにしておく
  client_max_body_size 2g;

# 接続が来た際のrootディレクトリ
  root /var/www/リポジトリ名/current/public;

# assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    root /var/www/リポジトリ名/current/public;
  }

  try_files $uri/index.html $uri @unicorn;

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;
}

コメントアウトで「assetsファイル(CSSやJavaScriptのファイルなど)にアクセスが来た際に適用される設定」と書かれている中の、リポジトリ名に置き換えるところを、置き換え忘れていました。

通りでpublicだったら反映されたわけですね。。。
今後気をつけたいと思います。

最後に

assetsの配下に置いていた画像も実は一部ちゃんと表示はできていたので、パスはあまり関係なかったと思います。画像の容量が大きかったのかなと言う気もします。わかる方がいればコメントお願いします。
ネットを徘徊していた時に思ったことは、本来publicの使い方とassets/imagesの使い方はそれぞれ特徴があり、どこに画像をおくべきかはいろんな意見があるように感じました。

またちゃんと理解した時に記事書けたらなと思います。