Rails

【AWS環境構築】アセットのコンパイルが必要な理由とその設定手順を解説

  /
AWS

 

今回は、レイアウトが崩れてしまっている場合（CSS・JavaScriptが反映されていない場合）に行うアセットのコンパイルについて解説したいと思います。アセットのコンパイルという聞き馴染みのない言葉が出てきていますが、この記事で大枠を掴むことができるので焦らず進めていきましょう。

この記事は前回の続きとなっています。

↓前回の記事はこちら

AWS
【AWS環境構築】本番環境でRailsを起動する手順とエラーログの見方を解説本番環境でRailsを起動する方法を紹介しています。併せて、Railsの起動がうまくいかなかった際のエラーログの見方も解説しています。エラーログの見方は今後も非常に重要になってくるので、しっかりマスターしていきましょう。...
この記事の内容
  1. アセットのコンパイルとは
  2. 設定手順
  3. まとめ

アセットのコンパイルとは

アセットのコンパイルとは、簡単に言うと画面上にCSSやJavaScriptを反映させる作業のことです。

本番環境には通常、アセットのコンパイルが実行されていません。そのため手動でアセットのコンパイル作業、または本番環境でもアセットのコンパイルが自動で行われる設定をしなければなりません。

僕たちが普段開発しているのは、本番環境ではなく開発環境と呼ばれるもの。だから、わざわざアセットのコンパイルをしなくても綺麗にビューが表示されているんだね。

参照: Rails初学者がつまずきやすい「アセットパイプライン」

開発中はアクセス毎にアセットファイル（画像・CSS・JSファイルの総称）を自動的にコンパイル(圧縮)する仕組みが備わっているが、本番環境の時はパフォーマンスのためアクセス毎には実行されないようになっている。

設定手順

では実際に、アセットのコンパイルを実行していきます。

以下のコマンドを打ち込み、アセットのコンパイルを実行しましょう。これは、手動でアセットのコンパイルを実行するコマンドなので、ぜひ頭に入れておきましょう。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ rails assets:precompile RAILS_ENV=production

 

アセットのコンパイルを反映させるために、Railsの再起動を行います。まずは以下のコマンドで、Unicornのプロセスを切る作業を行いましょう。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ ps aux | grep unicorn

psコマンドで、現在動いているプロセスを確認します。そして、auxというpsコマンドのオプションを使用し、現在動いているプロセスをツリー状に表示します。

最後に、grepコマンドでファイルの中にある文字列(今回はunicornという文字列)を検索しています。

 

下記のようなプロセスが表示されれば成功です。

↓ 表示結果

ec2-user 17877  0.4 18.1 588472 182840 ?       Sl   01:55   0:02 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 17881  0.0 17.3 589088 175164 ?       Sl   01:55   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 17911  0.0  0.2 110532  2180 pts/0    S+   02:05   0:00 grep --color=auto unicorn

 

左から２番目の数字に注目しましょう。これがPID（プロセスID）です。

さらに右側に「unicorn_rails master」と表示されているプロセスが、Unicornのプロセス本体です。この時のPIDは、17877ということになります。

プロセスアイディー（PID）とは、プロセスを識別するための一意の数字になります。PIDがあることで、あるプログラムから別のプロセスを指定して操作したり、プロセスからプログラムを停止したりすることができます。

 

次に、この「unicorn_rails master」のPIDをKillします。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ kill <確認したunicorn rails masterのPID>

Killコマンドとは、ローカルでいう「control + c」と同じ役割です。

 

再度プロセスを表示させ、終了できているか確認しましょう。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ ps aux | grep unicorn

 

この時、下記の２桁が消えていない場合は正常にKillできていません。

ec2-user 17877  0.4 18.1 588472 182840 ?       Sl   01:55   0:02 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 17881  0.0 17.3 589088 175164 ?       Sl   01:55   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D

 

その場合は「kill -9」コマンドを使って、プロセスを強制終了します。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ kill -9 <確認したunicorn rails masterのPID>

 

 

Killが完了したら、再びUnicornを立ち上げましょう。

↓ ターミナル(EC2)

[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D

RAILS_SERVE_STATIC_FILES=1という指定をすることで、コンパイルされたアセットをRailsが見つけられるようになります。

 

もう一度、ブラウザで http://＜Elastic IP＞:3000/ にアクセスしてみて、レイアウト崩れが無くサイトが表示されれば成功です。

まとめ

  • アセットのコンパイルとは、画面上にCSSやJavaScriptを反映させる作業のこと。
  • 本番環境ではパフォーマンス上、アセットのコンパイルは行われていない

 

 

今回は、レイアウトが崩れてしまっている場合（CSSが反映されていない）に行うアセットのコンパイルについて解説しました。本番環境で画面は表示されるけど、なんかレイアウトが崩れてる、、、といった状況に出会った場合はアセットのコンパイルを疑ってみてください。

AWS デプロイ
こんな記事もおすすめ