質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

1回答

2169閲覧

docker環境上でvue.jsのコンパイル時間を短縮したい

jyon3030

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2021/01/16 13:32

編集2021/01/16 13:34

前提・実現したいこと

docker環境上でvue.jsのコンパイル時間を短縮したいです。

現在dockerで開発環境を構築し、バックエンドrails, フロントエンドvue.jsで開発中です。しかし、ファイルを変更し変更内容を反映させようとリロードすると反映に時間がかかります。
なんとか時間を短縮出来ないか調べたのですが躓いています。

コンパイルを早くするために解決策などありましたら教えてもらえないでしょうか?汗

発生している問題

[Webpacker] Compiling... [Webpacker] Compiled all packs in /beauty-salon/public/packs [Webpacker] Hash: 5059c48e927511892664 Version: webpack 4.46.0 Time: 14721ms Built at: 01/16/2021 1:24:26 PM Asset Size Chunks Chunk Names js/application-c229f7c7014cf8c8d494.js 124 KiB application [emitted] [immutable] application js/application-c229f7c7014cf8c8d494.js.map 139 KiB application [emitted] [dev] application js/hello_vue-2fd4458342cf8edad529.js 266 KiB hello_vue [emitted] [immutable] hello_vue js/hello_vue-2fd4458342cf8edad529.js.map 312 KiB hello_vue [emitted] [dev] hello_vue manifest.json 689 bytes [emitted] Entrypoint application = js/application-c229f7c7014cf8c8d494.js js/application-c229f7c7014cf8c8d494.js.map Entrypoint hello_vue = js/hello_vue-2fd4458342cf8edad529.js js/hello_vue-2fd4458342cf8edad529.js.map [./app/javascript/app.vue] 1.14 KiB {hello_vue} [built] [./app/javascript/app.vue?vue&type=script&lang=js&] 364 bytes {hello_vue} [built] [./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] 361 bytes {hello_vue} [built] [./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true&] 213 bytes {hello_vue} [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/application.js] 749 bytes {application} [built] [./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built] [./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=script&lang=js&] ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 116 bytes {hello_vue} [built] [./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] ./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 763 bytes {hello_vue} [built] [./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 771 bytes {hello_vue} [built] [./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true&] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 288 bytes {hello_vue} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {hello_vue} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built] + 10 hidden modules Rendered home/index.html.erb within layouts/application (Duration: 23045.0ms | Allocations: 2634) [Webpacker] Everything's up-to-date. Nothing to do Completed 200 OK in 23115ms (Views: 23113.0ms | ActiveRecord: 0.0ms | Allocations: 5944)

試したこと

以下のサイトを参考にbin/webpack-dev-serverをターミナルで実行しましたがエラーが出て実行不可能でした、、
またdockerのコンテナ内ではcompileが遅いのですが、それ以外ではリロードしても一瞬でファイルの設定内容が反映されました。
docker環境下ではコンパイルが遅くなるのは仕方ない事なのでしょうか、、

https://fuqda.hatenablog.com/entry/2019/03/10/185043

$ bin/webpack-dev-server Traceback (most recent call last): 7: from bin/webpack-dev-server:16:in `<main>' 6: from bin/webpack-dev-server:16:in `chdir' 5: from bin/webpack-dev-server:17:in `block in <main>' 4: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/runner.rb:6:in `run' 3: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:11:in `run' 2: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `detect_port!' 1: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `new' /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `initialize': getaddrinfo: Name or service not known (SocketError)

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

docker環境下ではコンパイルが遅くなるのは仕方ない事なのでしょうか、、

コンテナ実行時に、ボリュームを作成されていますでしょうか。一般的に Docker では、ボリュームを作成せずコンテナ内で作業を行うと、Docker 内部の処理(Copy on write)によって、書き込み速度などが遅くなる可能性が高いです(解説のドキュメント)。

動的にファイルを生成したり操作するディレクトリは、Docker でボリュームを作成し、その中で操作をされることをお薦めします。

投稿2021/04/05 12:15

zembutsu

総合スコア1584

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問