https://qiita.com/MoguraStore/items/ca80c99c5542898ec3b5
https://qiita.com/masarashi/items/6b437596c81a2c6347a4
https://github.com/rails/webpacker/blob/5-x-stable/docs/docker.md

Docker開発環境で、少しCSSを修正するだけで、すこしVueファイルを書き換えただけで、そこから
ブラウザに反映されるまで結構遅いので、それを解消していきたい。

そもそもコンパイルとは。。。

人間が分かるソースコードを、コンピュータが分かるバイナリコードに変換すること。

翻訳みたいな感じです。

docker-compose.yml


version: '3'
services:
  db:
    image: mysql:8.0.21
    cap_add:
     - SYS_NICE
      # コンテナにLinux機能を追加するオプションのようです。SYS_NICEは、プロセスの優先度(nice値)をあげます。
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_HOST: db
    ports:
      - '3306:3306'
    volumes:
      - mysql-data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password # 認証方式を8系以前のものにする
  web: &web
    build: .
    command: ./bin/rails s -b 0
    stdin_open: true 
    tty: true
    # この2文を追加でコンテナ内の標準入出力をローカルマシンのターミナルにアタッチする準備が整います。
    volumes:
      - .:/coffee_passport
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      RAILS_MASTER_KEY: ${RAILS_MASTER_KEY}
      SENDGRID_API_KEY: ${SENDGRID_API_KEY}
      ADMIN_USER_PASSWORD: ${ADMIN_USER_PASSWORD}
      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
      GOOGLE_USER_NAME: ${GOOGLE_USER_NAME}
      GOOGLE_PASSWORD: ${GOOGLE_PASSWORD}
      SENDGRID_USER_NAME: ${SENDGRID_USER_NAME}
      SENDGRID_PASSWORD: ${SENDGRID_PASSWORD}
      PAYJP_SECRET_KEY: ${PAYJP_SECRET_KEY}
      PAYJP_PUBLIC_KEY: ${PAYJP_PUBLIC_KEY}
      MYSQL_HOST: db
# selenium_chrome を使うために以下の行を追加
      SELENIUM_DRIVER_URL: http://selenium_chrome:4444/wd/hub"
  selenium_chrome:
    image: selenium/standalone-chrome-debug
    logging:
      driver: none
  webpacker:
    <<: *web
    command: ./bin/webpack-dev-server
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    ports:
      - "3035:3035"
volumes:
  mysql-data:
    driver: local
  vendor_bundle:
    driver: local

まあこんな感じで。

docker build したら

bundler::GemNotFoundとか言われたので、

docker-compose run web bundle install

をして
もう一回docker-compose buildをして

docker-compose upをした

docker-compose up --buildと実行してもいいかもしれない。

したら立ち上がった！！

おー、なんだかしらんけどめっちゃ早くなった。。。！！！！！

webコンテナでwebpackerを動かしてるからなのかな

web_1              |   ↳ app/helpers/sessions_helper.rb:52:in `current_user'
webpacker_1        | ℹ ｢wdm｣: Hash: 0a83921229f4d3830571
webpacker_1        | Version: webpack 4.44.2
webpacker_1        | Time: 351ms
webpacker_1        | Built at: 08/28/2021 6:19:59 AM
webpacker_1        |                                                           Asset      Size                            Chunks                         Chunk Names
webpacker_1        |                          js/application-624a05864c1609de4951.js   489 KiB                       application  [immutable]            application
webpacker_1        |                      js/application-624a05864c1609de4951.js.map   553 KiB                       application  [dev]                  application
webpacker_1        |                      js/components/Home-361b382044fa0e6212c9.js   398 KiB                   components/Home  [immutable]            components/Home
webpacker_1        |                  js/components/Home-361b382044fa0e6212c9.js.map   446 KiB                   components/Home  [dev]                  components/Home
webpacker_1        |     js/components/about_coffee_passport-2b1e5adb925263f552c2.js   402 KiB  components/about_coffee_passport  [immutable]            components/about_coffee_passport
webpacker_1        | js/components/about_coffee_passport-2b1e5adb925263f552c2.js.map   450 KiB  components/about_coffee_passport  [dev]                  components/about_coffee_passport
webpacker_1        |                   js/components/contact-0e386a5175c9bf39f684.js   400 KiB                components/contact  [immutable]            components/contact
webpacker_1        |               js/components/contact-0e386a5175c9bf39f684.js.map   448 KiB                components/contact  [dev]                  components/contact
webpacker_1        |               js/components/drinks/show-f0370d049a91a61a3736.js   405 KiB            components/drinks/show  [immutable]            components/drinks/show
webpacker_1        |           js/components/drinks/show-f0370d049a91a61a3736.js.map   453 KiB            components/drinks/show  [dev]                  components/drinks/show
webpacker_1        |                    js/components/footer-57b13b2727143062a5c1.js   399 KiB                 components/footer  [immutable]            components/footer
webpacker_1        |                js/components/footer-57b13b2727143062a5c1.js.map   446 KiB                 components/footer  [dev]                  components/footer
webpacker_1        |           js/components/like/likeButton-9e5b1dc6936d87ee53ba.js   491 KiB        components/like/likeButton  [immutable]            components/like/likeButton
webpacker_1        |       js/components/like/likeButton-9e5b1dc6936d87ee53ba.js.map   538 KiB        components/like/likeButton  [dev]                  components/like/likeButton
webpacker_1        |                    js/components/search-f76bc5973a92117dd7b5.js   395 KiB                 components/search  [immutable]            components/search
webpacker_1        |                js/components/search-f76bc5973a92117dd7b5.js.map   444 KiB                 components/search  [dev]                  components/search
webpacker_1        |                               js/footer-b2b18c8d7b63b0095eee.js   819 KiB                            footer  [immutable]            footer
webpacker_1        |                           js/footer-b2b18c8d7b63b0095eee.js.map   955 KiB                            footer  [dev]                  footer
webpacker_1        |                            js/hello_vue-8c7769b281f24ab4052c.js   810 KiB                         hello_vue  [emitted] [immutable]  hello_vue
webpacker_1        |                        js/hello_vue-8c7769b281f24ab4052c.js.map   917 KiB                         hello_vue  [emitted] [dev]        hello_vue
webpacker_1        |                              js/preview-aa96d8501f36b698de20.js   394 KiB                           preview  [immutable]            preview
webpacker_1        |                          js/preview-aa96d8501f36b698de20.js.map   444 KiB                           preview  [dev]                  preview
webpacker_1        |                        js/router/router-25609a1739d573aa3112.js   812 KiB                     router/router  [immutable]            router/router
webpacker_1        |                    js/router/router-25609a1739d573aa3112.js.map   952 KiB                     router/router  [dev]                  router/router
webpacker_1        |                                  js/tag-51f49d776cc13c0cd724.js   397 KiB                               tag  [immutable]            tag
webpacker_1        |                              js/tag-51f49d776cc13c0cd724.js.map   448 KiB                               tag  [dev]                  tag
webpacker_1        |                                                   manifest.json  4.69 KiB                                    [emitted]              
webpacker_1        | ℹ ｢wdm｣: Compiled successfully.

webpackerコンテナを用意するまでは、今まではwebpackerをどこで動かしていたのか。。。。

web: &web
<<: *web
とかは、継承してるかんじ。
ただ、 command:
とか、 ports:とか
webコンテナとかぶってるオプション？とかは
上書きされる。といった認識。
間違ってたら指摘していただければ幸いです。