EC2　本番環境にCSSを適応させユーザーアイコンを丸くしたい。

前提・実現したいこと

私は現在SNS風のwebアプリケーションを作成しております。
先日EC２上にデプロイし、アプリの動作確認を行っていた際、異変に気付きました。

ユーザーにはアイコン画像を設定できるようにし、そのアイコン画像は丸型に切り取るようなCSSを記述しておりました。
しかし、本番環境にはそのような変化はなく、アイコン画像がそのまま添付されている形になっておりました。

Herokuにデプロイしてある物はしっかりとCSSの記述が適応しており、開発環境もまた同じです。

エラーメッセージ

rake assets:clobber assets:precompile　コマンドにて

warning Integrity check: Flags don't match                                                                                                        
error Integrity check failed                                                                                                                      
error Found 1 errors.                                                                                                                             


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.22.5
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

と出ました。

メッセージにある２件を試そうと思いました。

yarn install --check-files　を打ち込むとコンソールのようなものが立ち上がりました。
その後のアクションが分からず一度閉じてしまいました。

yarn upgradeを打ち込むと正常に動きました。

その後unicornをkillし、自動デプロイしたところ変化がありませんでした。

該当のソースコード

assets/stylesheets/user.sccs
.icon_image {
  width: 100px;
  height: 100px;

  border-radius: 100px;

  object-fit: cover;

  border:3px solid #ff006f
}

views/devise/registrations

<div class="sinupPage">
  <div class="titleArea">
    <h1>アカウントを新規作成</h1>
  </div>
  <div class='container'>
    <%= form_with scope: resource, as: resource_name, url: registration_path(resource_name), html: { class: "mt-5, signupForm" }, local: true do |f| %>
    
      <%= devise_error_messages! %>

      <div class="form-group">
        <%= f.label :name %>
        <%= f.text_field :name, class: "form-control", placeholder: "名前を入力してください" %>
      </div>

      <div class="form-group">
         <%= f.label :email %>
        <%= f.email_field :email, class: "form-control", placeholder: "emailを入力してください" ,autocomplete: "email" %>
      </div>

      <div class="form-group">
        <%= f.label :password %>
        <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %>文字以上入力してください)</em>
        <% end %><br />
        <%= f.password_field :password, class: "form-control", placeholder:"パスワードを入力してください", autocomplete: "off" %>
      </div>

        <div class="form-group">
          <%= f.label :profile %>
          <%= f.text_area :profile, class: "form-control", placeholder:"プロフィールを入力してください" %>
        </div>

        <div class="field">
          <%= f.label :image %><br/>
          <%= f.file_field :image, class: "icon_image" %>
        </div>

      <div class="text-center">
        <%= f.submit "アカウントを作成", class: "btn btn-outline-secondary" %>
      </div>
    <% end %>
  </div>
</div>

config/deploy.rb

# capistranoのバージョンを記載。固定のバージョンを利用し続け、バージョン変更によるトラブルを防止する
lock "~> 3.14.1"

# Capistranoのログの表示に利用する
set :application, 'rank_top'

# どのリポジトリからアプリをpullするかを指定する
set :repo_url,  'git@github.com:akihiro0119/rank_top.git'

# バージョンが変わっても共通で参照するディレクトリを指定
set :linked_dirs, fetch(:linked_dirs, []).push('log', 'tmp/pids', 'tmp/cache', 'tmp/sockets', 'vendor/bundle', 'public/system', 'public/uploads')

set :rbenv_type, :user
set :rbenv_ruby, '2.7.2' 

# どの公開鍵を利用してデプロイするか
set :ssh_options, auth_methods: ['publickey'],
                                  keys: ['~/.ssh/aono1x19.pem'] 

# プロセス番号を記載したファイルの場所
set :unicorn_pid, -> { "#{shared_path}/tmp/pids/unicorn.pid" }

# Unicornの設定ファイルの場所
set :unicorn_config_path, -> { "#{current_path}/config/unicorn.rb" }
set :keep_releases, 5

# デプロイ処理が終わった後、Unicornを再起動するための記述
after 'deploy:publishing', 'deploy:restart'
namespace :deploy do
  task :restart do
    invoke 'unicorn:restart'
  end
end

config/unicorn.rb

#サーバ上でのアプリケーションコードが設置されているディレクトリを変数に入れておく
app_path = File.expand_path('../../../', __FILE__)

#アプリケーションサーバの性能を決定する
worker_processes 1

#アプリケーションの設置されているディレクトリを指定
working_directory "#{app_path}/current"

#Unicornの起動に必要なファイルの設置場所を指定
pid "#{app_path}/shared/tmp/pids/unicorn.pid"

#ポート番号を指定
listen "#{app_path}/shared/tmp/sockets/unicorn.sock" 

#エラーのログを記録するファイルを指定
stderr_path "#{app_path}/shared/log/unicorn.stderr.log"

#通常のログを記録するファイルを指定
stdout_path "#{app_path}/shared/log/unicorn.stdout.log"

#Railsアプリケーションの応答を待つ上限時間を設定
timeout 60

#以下は応用的な設定なので説明は割愛

preload_app true
GC.respond_to?(:copy_on_write_friendly=) && GC.copy_on_write_friendly = true

check_client_connection false

run_once = true

before_fork do |server, worker|
  defined?(ActiveRecord::Base) &&
    ActiveRecord::Base.connection.disconnect!

  if run_once
    run_once = false # prevent from firing again
  end

  old_pid = "#{server.config[:pid]}.oldbin"
  if File.exist?(old_pid) && server.pid != old_pid
    begin
      sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU
      Process.kill(sig, File.read(old_pid).to_i)
    rescue Errno::ENOENT, Errno::ESRCH => e
      logger.error e
    end
  end
end

after_fork do |_server, _worker|
  defined?(ActiveRecord::Base) && ActiveRecord::Base.establish_connection
end

###補足情報

本番環境の画像データはS3に
アイコン画像はcarrierwaveを使用しております。

退会済みユーザー

2021/01/06 03:54

「Please run `yarn install --check-files` to update.」ってヒントが出ているのだから、試してみてどうでしたか？

Pro01x19

2021/01/06 04:01

確認した結果を記載していませんでした。追記いたします。結果としては yarn install --check-files　を打ち込むとコンソールのようなものが立ち上がりました。 yarn upgradeを打ち込むと正常に動きました。その後unicornをkillし、自動デプロイしたところ変化がありませんでした。

退会済みユーザー

2021/01/06 04:06

続いて、反映されていない箇所のwebブラウザ上でのHTMLソースを見て、気づいたところはありますか？

Pro01x19

2021/01/06 04:15

<img class="icon_image" src="https://rank-top-32010.s3.amazonaws.com/uploads/user/image/1/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99.png"> Heroku環境、EC2環境どちらも同じコードになっておりました。 class＝"icon_image"は存在しているのでCSSが適応されてないと仮説づけておりました。

yu_1985

2021/01/06 04:34

自動デプロイの過程にasset:precompileが含まれていますか？

Pro01x19

2021/01/06 04:44

@yu_1985さん質問ありがとうございます。質問の意図と違う回答でしたら申し訳ございません。自動デプロイする中で人間側が動作をする過程でasset:precompileが含まれるコマンドは打ち込んでいません。自動デプロイしている際に流れる多数のコードの中にassetが含まれる物は optimize-css-assets-webpack-plugin@5.0.4　しかありませんでした。 require 'capistrano/rails/assets'　というgemはインストールしておりますが、こちらではだめだったでしょうか...

yu_1985

2021/01/06 06:06

> 自動デプロイする中で人間側が動作をする過程でasset:precompileが含まれるコマンドは打ち込んでいません。ちょっとよくわからないのですが、どのようなフローを「自動デプロイ」としていますか？人間側がどうこうではなくてデプロイの中で必要になると思うのですが…。 yarn upgradeしたはいいものの、「rake assets:clobber assets:precompile　コマンドを試す」をもう一度行っていないように見えるのと、それが必要になるのであればデプロイの中に組み込まなくてはならないはずです。

退会済みユーザー

2021/01/06 06:19

スタイルシートが別ディレクトリにあったりすると、ファイルやディレクトリのアクセス権の都合で403 forbiddenってなることがあります。SELinuxのコンテキストも確認してみてください。

Pro01x19

2021/01/06 09:15

@yu_1985さん申し訳ございません！EC2の仕組みを理解しきれないまま実装を進めてしまっています。デプロイするための方法としてデータベースの起動を確認→unicornのmasterをkillする→ローカルで自動デプロイコマンドを打ち込むだと認識しておりました。 rake assets:clobber assets:precompile　はどの時点で必要なのでしょうか？

Pro01x19

2021/01/06 09:17

@m6uさん返信ありがとうございます！ SELinnuxとコンテキストという単語を初めて見たため、これから勉強して参ります。簡単な確認方法などあれば記載していただけるとありがたいです！

退会済みユーザー

2021/01/06 10:11 編集

例えば https://www.white-space.work/about-selinux/ とか https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/6/html/security-enhanced_linux/sect-security-enhanced_linux-selinux_contexts_labeling_files-persistent_changes_semanage_fcontext とか

yu_1985

2021/01/06 11:07 編集

rake assets:clobber assets:precompil に相当するものがその「自動デプロイ」の過程で必要なのでは？あと、わざわざ手動でunicornをkillせずにデプロイの流れの中でkillすればいいのではないでしょうか個人的には、デプロイを手動でkickしているにも関わらず自動デプロイと呼ぶのは違和感があります。

Pro01x19

2021/01/06 11:23

@yu_1985 rails assets:precompile RAILS_ENV=productionでしたら手動デプロイの際に行っておりました。 config/deploy.rbファイルと config/unicorn.rbファイルを記載しますので確認していただいてよろしいでしょうか...? この問題が解決しましたらデプロイの中に組み込む方法も学習したいと思います。アドバイスありがとうございます！

yu_1985

2021/01/06 12:54

ちなみに、asset:precompileをすることによって今回の問題は解決しますか？ yarn upgradeをしたあとにまだ試してないような気がするのですが…。

Pro01x19

2021/01/06 13:26

@yu_1985さん勉強不足で申し訳ございません。たった今行った手順を記載します。疑問点、不可解な点がありましたら指摘していただけたら幸いです。 ssh -i ダウンロードした鍵の名前.pem ec2-user@作成したEC2インスタンスと紐付けたElastic IP　でEC２上にアクセス→ cd /var/www/アプリ名でアプリにアクセス→ yarn upgrade→ rake assets:precompile RAILS_ENV=production→ ps aux | grep unicorn→ kill masterの番号→ bundle exec cap production deploy としました。結果改善に至らなかった形です。冗長な部分があると思いますが、よろしくお願いします。

yu_1985

2021/01/06 13:33

流れはわかりましたが、それぞれのコマンドの実行結果はどうなりますか？あと、せっかくサーバ上でyarn upgradeとassets:precompileをしているのに、そのあとにまたローカルからデプロイしたら無駄になりませんか？順番としては > ps aux | grep unicorn→ > kill masterの番号→ > bundle exec cap production deploy > cd /var/www/アプリ名でアプリにアクセス→ > yarn upgrade→ > rake assets:precompile RAILS_ENV=production→ の状態で結果を確認してほしいのですが…。

Pro01x19

2021/01/06 13:40

大変申し訳ございませんでした。。 yarn upgrade→ Done in 10.70s. rake assets:precompile RAILS_ENV=production→ Done in 4.04s. Everything's up-to-date. Nothing to do となっております。