AWS デプロイ時のエラー対応

前提

自分がAWSへのデプロイ時に遭遇したエラーの備忘録です。
EC2 の作成やRDSの設定などは既に済んでいる
Unicorn と Nginx を起動した時に出たエラーになります。

エラー内容

production.log

F, [2021-02-19T00:20:57.099109 #17387] FATAL -- : [333532cb-cda3-4d39-9c25-6e18a14a0f6e]
[333532cb-cda3-4d39-9c25-6e18a14a0f6e] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
):
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]      5:     <%= csrf_meta_tags %>
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]      6:     <%= csp_meta_tag %>
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]      7:
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]      8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]      9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]     10:   </head>
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]     11:
[333532cb-cda3-4d39-9c25-6e18a14a0f6e]
[333532cb-cda3-4d39-9c25-6e18a14a0f6e] app/views/layouts/application.html.erb:8
I, [2021-02-19T00:28:30.500876 #18821]  INFO -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd] Started GET "/" for 111.90.67.107 at 2021-02-19 00:28:30 +0000
I, [2021-02-19T00:28:30.502928 #18821]  INFO -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd] Processing by PostsController#index as HTML
I, [2021-02-19T00:28:30.579437 #18821]  INFO -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]   Rendering posts/index.html.erb within layouts/application
D, [2021-02-19T00:28:30.593675 #18821] DEBUG -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]   Post Load (2.9ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."id" DESC LIMIT $1 OFFSET $2  [["LIMIT", 8], ["OFFSET", 0]]
I, [2021-02-19T00:28:30.595318 #18821]  INFO -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]   Rendered posts/index.html.erb within layouts/application (Duration: 15.8ms | Allocations: 1786)
I, [2021-02-19T00:28:30.596712 #18821]  INFO -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd] Completed 500 Internal Server Error in 94ms (ActiveRecord: 32.4ms | Allocations: 6352)
F, [2021-02-19T00:28:30.597796 #18821] FATAL -- : [81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
):
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]      5:     <%= csrf_meta_tags %>
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]      6:     <%= csp_meta_tag %>
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]      7:
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]      8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]      9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]     10:   </head>
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]     11:
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd]
[81e1a185-d1f5-4cd3-b5bc-cb23580afbcd] app/views/layouts/application.html.erb:8

unicorn.log

I, [2021-02-19T00:05:04.284707 #17383]  INFO -- : Refreshing Gem list
I, [2021-02-19T00:05:05.373228 #17383]  INFO -- : unlinking existing socket=/var/www/rails/image_memories/tmp/sockets/.unicorn.sock
I, [2021-02-19T00:05:05.373404 #17383]  INFO -- : listening on addr=/var/www/rails/image_memories/tmp/sockets/.unicorn.sock fd=9
I, [2021-02-19T00:05:05.457849 #17383]  INFO -- : master process ready
I, [2021-02-19T00:05:05.465355 #17386]  INFO -- : worker=0 ready
I, [2021-02-19T00:05:05.466843 #17387]  INFO -- : worker=1 ready
I, [2021-02-19T00:24:22.048105 #17383]  INFO -- : reaped #<Process::Status: pid 17386 exit 0> worker=0
I, [2021-02-19T00:24:22.048211 #17383]  INFO -- : reaped #<Process::Status: pid 17387 exit 0> worker=1
I, [2021-02-19T00:24:22.048286 #17383]  INFO -- : master complete
I, [2021-02-19T00:28:12.496382 #18819]  INFO -- : Refreshing Gem list
I, [2021-02-19T00:28:13.578156 #18819]  INFO -- : unlinking existing socket=/var/www/rails/image_memories/tmp/sockets/.unicorn.sock
I, [2021-02-19T00:28:13.578365 #18819]  INFO -- : listening on addr=/var/www/rails/image_memories/tmp/sockets/.unicorn.sock fd=9
I, [2021-02-19T00:28:13.639182 #18819]  INFO -- : master process ready
I, [2021-02-19T00:28:13.647554 #18822]  INFO -- : worker=1 ready
I, [2021-02-19T00:28:13.648181 #18821]  INFO -- : worker=0 ready

Rails ガイドより

RAILS_ENV=production bin/rails assets:precompile

コマンド行うも状況変わらず。

config/environments/production.rb を編集

config.assets.compile = true

サーバを再起動後 以下エラー

[fcd25085-7471-48c8-908f-bbb4c8cd653a] ActionView::Template::Error (Webpacker can't find application in /var/www/rails/image_memories/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
[fcd25085-7471-48c8-908f-bbb4c8cd653a]      6:     <%= csp_meta_tag %>
[fcd25085-7471-48c8-908f-bbb4c8cd653a]      7:
[fcd25085-7471-48c8-908f-bbb4c8cd653a]      8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
[fcd25085-7471-48c8-908f-bbb4c8cd653a]      9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
[fcd25085-7471-48c8-908f-bbb4c8cd653a]     10:   </head>
[fcd25085-7471-48c8-908f-bbb4c8cd653a]     11:
[fcd25085-7471-48c8-908f-bbb4c8cd653a]     12:   <body>
[fcd25085-7471-48c8-908f-bbb4c8cd653a]
[fcd25085-7471-48c8-908f-bbb4c8cd653a] app/views/layouts/application.html.erb:9

webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .vue
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

webpacker がインストールされていないとエラー出ているので、対応しました。

下記サイトを参考に yarn のインストールから行いました。

EC2にyarnをインストールする

rails webpacker:install

コマンド実行して、いくつかコンフリクト起きていたが、全て上書きを選択。

rails webpacker:compile

コマンド実行して、下記エラーが出ました。

Compiling...
Compilation failed:
Hash: 6020ef57534ee4e63335
Version: webpack 4.44.2
Time: 10268ms
Built at: 2021/02/22 0:09:51
 5 assets
Entrypoint application = js/application-37f59fecc51f9ae0901f.js js/application-37f59fecc51f9ae0901f.js.map
Entrypoint hello_vue = js/hello_vue-29fe74a21178e0ff7a5c.js js/hello_vue-29fe74a21178e0ff7a5c.js.map
 [0] (webpack)/buildin/global.js 905 bytes {1} [built]
 [1] (webpack)/buildin/module.js 552 bytes {0} [built]
 [2] ./app/javascript/app.vue 291 bytes {1} [built] [failed] [1 error]
 [4] ./app/javascript/packs/application.js 813 bytes {0} [built]
 [8] ./app/javascript/channels/index.js 205 bytes {0} [built]
 [9] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[10] ./app/javascript/packs/hello_vue.js 1.85 KiB {1} [built]
    + 7 hidden modules

ERROR in ./app/javascript/app.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div id="app">
|     <p>{{ message }}</p>
 @ ./app/javascript/packs/hello_vue.js 6:21-49 6:157-160

ファイルを処理するためのローダー？というのが適切でないらしいのでいろいろ調べて対応してみました。

ERROR in ./app/javascript/app.vue 1:0

とあるので、vue ファイルが読み込めていないと考え、vue-loader をインストール。

https://vue-loader.vuejs.org/guide/#vue-cli

npm install -D vue-loader vue-template-compiler

コマンド実施。

再度コンパイル行うもエラー状態変わらず。

調べてみると vue-loader v15 から VueLoaderPlugin を読み込まなくてはいけないとのこと。下記サイト参考に設定を変更しました。

https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

https://www.erikminkel.com/2018/05/21/rails-5-2-webpacker-and-vue-loader-v15/

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)
environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())
module.exports = environment

上記設定して再度、

rails webpacker:compile

行い実施できました！