How to show images in fly.io

desc.md

fly.ioで画像を表示する

サンプルアプリ

https://rails-assets-sandbox.fly.dev/

GitHubリポジトリ

https://github.com/JunichiIto/fly-io-sandbox

作成手順

1. Getting Started · Fly Docs の手順にしたがってアプリを作成する

• "Scaffold and Style a List of Names" のところまで
• https://github.com/JunichiIto/fly-io-sandbox/commit/be718b0a6ebcb9f634aff0f090939e9bea2ef228
• https://github.com/JunichiIto/fly-io-sandbox/commit/638fccde3af48e9b054f670c2294e1fd0f89cf94

2. dartsass-railsをインストール

• READMEの手順通りに実行
  • ./bin/bundle add dartsass-rails
  • ./bin/rails dartsass:install

3. 画面に画像を表示する

• 画像を2件追加
  • app/assets/images/bg.png
  • app/assets/images/bread.jpg
• app/views/layouts/application.html.erb に以下のタグを追加

  <div class="my-image">
    <%= image_tag 'bread.jpg' %>
  </div>

• app/assets/stylesheets/my_app.scss を追加
• 最新のdartssass-railsではimage-urlやasset-urlを使わずにurlを使えば良いとのこと（参考）。

.my-image {
  background-image: url('bg.png');
  display: inline-block;
  padding: 50px;
  img {
    border: 1px solid #ccc;
  }
}

• app/assets/stylesheets/application.css に追加したCSSをapp/assets/stylesheets/names.scssに移動して、application.cssを削除

// app/assets/stylesheets/names.scss
#names {
  display: grid;
  grid-template-columns: 1fr max-content;
  margin: 1em;
}

#names strong {
  display: none;
}

#names p {
  margin: 0.2em;
}

• app/assets/stylesheets/application.scss でnames.scssとmy_app.scssをimport

// app/assets/stylesheets/application.scss
@import 'names';
@import 'my_app';

4. ローカルで動作確認

• bin/devコマンドで起動
• 背景画像とパンの画像が表示されることを確認

5. fly.io にデプロイ＆動作確認

• fly deploy でデプロイ
• https://rails-assets-sandbox.fly.dev/ にアクセスして動作確認

参考：step2〜5のdiff

• https://github.com/JunichiIto/fly-io-sandbox/compare/638fccde3af48e9b054f670c2294e1fd0f89cf94...b7d1567174b32b63d846eee32ebb8ddad94defac
• なお、いたずら防止のため、indexアクションのみに限定しています。