rails assets:precompile RAILS_ENV=productionでエラー

https://github.com/Harasou21/coffee_passport


Compiling...
Compilation failed:
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.

ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
at factory.create (/var/www/coffee_passport/node_modules/webpack/lib/Compilation.js:925:10)
at factory (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
at resolver (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
at /var/www/coffee_passport/node_modules/neo-async/async.js:2830:7
at /var/www/coffee_passport/node_modules/neo-async/async.js:6877:13

resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
using description file: /var/www/coffee_passport/package.json (relative path: ./app/javascript/packs/components/static_pages)
Field 'browser' doesn't contain a valid alias configuration
No description file found
no extension

  Field 'browser' doesn't contain a valid alias configuration
  /public/assets/images/coffee_gif.gif doesn't exist


      Field 'browser' doesn't contain a valid alias configuration
      /var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.


とエラーがでて

https://stackoverflow.com/questions/43037590/field-browser-doesnt-contain-a-valid-alias-configuration

この記事にある通り、

package.jsonと
webpack.config.jsを色々書かないと行けない…


でもいまのrails プロジェクトには、webpack.config.js
ファイルは無い。

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

を１から勉強することにします。


# 解決できた。。。


.gitignoreに

/public/assets/
を設定していた。。

vueファイルから画像を読み込む際に
assets以下の画像がなぜか読み込めなかったので

public/assets/images/以下に画像を設定していたが、


.gitignoreに

/public/assets/
を設定していたので、commit ,pushできず以上のように本番環境でエラーが起きていた。
くそ単純だった。。
なんか依存関係とかかと思って間違ったアプローチしてた。。。

本番環境でのブラウザで

Webpacker::Manifest::MissingEntryError in Sessions#new
Showing /var/www/coffee_passport/app/views/sessions/new.html.erb where line #3 raised:

Webpacker can't find app_explain in /var/www/coffee_passport/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:

こんなエラー起きていたが、

Webpacker can't find app_explain in /var/www/coffee_passport/public/packs/manifest.json. Possible causes:

とある。

/var/www/coffee_passport/public/packs/manifest.json.

もgit ignoreにしてるのでそりゃそうだ。。。

/public/packs
/public/packs-test

をはずした。。

めっちゃコミット対象のファイルが増えた。。。1000ファイルくらい。。まぁいいや。

rails assets:precompile RAILS_ENV=production

も上手くいった。

# 解決できたと思ったが、

![スクリーンショット 2021-09-08 17.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/cb4be8a6-2213-75fd-c7c5-b8096466a878.png)


だが本番環境のブラウザで
でvueファイルが読み込まれてない。。。


ちゃんと production.rbは

  config.assets.compile = true

になってる。



/public/assets/express
もgit ignoreから削除


var finalhandler = require('finalhandler');
var Router = require('./router');
var methods = require('methods');
var middleware = require('./middleware/init');
var query = require('./middleware/query');
var debug = require('debug')('express:application');
var View = require('./view');
var http = require('http');
var compileETag = require('./utils').compileETag;
var compileQueryParser = require('./utils').compileQueryParser;
var compileTrust = require('./utils').compileTrust;
var deprecate = require('depd')('express');
var flatten = require('array-flatten');
var merge = require('utils-merge');
var resolve = require('path').resolve;
var setPrototypeOf = require('setprototypeof')
var slice = Array.prototype.slice;

こういった大事そうな記述をignoreしちゃってたからね。

再度、git pull
やrails assets:precompile RAILS_ENV=production
を実行して以上なかったが、

やっぱりさっきのエラーになる。



Routing Error
No route matches [GET] "/logout"

あとついでに本番環境のrailsのほうでエラーが起きた。
なんで、ｊｓ関係ないやろ。。。

```route.rb
  delete '/logout',  to: 'sessions#destroy'
```

```app/views/users/config.html.erb

  <div class="user-config-child">
    <%= link_to "ログアウト", "/logout",method: :delete,data: {confirm: "本当にログア
ウトしますか？"} %>
  </div>
```

とエラーが表示された。。。
なんで。。。
getリクエストになってるの。。。


https://teratail.com/questions/148805

同じことに悩んでるひといた。

なるほど、js関係あるのか。。。


https://ja.stackoverflow.com/questions/67119/rails%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83aws%E3%81%A7%E3%81%AE%E3%81%BF%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E5%87%BA%E3%81%99

jsが上手く動作しないと、deleteやpostが正常に動作しないっぽい。。。



まずはEC2インスタンスを再起動

してもだめだった。。。

さっき、js関係のファイルをcommitして、pushしたから
それが原因とかしらんぞ。。。

```application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../bgswitcher")
require("../card")
require("./tag")
require("../slide")
require('./preview') 
//= require rails-ujs


```




```config/webpacker.yml


production:
  <<: *default

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

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

```

の

  compile: trueに変更。


し、git pull と　rails assets:precompile RAILS_ENV=productionを実行
上手くいった。

それでも
Failed to load resource: the server responded with a status of 404 (Not Found)

となった。。

$ git rm --cached -r 削除したいディレクトリ


$ git rm --cached ファイル名

らしいので、

git rm --cached -r public/assets/express

 git rm --cached -r public/packs/js  

を実行して

だけどエラーは変わらず。

git rm --cached -r  public/packs/media/images


rm 'public/packs/media/images/coffee_gif-2c7fb49d.gif'
rm 'public/packs/media/images/coffee_gif-d678c3db.gif'
rm 'public/packs/media/images/post-9de5d393.png'
rm 'public/packs/media/images/post-eef7a77c.png'
rm 'public/packs/media/images/sold_item1-37df37e4.png'
rm 'public/packs/media/images/sold_item1-4b5a14d6.png'
rm 'public/packs/media/images/sold_item2-4d76be86.png'
rm 'public/packs/media/images/sold_item2-fd0ae8c3.png'
rm 'public/packs/media/images/sold_item3-49860077.png'
rm 'public/packs/media/images/sold_item3-6b06935f.png'
rm 'public/packs/media/images/sold_item4-2189bb94.png'
rm 'public/packs/media/images/sold_item4-fb614d95.png'


これも機械的に生成されるファイルをっぽいのでgit ignoreにしてみた。


![スクリーンショット 2021-09-08 21.26.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653881/4ce6a03d-ef56-b500-73b2-2f6bc0c1ee5d.png)


ハッシュ値的なものがついたファイルをgit ignoreに設定したけど、
この画像を見る限りは、ハッシュ値的なのがついてるのをリクエストしてるからやっぱりgit ignoreしないほうがいいかも



okuramasafumiさんから





>機械的に生成されたファイルをコミットすると、それらの生成元となったファイルが変更されるたびに生成後のファイルもコミットしなくてはならなくなってしまいますね。
「機械的に生成」するタイミングをデプロイの最中にすれば、それらファイルをコミットせずに本番環境に配置できますね。

と教えてもらった。


まぁでも機械的に生成されるファイルは必要そう。
だけども、それらの生成元となったファイルが変更されるたびに生成後のファイルもコミットしなくてはならなくなってしまう。

いったんアプリが動くようになってから

「機械的に生成」するタイミングをデプロイの最中にする設定にしよう。




```
[ec2-user@ip-10-0-10-10 coffee_passport]$ bin/webpack
```

Hash: d3f8ab57fb922d915fd8
Version: webpack 4.46.0
Time: 11012ms
Built at: 2021/09/08 12:51:38
                                                            Asset      Size                              Chunks                         Chunk Names
                           js/app_explain-5a7231ef4c979894f42c.js   429 KiB                         app_explain  [emitted] [immutable]  app_explain
                       js/app_explain-5a7231ef4c979894f42c.js.map   517 KiB                         app_explain  [emitted] [dev]        app_explain
                           js/application-dfb9624df34e242f6e62.js    98 KiB                         application  [emitted] [immutable]  application
                       js/application-dfb9624df34e242f6e62.js.map   111 KiB                         application  [emitted] [dev]        application
                       js/components/Home-e1516e065f068d648e91.js  11.6 KiB                     components/Home  [emitted] [immutable]  components/Home
                   js/components/Home-e1516e065f068d648e91.js.map  8.91 KiB                     components/Home  [emitted] [dev]        components/Home
      js/components/about_coffee_passport-1f2f9c1fa17c2466f484.js  15.3 KiB    components/about_coffee_passport  [emitted] [immutable]  components/about_coffee_passport
  js/components/about_coffee_passport-1f2f9c1fa17c2466f484.js.map  12.9 KiB    components/about_coffee_passport  [emitted] [dev]        components/about_coffee_passport
                    js/components/contact-2a05cf54345ca48f4e5f.js  13.3 KiB                  components/contact  [emitted] [immutable]  components/contact
                js/components/contact-2a05cf54345ca48f4e5f.js.map  10.9 KiB                  components/contact  [emitted] [dev]        components/contact
                js/components/drinks/show-b39aaf6af666ca3e95e9.js  18.3 KiB              components/drinks/show  [emitted] [immutable]  components/drinks/show
            js/components/drinks/show-b39aaf6af666ca3e95e9.js.map  16.6 KiB              components/drinks/show  [emitted] [dev]        components/drinks/show
                     js/components/footer-7fcae9b44f17ccfd1a70.js  12.2 KiB                   components/footer  [emitted] [immutable]  components/footer
                 js/components/footer-7fcae9b44f17ccfd1a70.js.map  9.72 KiB                   components/footer  [emitted] [dev]        components/footer
            js/components/like/likeButton-a63697a1a2de0157ecc0.js   114 KiB          components/like/likeButton  [emitted] [immutable]  components/like/likeButton
        js/components/like/likeButton-a63697a1a2de0157ecc0.js.map   109 KiB          components/like/likeButton  [emitted] [dev]        components/like/likeButton
                     js/components/search-f6a1db8eff7db36ddf7d.js  7.98 KiB                   components/search  [emitted] [immutable]  components/search
                 js/components/search-f6a1db8eff7db36ddf7d.js.map  7.47 KiB                   components/search  [emitted] [dev]        components/search
    js/components/static_pages/appExplain-ab8244c5fa09a192c036.js   102 KiB  components/static_pages/appExplain  [emitted] [immutable]  components/static_pages/appExplain
js/components/static_pages/appExplain-ab8244c5fa09a192c036.js.map   114 KiB  components/static_pages/appExplain  [emitted] [dev]        components/static_pages/appExplain
                 js/components/users/user-f652ad467bfb62cde895.js   552 KiB               components/users/user  [emitted] [immutable]  components/users/user
             js/components/users/user-f652ad467bfb62cde895.js.map   627 KiB               components/users/user  [emitted] [dev]        components/users/user
                                js/footer-239c963857612400ee59.js   654 KiB                              footer  [emitted] [immutable]  footer
                            js/footer-239c963857612400ee59.js.map   739 KiB                              footer  [emitted] [dev]        footer
                             js/hello_vue-1cb3206e3283b6162462.js   785 KiB                           hello_vue  [emitted] [immutable]  hello_vue
                         js/hello_vue-1cb3206e3283b6162462.js.map   889 KiB                           hello_vue  [emitted] [dev]        hello_vue
                               js/preview-48d6e11d740ebbf574e4.js  7.02 KiB                             preview  [emitted] [immutable]  preview
                           js/preview-48d6e11d740ebbf574e4.js.map  7.25 KiB                             preview  [emitted] [dev]        preview
                         js/router/router-9aea5533c2f9d9ac037c.js   648 KiB                       router/router  [emitted] [immutable]  router/router
                     js/router/router-9aea5533c2f9d9ac037c.js.map   736 KiB                       router/router  [emitted] [dev]        router/router
                                   js/tag-389e82f3c1e99bbf9eec.js  10.5 KiB                                 tag  [emitted] [immutable]  tag
                               js/tag-389e82f3c1e99bbf9eec.js.map  11.1 KiB                                 tag  [emitted] [dev]        tag
                                                    manifest.json  6.37 KiB                                      [emitted]              
                             media/images/coffee_gif-d678c3db.gif   346 KiB                                      [emitted]              
                                   media/images/post-eef7a77c.png   542 KiB                                      [emitted]              
                             media/images/sold_item1-37df37e4.png   616 KiB                                      [emitted]              
                             media/images/sold_item2-4d76be86.png   531 KiB                                      [emitted]              
                             media/images/sold_item3-6b06935f.png   579 KiB                                      [emitted]              
                             media/images/sold_item4-fb614d95.png   740 KiB                                      [emitted]              
Entrypoint app_explain = js/app_explain-5a7231ef4c979894f42c.js js/app_explain-5a7231ef4c979894f42c.js.map
Entrypoint application = js/application-dfb9624df34e242f6e62.js js/application-dfb9624df34e242f6e62.js.map
Entrypoint components/about_coffee_passport = js/components/about_coffee_passport-1f2f9c1fa17c2466f484.js js/components/about_coffee_passport-1f2f9c1fa17c2466f484.js.map
Entrypoint components/contact = js/components/contact-2a05cf54345ca48f4e5f.js js/components/contact-2a05cf54345ca48f4e5f.js.map
Entrypoint components/drinks/show = js/components/drinks/show-b39aaf6af666ca3e95e9.js js/components/drinks/show-b39aaf6af666ca3e95e9.js.map
Entrypoint components/footer = js/components/footer-7fcae9b44f17ccfd1a70.js js/components/footer-7fcae9b44f17ccfd1a70.js.map
Entrypoint components/Home = js/components/Home-e1516e065f068d648e91.js js/components/Home-e1516e065f068d648e91.js.map
Entrypoint components/like/likeButton = js/components/like/likeButton-a63697a1a2de0157ecc0.js js/components/like/likeButton-a63697a1a2de0157ecc0.js.map
Entrypoint components/search = js/components/search-f6a1db8eff7db36ddf7d.js js/components/search-f6a1db8eff7db36ddf7d.js.map
Entrypoint components/static_pages/appExplain = js/components/static_pages/appExplain-ab8244c5fa09a192c036.js js/components/static_pages/appExplain-ab8244c5fa09a192c036.js.map
Entrypoint components/users/user = js/components/users/user-f652ad467bfb62cde895.js js/components/users/user-f652ad467bfb62cde895.js.map
Entrypoint footer = js/footer-239c963857612400ee59.js js/footer-239c963857612400ee59.js.map
Entrypoint hello_vue = js/hello_vue-1cb3206e3283b6162462.js js/hello_vue-1cb3206e3283b6162462.js.map
Entrypoint preview = js/preview-48d6e11d740ebbf574e4.js js/preview-48d6e11d740ebbf574e4.js.map
Entrypoint router/router = js/router/router-9aea5533c2f9d9ac037c.js js/router/router-9aea5533c2f9d9ac037c.js.map
Entrypoint tag = js/tag-389e82f3c1e99bbf9eec.js js/tag-389e82f3c1e99bbf9eec.js.map
[./app/javascript/app.vue] 1.04 KiB {hello_vue} [built]
[./app/javascript/app.vue?vue&type=script&lang=js&] 364 bytes {hello_vue} [built]
[./app/javascript/app.vue?vue&type=template&id=6fb8108a&] 201 bytes {hello_vue} [built]
[./app/javascript/bgswitcher.js] 11.8 KiB {application} [built]
[./app/javascript/card.js] 2.66 KiB {application} [built]
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/app_explain.js] 389 bytes {app_explain} [built]
[./app/javascript/packs/application.js] 885 bytes {application} [built]
[./app/javascript/packs/footer.js] 222 bytes {footer} [built]
[./app/javascript/packs/hello_vue.js] 2.23 KiB {hello_vue} [built]
[./app/javascript/packs/preview.js] 3.15 KiB {preview} {application} [built]
[./app/javascript/packs/router/router.js] 554 bytes {router/router} {footer} {hello_vue} [built]
[./app/javascript/packs/tag.js] 6.68 KiB {tag} {application} [built]
[./app/javascript/slide.js] 1.13 KiB {application} [built]
    + 102 hidden modules


を実行したら新しいハッシュ値が生成された。これいけんじゃね？

よっしゃいけた！！！！