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. とエラーがでて この記事にある通り、 package.jsonと webpack.config.jsを色々書かないと行けない… でもいまのrails プロジェクトには、webpack.config.js ファイルは無い。 を１から勉強することにします。 解決できた。。。 .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 も上手くいった。 解決できたと思ったが、 だが本番環境のブラウザで で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リクエストになってるの。。。 同じことに悩んでるひといた。 なるほど、js関係あるのか。。。 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にしてみた。 ハッシュ値的なものがついたファイルを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 を実行したら新しいハッシュ値が生成された。これいけんじゃね？ よっしゃいけた！！！！

<input type="number">で数値のみの入力にすることはできますが、正負を表す+や-、少数を表す.、べき乗を表すeが入力できてしまいます。 これらをVueのディレクティブを使って一括で正の整数のみ入力できるようにします。 plugins/integer.directive.ts import Vue from 'vue'; const targets = ['+', '-', '.', 'e']; const listen = (element: HTMLInputElement) => { element.addEventListener('keydown', event => { if (targets.includes(event.key)) { event.preventDefault(); } }); // コピペ対策 element.addEventListener('input', event => { let value = (event.target as any).value as string; targets.forEach(char => (value = value.replaceAll(char, ''))); (event.target as any).value = value; }); }; /** * v-integer * * inputタグにて、正の整数のみを許容する */ Vue.directive('integer', { bind(el, _binding, _vnode) { if (el instanceof HTMLInputElement) { listen(el); } else { const elements = el.getElementsByTagName('input'); if (elements.length) listen(elements[0]); } }, }); inputイベントでreplaceしているのは、コピペした場合にkeydownでは弾けないので追加してます。 ただ、+1234みたいに先頭に+がある数値をコピペするとevent.target.valueで1234と+なしの値が設定されていました。。。 そんなことやるやつはまれだと思うので今回は無視しますが、解決できるのであれば解決しておきたいですね。 test.vue <template> <input v-integer type="number"> </template> nuxt.config.js plugins: [ '~/plugins/integer.directive.ts',

今回の記事は下記の方におすすめです！ Laravelの基礎はとりあえず通した Vue.jsの基礎はとりあえず通した でもLaravelでvue.jsを使う方法がわからない 私自身、今まで実務レベルでWEBアプリを作成したことが少なく、困ったので共有します。。 今回の記事が参考になれば幸いです なお、間違いやご指摘ありましたら、コメント下さると幸いです。 実行環境 PHP 7.4 Laravel 6.2 Vue.js 2.5 ゴール Laravelのアプリ内でvue.jsを使えるようにする 手順 laravel/uiパッケージをインストール vue.jsのファイル生成 依存パッケージのインストール js/sassファイルのコンパイル実行 コンポーネントの記述 １）laravel/uiパッケージをインストール composer require laravel/ui:^1.0 --dev ２）vue.jsのファイル生成 php artisan ui vue この時、ルート直下の「package.json」の中身を確認し、 vueが表記されているか確認します。下記のようになっていれば、問題ないかと思います。 package.json { "devDependencies": { "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" } } ３）依存パッケージのインストール npm install 4）js/sassファイルのコンパイル実行 npm run dev コンパイルの際、cross-env周りのエラーが出た方は、 下記の記事を参考にしてみてください。 解決策①：パスの変更 laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る件対応したった 解決策②：mode_modulesディレクトリ以下を削除し、npmインストールからやり直す npmキャッシュ削除とインストール済みを削除して再インストール ちなみに、ルート直下にある「webpack.mix.js」はコンパイル時に要となるファイルです。下記のように、コンパイル後のファイルの行き先が記載されています。 webpack.mix.js mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); resources/js/app.jsはコンパイルされpublic/jsディレクトリに、resources/sass/app.scssはコンパイルされpublic/cssディレクトリに出力されるよう設定されています。詳しくは、下記サイトをご覧ください。 Laravel 6.x JavaScriptとCSSスカフォールド「CSSの出力」 ここまで行えば、すでにコンポーネントが登録されているかと思います。 resources/js/app.js Vue.component('example-component', require('./components/ExampleComponent.vue').default); componentsディレクトリ以下にあるExampleComponentのVueファイルを割り当てしています。ちなみに呼び出すExampleComponent.vueファイルの初期値はこんな感じですね。 resources/js/components/ExampleComponent.vue <template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script> 5）コンポーネントの記述 あとは、呼び出し先で、コンポーネントの記述をするだけです。 今回は、welcomeページに表示してみます。下記の記述で表示できます。 <example-component></example-component> welcomeページに埋め込むと...こんな感じ↓ resources/views/welcome.blade.php <!DOCTYPE html> <head> （省略） </head> <body> （省略） <div id="app"> <example-component></example-component> </div> <script src="{{mix('js/app.js')}}"></script> </body> </html> welcomeページにコンポーネントが表示されました！ 今回の記事は以上になります お役に立てたなら幸いです！！

　はじめに 本稿では、Couchbase Labsにより公開されているサンプルアプリケーションを紹介します。 サンプルアプリケーションの構成を下に図示します。アプリケーションを動かしてみるためには、Dockerが利用できることが必要になります。 クイックスタート githubからリポジトリを取得します。ディレクトリを移動します。 git clone https://github.com/couchbaselabs/try-cb-java.git cd try-cb-java 移動先のディレクトリで、docker-composeを以下のように実行します。 docker-compose up Couchbase Server http://localhost:8091/にアクセスすると、以下のようなログイン画面が表示されます。以下の認証情報を使ってログインすることができます。 アカウント名：Administrator パスワード：password アプリケーションフロントエンド http://localhost:8081にアクセスします。下の画面が表示されます。 二つのリンクが存在しますが、それぞれへ以下のような画面へ進みます。 URLを見るとわかりますが、tenant_agent_00とtenant_agent_01という二つのテナントを模したものになっています。 ここでは、　CB Travelを選択して進みます。 初回利用時には、ユーザーが存在していないので、ユーザー名とパスワードを入力して、[Register]をクリックします。 以下のような画面が表示されます。 REST APIサービス http://localhost:8080にアクセスします。下の画面が表示されます。 「Learn the API with Swagger, interactively」リンクを押下します(または、　http://localhost:8080/apidocsにアクセスします)。下の画面が表示されます。 アプリケーション概要 このアプリケーションは、ユーザーが空港と日付に基づいて飛行ルートを検索して選択できるフライトプランナーです。 また、ユーザーはキーワードを使用してホテルを検索できます。 データ・モデル サンプルデータセットの詳細については、Travel App DataModelを参照してください。 アプリケーション終了 アプリケーションを終了するには、ターミナルでControl+Cを押し、docker-composeがコンテナーを正常に停止するのを待ちます。 Dockerからマニュアル実行への切り替え 上では、すべてをDockerで実行していましたが、データベース、フロントエンド、WEB APIサーバーをそれぞれ、マニュアル実行に切り替えることができます。。 マニュアル起動への切り替えのために、mix-and-match.ymlが提供されています。 データベースのマニュアル実行 Couchbase Serverをマニュアル実行する場合は、travel-sample バケットのセットアップでバージョン7.0.0以降が必要になります。 また、「hotels-index」という名前の旅行サンプルバケットに全文検索インデックスを作成する必要があります。これは、次のコマンドで実行できます。（後述するように、自動作成を選択することもできます） curl --fail -s -u <username>:<password> -X PUT \ http://<host>:8094/api/index/hotels-index \ -H 'cache-control: no-cache' \ -H 'content-type: application/json' \ -d @fts-hotels-index.json マニュアル実行中のCouchbase　Serverを使用する場合、データベースに関する詳細を次のように記します。 CB_HOST=10.144.211.101 CB_USER=Administrator CB_PSWD=password docker-compose -f mix-and-match.yml up backend frontend Dockerイメージは通常と同じチェックを実行し、hotels-indexが存在しない場合は作成します。 Web APIサーバーのマニュアル実行 Dockerイメージを使わずに、Javaアプリケーションを自分で実行して、必要とあれば変更を加えるなどして、Couchbase APIの機能を試してみることもできます。 実行には、以下の要件があります。 Java 8以降（Java 11を推奨） Maven3以降 依存関係をインストールします。 mvn clean install 新しいCouchbase Serverイメージに対して初めて実行するときは、提供されている wait-for-couchbase.shをラッパーとして使用して、すべてのインデックスが確実に作成されるようにすることができます。 docker-compose -f mix-and-match.yml up db export CB_HOST=localhost CB_USER=Administrator CB_PSWD=password ./wait-for-couchbase.sh echo "Couchbase is ready!" mvn spring-boot:run -Dspring-boot.run.arguments="--storage.host=$CB_HOST storage.username=$CB_USER storage.password=$CB_PSWD" 既存のCouchbase Serverを実行して正しく構成している場合は、次のコマンドを実行できます。 mvn spring-boot:run -Dspring-boot.run.arguments="--storage.host=localhost storage.username=Administrator storage.password=password" 最後に、サンプルのフロントエンドVueアプリケーションが変更に対してどのように機能するかを確認したい場合は、次のコマンドで実行します。 docker-compose -f mix-and-match.yml up frontend フロントエンドのマニュアル実行 Dockerを使用せずにフロントエンドコンポーネントを手動で実行するには、こちらのガイドに従ってください https://github.com/couchbaselabs/try-cb-frontend-v2 参考情報 上記のリポジトリ中には、「Couchbase 4.0」という記述が見えますが、現在の内容は、Couchbase Server 7.0に基づいています。

いつも、laravel+Vue.jsでSPAを作る時、プロジェクトのあるディレクトリに移動してから$ php artisan serveでlocalhost:8000を立ち上げ、ターミナルの別ウィンドウでプロジェクトのあるディレクトリに移動してから$ npm run watchをしてlocalhost:3000を開いて、書いたコードがどの様に反映されるか確認しながらやってた。 でも突然、なぜかエラーがいっぱい出て、localhost:3000がブラウザで開かなかった。 今回は、そんな時の解決法を備忘録として書いておこうと思います。 エラーの詳細 入力後の出力結果はこちら。 $ npm run watch Error: Missing binding /Users/saya/Documents/laravel_Vue_SPA/node_modules/node-sass/vendor/darwin-x64-72/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x Found bindings for the following environments: - OS X 64-bit with Node.js 10.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to download the binding for your current environment. at module.exports (/Users/saya/Documents/laravel_Vue_SPA/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/Users/saya/Documents/laravel_Vue_SPA/node_modules/node-sass/lib/index.js:14:35) at Module._compile (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:194:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:161:20) at Object.<anonymous> (/Users/saya/Documents/laravel_Vue_SPA/webpack.mix.js:11:21) at Module._compile (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:194:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:161:20) at Object.<anonymous> (/Users/saya/Documents/laravel_Vue_SPA/node_modules/laravel-mix/setup/webpack.config.js:12:1) at Module._compile (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:194:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (/Users/saya/Documents/laravel_Vue_SPA/node_modules/v8-compile-cache/v8-compile-cache.js:161:20) at WEBPACK_OPTIONS (/Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13) at requireConfig (/Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6) at /Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17 at Array.forEach (<anonymous>) at module.exports (/Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15) at /Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/cli.js:71:45 at Object.parse (/Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/node_modules/yargs/yargs.js:576:18) at /Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/cli.js:49:8 at Object.<anonymous> (/Users/saya/Documents/laravel_Vue_SPA/node_modules/webpack-cli/bin/cli.js:366:3) at Module._compile (internal/modules/cjs/loader.js:1138:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) な…長い。 冷静に、エラーメッセージを読み解いてみる こんなに長いメッセージが出ると萎えちゃってやめたくなりますが、此処はひとつ冷静に読み解いてみます。 まず注目したのは序盤のメッセージです。 Error: Missing binding /Users/saya/Documents/laravel_Vue_SPA/node_modules/node-sass/vendor/darwin-x64-72/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x Found bindings for the following environments: - OS X 64-bit with Node.js 10.x これによると、どうやらNode.jsのバージョンが今は12系になっているけれど、前は10系使ってたじゃん！ と言っている模様です。 あまり記憶はないのですが、そういえば最近、nvmで他のアプリケーションを作ろうとNode.jsの環境を変更しました。(浮気者ですね) 今はNode.jsをグローバルのバージョンを見に行く様になっているので、こういうことが起きるんですね。(多分) ローカルでバージョンをそれぞれ分けるとかやれる様になるといいんですがね。今後の課題です。。 さらにその下の行を読み進めます。 This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to download the binding for your current environment. nom installをしてから、環境が変わるとこれが起きますよ。 $ npm rebuild node-sassを実行して、現在の環境用のバインディングをダウンロードしてね、とのこと。 なるほど。 それだけでいいのですか。 $ npm rebuild node-sass Binary found at /Users/UserName/Documents/laravel_Vue_SPA/node_modules/node-sass/vendor/darwin-x64-72/binding.node Testing binary Binary is fine node-sass@4.14.1 /Users/UserName/Documents/laravel_Vue_SPA/node_modules/node-sass これで、また$ npm run watchすれば、ちゃんとlocalhost:3000の画面がブラウザで立ち上がりました！ よかったよかった。

GitHubのIssueを業務や個人開発でもっと使いやすくするChrome拡張「Mokuren」を作りました。 エンジニアやプロジェクトマネージャーの方に使っていただけると、劇的に変わると思います。 仕事の隙間時間を使いながらコツコツ開発してきましたが、無事公開できました。 開発は半年くらいかかったと思います。友人との開発だったので感謝でいっぱいです。 今回は、Mokurenの紹介と技術周りの話を書いていきます。 個人開発をしている人のモチベアップにでも繋がれば嬉しいです。 その前にさくっとMokurenについて紹介させてください。 Mokurenを使ってる人のGitHubの画面 こちらはGitHubのIssue一覧の画面です。画面右側と下に普段見ないような表示があります。 これがMokurenの機能です。 機能紹介 (画面右側)サイドバー これはIssue一覧画面からIssueの詳細情報をサイドバーで開けるようにした機能です。 Issue一覧ページから離れずに、詳細情報を見たりコメントしたりラベルも変えられます。 動画でのが伝わりやすいかと思うので、Twitterにあげたやつですが再生してみてください。 (画面下)ピン 次はピンです。ピンはIssueやPull requestをピンしておけばGitHub上の全てのページからアクセスできる機能です。 エンジニアだったら実装に関係するIssueやPull request。Issueを管理する立場の方なら、後で確認するIssueをサクッとピンしておくなどの使い方ができると思います。 こちらも動画があるのでよかったら再生してください！ 技術周りの話 ここからは技術周りについてです。 Mokurenの動作環境 Vue.js typescript Firebase Realtime database GitHub API V4 Apollo sass Chrome拡張でVue.jsを使うには Webアプリケーションを作るならvue cliやnuxtを選択する手もありましたが、今回はGitHubページのDom操作をしないといけないため、 Vueインスタンスを直接埋め込む方式にしました。 以下は例です。 new Vue({ store: store, render: (h) => h(App), }).$mount("#id"); ビルドにはこちらのpackageを使用しました。ここら辺需要があれば別記事で詳しく書こうと思います。 https://github.com/adambullmer/vue-cli-plugin-browser-extension GitHub V4を選んだ理由 GitHub APIのv4はGraphQLなのですが、今まで使ったことがありませんでした。 それでも使用した理由は、Mokurenの仕組み上、GitHub内の複雑な情報を取得しないといけなく REST APIだとリクエスト数が半端ないことになってしまいました。 GraphQLは取得するデータをフロント側が操作できるので、普通であれば10回リクエストしないといけないところを1回で済み、パフォーマンス的にも向上しました。 リリースした後 ProductHuntといった海外の、プロダクト投稿サイトに載せました。 毎日ランキングが走るサービスで、Mokurenはその日の8位になりました。 この時の記事はnoteに書きましたが、多くのユーザー流入がありました。個人開発だと作って使われずに終わるケースになりがちですが、いろんな人に使ってもらえるのでProductHuntはお勧めです。 よかったこと まだユーザー数はそんなの多くないですが、毎日使ってくださるユーザーやフィードバックをくださるユーザーがいて嬉しい はじめてtypescriptを使ったがもうjavascriptには戻れない 大変だったこと 初めてのtsだったのでインプット大変だった リリース前にテストユーザーにいろいろフィードバックもらったが、初期は全然使われないものだった 使ってくれる人がいるのかの不安との戦い 正直多変なことの方が数では多いです。 でも使ってくれる人がいるだけで、その辛さはどこかへ消えてしう瞬間があります。 とはいえまだまだ改善の余地があるのでコツコツと続けていきたいです。 ここまで読んでいただきありがとうございます。 もしよかったらMokurenを使ってみてフィードバックをいただけると嬉しいです

GitHubのIssueを業務や個人開発でもっと使いやすくするChrome拡張「Mokuren」を作りました。 エンジニアやプロジェクトマネージャーの方に使っていただけると、劇的に変わると思います。 仕事の隙間時間を使いながらコツコツ開発してきましたが、無事公開できました。 開発は半年くらいかかったと思います。友人との開発だったので感謝でいっぱいです。 今回は、Mokurenの紹介と技術周りの話を書いていきます。 個人開発をしている人のモチベアップにでも繋がれば嬉しいです。 その前にさくっとMokurenについて紹介させてください。 Mokurenを使ってる人のGitHubの画面 こちらはGitHubのIssue一覧の画面です。画面右側と下に普段見ないような表示があります。 これがMokurenの機能です。 機能紹介 (画面右側)サイドバー これはIssue一覧画面からIssueの詳細情報をサイドバーで開けるようにした機能です。 Issue一覧ページから離れずに、詳細情報を見たりコメントしたりラベルも変えられます。 動画でのが伝わりやすいかと思うので、Twitterにあげたやつですが再生してみてください。 (画面下)ピン 次はピンです。ピンはIssueやPull requestをピンしておけばGitHub上の全てのページからアクセスできる機能です。 エンジニアだったら実装に関係するIssueやPull request。Issueを管理する立場の方なら、後で確認するIssueをサクッとピンしておくなどの使い方ができると思います。 こちらも動画があるのでよかったら再生してください！ 技術周りの話 ここからは技術周りについてです。 Mokurenの動作環境 Vue.js typescript Firebase Realtime database GitHub API V4 Apollo sass Chrome拡張でVue.jsを使うには Webアプリケーションを作るならvue cliやnuxtを選択する手もありましたが、今回はGitHubページのDom操作をしないといけないため、 Vueインスタンスを直接埋め込む方式にしました。 以下は例です。 new Vue({ store: store, render: (h) => h(App), }).$mount("#id"); ビルドにはこちらのpackageを使用しました。ここら辺需要があれば別記事で詳しく書こうと思います。 https://github.com/adambullmer/vue-cli-plugin-browser-extension GitHub V4を選んだ理由 GitHub APIのv4はGraphQLなのですが、今まで使ったことがありませんでした。 それでも使用した理由は、Mokurenの仕組み上、GitHub内の複雑な情報を取得しないといけなく REST APIだとリクエスト数が半端ないことになってしまいました。 GraphQLは取得するデータをフロント側が操作できるので、普通であれば10回リクエストしないといけないところを1回で済み、パフォーマンス的にも向上しました。 リリースした後 ProductHuntといった海外の、プロダクト投稿サイトに載せました。 毎日ランキングが走るサービスで、Mokurenはその日の8位になりました。 この時の記事はnoteに書きましたが、多くのユーザー流入がありました。個人開発だと作って使われずに終わるケースになりがちですが、いろんな人に使ってもらえるのでProductHuntはお勧めです。 よかったこと まだユーザー数はそんなの多くないですが、毎日使ってくださるユーザーやフィードバックをくださるユーザーがいて嬉しい はじめてtypescriptを使ったがもうjavascriptには戻れない 大変だったこと 初めてのtsだったのでインプット大変だった リリース前にテストユーザーにいろいろフィードバックもらったが、初期は全然使われないものだった 使ってくれる人がいるのかの不安との戦い 正直多変なことの方が数では多いです。 でも使ってくれる人がいるだけで、その辛さはどこかへ消えてしう瞬間があります。 とはいえまだまだ改善の余地があるのでコツコツと続けていきたいです。 ここまで読んでいただきありがとうございます。 もしよかったらMokurenを使ってみてフィードバックをいただけると嬉しいです

本番環境へのデプロイ時に rails assets:precompile RAILS_ENV=production を実行すると、 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. とエラーがでた。 デプロイするときに rails assets:precompile RAILS_ENV=production を実行時に以上のようなエラーがでた。。。 babel/preset-env 設定で "loose" オプションが "false" に設定されていますが、@babel/plugin-proposal-class-properties の "loose" モードオプションが "true" に設定されているため、@babel/plugin-proposal-private-property-in-object では使用されません。 loose" オプションは、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-private-methods、および @babel/plugin-proposal-property-in-object (これらが有効な場合) で同じでなければなりません。 ["@babel/plugin-proposal-property-in-object", { "loose": true }] を「プラグイン」セクションに明示的に追加することで、この警告を消すことができます。 をBabel設定の「plugins」セクションに追加してください。 ちょっと何言ってるか分からない(サンド冨澤風) var/www/coffee_passport/app/javascript/packs/components/static_pages' の '/public/assets/images/coffee_gif.gif' を解決します。 記述ファイルを使用しています。/var/www/coffee_passport/package.json (相対パス: ./app/javascript/packs/components/static_pages) フィールド 'browser' に有効なエイリアス構成が含まれていません。 記述ファイルがありません 拡張子がない 多分問題はこっちなのかな。。。 一旦こっちの問題を解決したいと思います。 [ec2-user@ip-10-0-10-10 coffee_passport]$ vi package.json を実行して package.json "name": "coffee_passport", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0-alpha", "@rails/activestorage": "^6.0.0-alpha", "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "4.3.0", "axios": "^0.21.1", "rails-ujs": "^5.2.6", "turbolinks": "^5.2.0", "vue": "^2.6.12", "vue-axios": "^3.2.4", "vue-carousel": "^0.18.0", "vue-eslint-parser": "^7.6.0", "vue-js-modal": "^2.0.1", "vue-loader": "^15.9.6", "vue-router": "^3.5.1", "vue-template-compiler": "^2.6.12", "vue-youtube": "^1.4.0", "vuex": "^3.6.2" }, "version": "0.1.0", "devDependencies": { "@webpack-cli/serve": "^1.5.2", "webpack-dev-server": "^3.11.2" } } わからないけど、vueファイルに色々記述して、画像をvueファイルのほうで読み込むために public/assets/images配下に画像を設置してたので、 上手くいかなかった的な？ production.rbで設定が必要な感じ？？ そもそもなぜpublic/assets/images配下に画像を設置してたのかというと、app/assets配下の画像をvueファイルのほうで読み込もうとするとめんどくさかったから。。。 とのことですのでconfig/environments/production.rb に以上の記述をした。 したら、 [ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.78s. yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.22s. Everything's up-to-date. Nothing to do こんなかんじでエラーは表示されなくなった！！ だがしかし、、、 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: { "application.js": "/packs/js/application-3538e0dca107d3630558.js", "application.js.map": "/packs/js/application-3538e0dca107d3630558.js.map", "components/Home.js": "/packs/js/components/Home-ad21ec7dc038d47a3482.js", "components/Home.js.map": "/packs/js/components/Home-ad21ec7dc038d47a3482.js.map", "components/about_coffee_passport.js": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js", "components/about_coffee_passport.js.map": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map", "components/contact.js": "/packs/js/components/contact-b1ef171175665ddc89b8.js", "components/contact.js.map": "/packs/js/components/contact-b1ef171175665ddc89b8.js.map", "components/drinks/show.js": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js", "components/drinks/show.js.map": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map", "components/footer.js": "/packs/js/components/footer-ce242222576e7516708a.js", "components/footer.js.map": "/packs/js/components/footer-ce242222576e7516708a.js.map", "components/like/likeButton.js": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js", "components/like/likeButton.js.map": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map", "components/search.js": "/packs/js/components/search-3a946d78542c0511990c.js", "components/search.js.map": "/packs/js/components/search-3a946d78542c0511990c.js.map", "entrypoints": { "application": { "js": [ "/packs/js/application-3538e0dca107d3630558.j 本番環境でこのようなエラーに、、、 rails assets:precompile RAILS_ENV=production がうまくいかなかったのかな。。。 app/javascript/packs/app_explain.js import Vue from 'vue' import appExplain from '../packs/components/static_pages/appExplain.vue' document.addEventListener('DOMContentLoaded', () => { var app = new Vue({ el: '#app-explain', components: { "app_explain": appExplain }, render: h => h(appExplain) }).$mount() //document.body.appendChild(appExplain.$el) }) app/javascript/components/static_pages/appExplain.vue <template> <div> <div class="top-explain"> <div class="explain-wrapper"> <img class="" :src="require('/public/assets/images/coffee_gif.gif')"> <div class="explain-wrapper-title"> <h3 class="explain-wrapper-title" >Von Voyage!</h3> <p class="">Coffee Passportとはあなたが出会ったコーヒーの記録を共有できるサービスです</p> </div> </div> <div class="explain-wrapper"> <ruby> <h3 class="explain-wrapper-title">出会ったコーヒーをシェアしよう</h3> <rt class="explain-wrapper-title-en">share your favorite coffee</rt> </ruby> <p class="explain-wrapper-info"> 出会ったコーヒーの感想を記録して共有しましょう。 その投稿が、素敵なコーヒーを求めてる誰かのヒントになるでしょう。 </p> <img class="explain-post-img" :src="require('/public/assets/images/post.png')" > </div> <div class="explain-wrapper"> <ruby> <h3 class="explain-wrapper-title">コーヒーを探す旅へ</h3> <rt class="explain-wrapper-title-en">vayage to find coffee</rt> </ruby> <p class="explain-wrapper-info"> お気に入りのコーヒーに出会いたいときは、検索してみましょう。 コーヒーの名前、コク、酸味、産地、加工法などで検索できます。 </p> </div> <div class="explain-wrapper"> <ruby> <h3 class="explain-wrapper-title">素敵なコーヒーがあなたの手元に</h3> <rt class="explain-wrapper-title-en">special coffee will come to your house</rt> </ruby> <p class="explain-wrapper-info"> コーヒーを家でも楽しみたいなら、素敵なコーヒーのラインナップを 取り揃えておりますので、ぜひお求めください。 </p> <!-- <video :src="require('/public/assets/images/buy.mp4')" autoplay muted> --> <carousel :per-page="1" :autoplay=true :loop=true :autoplayTimeout=1500> <slide> <img class="sold-item-explain" :src="require('/public/assets/images/sold_item1.png')"> </slide> <slide> <img class="sold-item-explain" :src="require('/public/assets/images/sold_item2.png')"> </slide> <slide> <img class="sold-item-explain" :src="require('/public/assets/images/sold_item3.png')"> </slide> <slide> <img class="sold-item-explain" :src="require('/public/assets/images/sold_item4.png')"> </slide> </carousel> </div> <div class="explain-wrapper"> <ruby> <h3 class="explain-wrapper-title">いいねやコメントで盛り上がろう</h3> <rt class="explain-wrapper-title-en">smash that like button and comment </rt> </ruby> <p class="explain-wrapper-info"> 気に入った投稿に「いいね」を押したり、コメントして 一杯のコーヒーが生み出すコミュニティに参加しましょう。 </p> </div> </div> </div> </template> <script> import { Carousel, Slide } from 'vue-carousel'; export default { components: { Carousel, Slide } } </script> app/views/sessions/new.html.erb <div id="app-explain"> <%= javascript_pack_tag 'app_explain' %> </div> このような感じで自作vueファイルをerbに表示させていました。。。 まぁ恐らくだが、production.rb の production.rb config.serve_static_assets = true config.serve_static_files = true config.public_file_server.enabled = true ここが問題な気がする。。。 しかしこの部分を削除したら、さっきのようなエラーがでるが、、。。。 本番環境でpublic以下の画像を参照するときは色々設定が必要じゃないか説。 この説が無理だったら、なんとかvueファイルのほうで　app/asset/images以下の画像を読み込めるように設定します。 ってことで production.rb config.public_file_server.enabled = true だけを記述。 rails assets:precompile RAILS_ENV=production は問題なし。。 だけどエラー変わらず。 production.rb の設定を元に戻して、 [ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.53s. yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.30s. Everything's up-to-date. Nothing to do と、エラーが起きなかった。。。なんで。。。 もちろんgit pull origin masterも実行して、ちゃんと変更を反映させてる。。。。 [ec2-user@ip-10-0-10-10 environments]$ vim production.rb production.rb Rails.application.configure do # Settings specified here will take precedence over those in config/application.rb. host = 'http://18.179.97.156' Rails.application.routes.default_url_options = {host: host,protocol: 'http'} config.action_mailer.raise_delivery_errors = true config.action_mailer.delivery_method = :smtp ActionMailer::Base.smtp_settings = { #enable: true, address: 'smtp.sendgrid.net', port: 587, domain: 'gmail.com', authentication: :plain, user_name: "apikey", password: ENV['SENDGRID_PASSWORD'], enable_starttls_auto: true #openssl_verify_mode: 'peer', #ssl: 465, #tls: false } # publicディレクトリ以下に置かれたあらゆるアセットは # アプリケーション、またはWebサーバーによって静的な # ファイルとして取り扱われます。 # Code is not reloaded between requests. config.cache_classes = true # Eager load code on boot. This eager loads most of Rails and # your application in memory, allowing both threaded web servers # and those relying on copy on write to perform better. # Rake tasks automatically ignore this option for performance. config.eager_load = true # Full error reports are disabled and caching is turned on. config.consider_all_requests_local = true config.action_controller.perform_caching = true # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"] # or in config/master.key. This key is used to decrypt credentials (and other encrypted files). config.require_master_key = true # マスターキーの指定もれを防ぐために必要 # Disable serving static files from the `/public` folder by default since # Apache or NGINX already handles this. しっかりと、反映できてる。。。 んーー、なぜ以前の 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 が rails assets:precompile RAILS_ENV=production 時に起きないのかが気になる。。 ちなみに本番環境の app.vue <router-link to="/user" @click.native="getUserId(drink.user_id)"> も機能してない。。。 ユーザーの詳細ページをrouter-linkで表示させたいが、全く反応しない。。。。 一旦git reset productionを弄る前の状態に戻す。一応。 git reset --hard nsdjfnsff みたいな感じ、 git push origin +master 　をして完全に戻ったが 本番環境で git pull origin masterをしても Already up to date. となって変更が反映されていない。。 色々すったもんだあったあとに、 本番環境で rails assets:precompile RAILS_ENV=production を実行したら、 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. 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. 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 at normalResolver.resolve (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25) at doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn44 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at resolver.doResolve._ignoreErrors (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn1 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at fs.stat (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15) at process.nextTick (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15) at process._tickCallback (internal/process/next_tick.js:61:11) 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 .vue Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.vue doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.js doesn't exist .sass Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.sass doesn't exist .scss Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.scss doesn't exist .css Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.css doesn't exist .module.sass Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.sass doesn't exist .module.scss Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.scss doesn't exist .module.css Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.css doesn't exist .png Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.png doesn't exist .svg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.svg doesn't exist .gif Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.gif doesn't exist .jpeg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.jpeg doesn't exist .jpg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.jpg doesn't exist as directory /public/assets/images/coffee_gif.gif doesn't exist root path /var/www/coffee_passport using description file: /var/www/coffee_passport/package.json (relative path: ./public/assets/images/coffee_gif.gif) no extension Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist .vue Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.vue doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.js doesn't exist .sass Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.sass doesn't exist .scss Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.scss doesn't exist .css Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.css doesn't exist .module.sass Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.sass doesn't exist .module.scss Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.scss doesn't exist .module.css Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.css doesn't exist .png Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.png doesn't exist .svg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist .gif Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.gif doesn't exist .jpeg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpeg doesn't exist .jpg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist as directory /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist 本番環境のアプリのブラウザでも 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: { "application.js": "/packs/js/application-3538e0dca107d3630558.js", "application.js.map": "/packs/js/application-3538e0dca107d3630558.js.map", "components/Home.js": "/packs/js/components/Home-ad21ec7dc038d47a3482.js", "components/Home.js.map": "/packs/js/components/Home-ad21ec7dc038d47a3482.js.map", "components/about_coffee_passport.js": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js", "components/about_coffee_passport.js.map": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map", "components/contact.js": "/packs/js/components/contact-b1ef171175665ddc89b8.js", "components/contact.js.map": "/packs/js/components/contact-b1ef171175665ddc89b8.js.map", "components/drinks/show.js": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js", "components/drinks/show.js.map": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map", "components/footer.js": "/packs/js/components/footer-ce242222576e7516708a.js", "components/footer.js.map": "/packs/js/components/footer-ce242222576e7516708a.js.map", "components/like/likeButton.js": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js", "components/like/likeButton.js.map": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map", "components/search.js": "/packs/js/components/search-3a946d78542c0511990c.js", "components/search.js.map": "/packs/js/components/search-3a946d78542c0511990c.js.map", "entrypoints": { "application": { "js": [ "/packs/js/application-3538e0dca107d3630558.js" ], "js.map": [ "/packs/js/application-3538e0dca107d3630558.js.map" ] }, "components/about_coffee_passport": { "js": [ "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js" ], "js.map": [ "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map" ] }, "components/contact": { "js": [ "/packs/js/components/contact-b1ef171175665ddc89b8.js" ], "js.map": [ "/packs/js/components/contact-b1ef171175665ddc89b8.js.map" ] }, "components/drinks/show": { "js": [ "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js" ], "js.map": [ "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map" ] }, "components/footer": { "js": [ "/packs/js/components/footer-ce242222576e7516708a.js" ], "js.map": [ "/packs/js/components/footer-ce242222576e7516708a.js.map" ] }, "components/Home": { "js": [ "/packs/js/components/Home-ad21ec7dc038d47a3482.js" ], "js.map": [ "/packs/js/components/Home-ad21ec7dc038d47a3482.js.map" ] }, "components/like/likeButton": { "js": [ "/packs/js/components/like/likeButton-e09e38a35194597b646d.js" ], "js.map": [ "/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map" ] }, "components/search": { "js": [ "/packs/js/components/search-3a946d78542c0511990c.js" ], "js.map": [ "/packs/js/components/search-3a946d78542c0511990c.js.map" ] }, "footer": { "js": [ "/packs/js/footer-b04804ecee29760096bf.js" ], "js.map": [ "/packs/js/footer-b04804ecee29760096bf.js.map" ] }, "hello_vue": { "js": [ "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js" ], "js.map": [ "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js.map" ] }, "preview": { "js": [ "/packs/js/preview-f0475e1207aa006fdf05.js" ], "js.map": [ "/packs/js/preview-f0475e1207aa006fdf05.js.map" ] }, "router/router": { "js": [ "/packs/js/router/router-3ad8b6d61d35ff908058.js" ], "js.map": [ "/packs/js/router/router-3ad8b6d61d35ff908058.js.map" ] }, "tag": { "js": [ "/packs/js/tag-d8add757194386926360.js" ], "js.map": [ "/packs/js/tag-d8add757194386926360.js.map" ] } }, "footer.js": "/packs/js/footer-b04804ecee29760096bf.js", "footer.js.map": "/packs/js/footer-b04804ecee29760096bf.js.map", "hello_vue.js": "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js", "hello_vue.js.map": "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js.map", "preview.js": "/packs/js/preview-f0475e1207aa006fdf05.js", "preview.js.map": "/packs/js/preview-f0475e1207aa006fdf05.js.map", "router/router.js": "/packs/js/router/router-3ad8b6d61d35ff908058.js", "router/router.js.map": "/packs/js/router/router-3ad8b6d61d35ff908058.js.map", "tag.js": "/packs/js/tag-d8add757194386926360.js", "tag.js.map": "/packs/js/tag-d8add757194386926360.js.map" } Extracted source (around line #3): 1 2 3 4 5 6 こんなかんじのエラーが表示されてる。 [ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.61s. yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.19s. 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. 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. 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 at normalResolver.resolve (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25) at doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn44 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at resolver.doResolve._ignoreErrors (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1) at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn1 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5) at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1) at fs.stat (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15) at process.nextTick (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15) at process._tickCallback (internal/process/next_tick.js:61:11) 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 .vue Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.vue doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.js doesn't exist .sass Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.sass doesn't exist .scss Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.scss doesn't exist .css Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.css doesn't exist .module.sass Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.sass doesn't exist .module.scss Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.scss doesn't exist .module.css Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.module.css doesn't exist .png Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.png doesn't exist .svg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.svg doesn't exist .gif Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.gif doesn't exist .jpeg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.jpeg doesn't exist .jpg Field 'browser' doesn't contain a valid alias configuration /public/assets/images/coffee_gif.gif.jpg doesn't exist as directory /public/assets/images/coffee_gif.gif doesn't exist root path /var/www/coffee_passport using description file: /var/www/coffee_passport/package.json (relative path: ./public/assets/images/coffee_gif.gif) no extension Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist .vue Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.vue doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.js doesn't exist .sass Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.sass doesn't exist .scss Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.scss doesn't exist .css Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.css doesn't exist .module.sass Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.sass doesn't exist .module.scss Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.scss doesn't exist .module.css Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.css doesn't exist .png Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.png doesn't exist .svg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist .gif Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.gif doesn't exist .jpeg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpeg doesn't exist .jpg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist as directory /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist [ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.47s. yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.15s. Everything's up-to-date. Nothing to do 一回目のrails assets:precompile RAILS_ENV=production はエラーが表示されるのに、 二回目はエラーが表示されない。。。なんで。。。 改めて質問、一回目のエラーが起きてる前提でエラー解決, EC2のターミナルで、 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' と 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. と .jpg Field 'browser' doesn't contain a valid alias configuration /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist as directory がrails assets:precompile RAILS_ENV=production 実行時に起こりました。 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: とブラウザに表示されてるエラーを　を解決。 app/view/sessions/new.html.erb <div id="app-explain"> <%= javascript_pack_tag 'app_explain' %> </div> この部分がエラーになってる。 まぁこれはコンパイルをしたらエラー解決できそうだけど、 がrails assets:precompile RAILS_ENV=production のエラーが解決できないと無理だね。 開発環境では上手くいってるのに、本番環境で以上のようなエラーが起こってしまいます。 package.json package.json { "name": "coffee_passport", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0-alpha", "@rails/activestorage": "^6.0.0-alpha", "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "4.3.0", "axios": "^0.21.1", "rails-ujs": "^5.2.6", "turbolinks": "^5.2.0", "vue": "^2.6.12", "vue-axios": "^3.2.4", "vue-carousel": "^0.18.0", "vue-eslint-parser": "^7.6.0", "vue-js-modal": "^2.0.1", "vue-loader": "^15.9.6", "vue-router": "^3.5.1", "vue-template-compiler": "^2.6.12", "vue-youtube": "^1.4.0", "vuex": "^3.6.2" }, "version": "0.1.0", "devDependencies": { "@webpack-cli/serve": "^1.5.2", "webpack-dev-server": "^3.11.2" } } ~ [ec2-user@ip-10-0-10-10 coffee_passport]$ npm install --production npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it! [ .................] / loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of npm is compatib[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of n[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of n[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version [ .................] | loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This versionpm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/rimraf as it wasn't installed by /var/www/coffee_passport/node_modules/rimraf npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/semver as it wasn't installed by /var/www/coffee_passport/node_modules/semver npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/mkdirp as it wasn't installed by /var/www/coffee_passport/node_modules/mkdirp npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/cssesc as it wasn't installed by /var/www/coffee_passport/node_modules/cssesc node-sass@4.14.1 install /var/www/coffee_passport/node_modules/node-sass node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-64_binding.node Download complete Binary saved to /var/www/coffee_passport/node_modules/node-sass/vendor/linux-x64-64/binding.node Caching binary to /home/ec2-user/.npm/node-sass/4.14.1/linux-x64-64_binding.node core-js@3.16.4 postinstall /var/www/coffee_passport/node_modules/core-js node -e "try{require('./postinstall')}catch(e){}" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js: https://opencollective.com/core-js https://patreon.com/zloirock https://paypal.me/zloirock bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) node-sass@4.14.1 postinstall /var/www/coffee_passport/node_modules/node-sass node scripts/build.js Binary found at /var/www/coffee_passport/node_modules/node-sass/vendor/linux-x64-64/binding.node Testing binary Binary is fine npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN @webpack-cli/serve@1.5.2 requires a peer of webpack-cli@4.x.x but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/watchpack/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) added 72 packages from 21 contributors, removed 31 packages, updated 950 packages and audited 1184 packages in 55.046s 62 packages are looking for funding run npm fund for details found 8 vulnerabilities (2 moderate, 6 high) run npm audit fix to fix them, or npm audit for details を実行。 実行後にrails assets:precompile RAILS_ENV=production をしたら上記と一緒のエラー。 このあと再度、rails assets:precompile RAILS_ENV=production を実行したら [ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.61s. yarn install v1.22.5 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.1.3: The platform "linux" is incompatible with this module. info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.13: The platform "linux" is incompatible with this module. info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > vue-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0". warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*". warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0". warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x". warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". [4/4] Building fresh packages... Done in 4.16s. Everything's up-to-date. Nothing to do エラーが表示されなくなったが、ブラウザには 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: とブラウザに表示されてるエラーを　を解決。 app/view/sessions/new.html.erb <div id="app-explain"> <%= javascript_pack_tag 'app_explain' %> </div> このように表示されてる。 yarn upgrade-interactive --latest を実行し、全部アップグレードしたら error webpack-dev-server@4.1.1: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.24.1" Done in 109.13s. Error: Found incompatible module. at MessageError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:721:66) at new MessageError (/usr/share/yarn/lib/cli.js:750:123) at checkOne (/usr/share/yarn/lib/cli.js:48059:11) at Object.check (/usr/share/yarn/lib/cli.js:48078:5) at /usr/share/yarn/lib/cli.js:7348:73 at Generator.next () at step (/usr/share/yarn/lib/cli.js:310:30) at /usr/share/yarn/lib/cli.js:321:13 このようなエラーが表示された。 nodeをアップグレードする必要する必要があるので、 [ec2-user@ip-10-0-10-10 coffee_passport]$ npm install -g n npm WARN checkPermissions Missing write access to /usr/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/lib/node_modules npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules' npm ERR! { [Error: EACCES: permission denied, access '/usr/lib/node_modules'] npm ERR! stack: npm ERR! 'Error: EACCES: permission denied, access \'/usr/lib/node_modules\'', npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR! path: '/usr/lib/node_modules' } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: npm ERR! /home/ec2-user/.npm/_logs/2021-09-08T06_40_23_796Z-debug.log [ec2-user@ip-10-0-10-10 coffee_passport]$ sudo npm install -g n /usr/bin/n -> /usr/lib/node_modules/n/bin/n + n@7.3.1 added 1 package from 2 contributors in 0.299s sudo つけたらいけた。 [ec2-user@ip-10-0-10-10 coffee_passport]$ sudo n latest installing : node-v16.9.0 mkdir : /usr/local/n/versions/node/16.9.0 fetch : https://nodejs.org/dist/v16.9.0/node-v16.9.0-linux-x64.tar.xz installed : v16.9.0 to /usr/local/bin/node active : v10.24.1 at /bin/node https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html を参考にnvmをインストールして、 nvmを使用して、最新の安定版のnodeを使いたいと思う。 node -e "console.log('Running Node.js ' + process.version)" Running Node.js v10.24.1 とりあえず、node14系を使うことにします。 [ec2-user@ip-10-0-10-10 ~]$ node -v v14.17.6 最新の安定版を使えました。 ってことで再度、 yarn upgrade-interactive --latest [ec2-user@ip-10-0-10-10 ~]$ yarn upgrade-interactive --latest yarn upgrade-interactive v1.22.5 success All of your dependencies are up to date. Done in 0.03s. 全部の依存関係がクリアされた？？？ 再度、rails assets:precompile RAILS_ENV=production を実行。 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 /var/www/coffee_passport/node_modules/webpack/lib/Compilation.js:925:10 at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:401:22 at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:130:21 at /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 at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5 at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15 at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15 at processTicksAndRejections (internal/process/task_queues.js:77:11) 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 クソ長いエラーが表示されたけど、抜粋するとこんなエラーがでた。。。 んーー、分からんん。。。。。 開発環境では ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' 　このようなエラーが表示されないので、、、、・。。。

visual studio code で "export 'default' (imported as 'firebase') was not found in 'firebase/app' ブラウザのconsoleでは Cannot read property 'initializeApp' of undefined え〜〜〜と思ってアチコチ調べたらこちらにありました。 import firebase from 'firebase/compat/app' 取り急ぎ情報まで。