Docker環境におけるJavaScriptの変更がブラウザに反映されないエラー

Question

はじめまして、こんには。
私はrailsにてアプリケーションを作成している初学者です。

ローカル環境で作成途中であったアプリケーションをDocker環境に移行をして作成をすすめたところ、
JavaScriptファイルの変更が反映されて問題がでており、いくつか考えられることを試してみましたが、解決に至れておりません。

なにかアドバイスを頂けないかと思い、質問をさせていただきました。
ご不明な点、資料が不足している点などありましたらお教えくださいますと幸いです。

お手数おかけしますが、よろしくお願いします。

解決したい内容

ローカル環境で作成していたアプリケーションをDocker環境に移行後、JavaScriptファイルの変更が反映されないエラーを解決できずにおります。

環境

・Ruby 2.6.5
・Rails 6.0.3
・MySQL 5.6
・macOS Catalina 10.15.6

具体的内容

・PAY.JPを用いてクレジットカード登録を行うjsファイルをローカル環境時に作成
・ローカル環境、Docker環境ともに上記jsファイルは正常に動作
・Docker環境にてjsファイルを一部修正を行うが、変更が反映されていない
・ローカル環境時に作成した部分までは認識しているが、Docker環境で変更、新規作成したjsファイルが認識、反映されてない
・CSSファイルなどjsファイル以外は正常に反映されている

確認を行った内容

▼検証ツールをもちいて、jsファイルの確認
=>修正、変更が反映されていない

▼コンテナに接続（% docker exec -it <コンテナ名> bash）して該当のファイルを確認
=> 修正、変更が反映されている

▼キャッシュ可能性を考え、Chromeシークレットモード、サファリでの動作確認
=>解決せず、変更の動作が確認できない

▼ローカル環境時に作成し、反映されているjsファイルの記述を丸ごと削除し、機能が使用できなくなるか確認
=> 機能が使用でき、ローカル環境で作成していた内容までは認識をしている

▼イメージの再作成（% docker-compose build --no-cache）を実行
=> 状況は変わらず、修正したコードが反映されない

Dockerfile, docker-compose.yml

▼Dockerfile

FROM ruby:2.6.5
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

WORKDIR /myapp
COPY Gemfile ./Gemfile
COPY Gemfile.lock ./Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

▼docker-compose.yml

version: '3'
services:
db:
image: mysql:5.6
environment:
MYSQL_ROOT_PASSWORD: pass
MYSQL_DATABASE: root
ports:
- "4306:3306"
volumes:
- mysql-data:/var/lib/mysql
web:
build: .
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
volumes:
- .:/myapp
ports:
- 3000:3000
depends_on:
- db
tty: true
stdin_open: true
env_file: env_file.env
volumes:
mysql-data:

追加で確認できた事項

▼ローカル環境に一度戻して変更内容の確認
=>変更が反映されている。また、ローカル環境ではファイルを変更した場合も都度反映されていることが確認できた

▼Docker環境にもう一度戻した場合の確認
=>ローカルから移した状態が保持されてしまい、Docker環境で行った変更が反映されない

なにかお気づきの点、アドバイスがありましたらお教えくださいますと幸いです。

Answer 1

・CSSファイルなどjsファイル以外は正常に反映されている

とのことですので
Webpackの挙動が怪しい気がします

jsファイルのディレクトリですが「app/javascript」配置をしております。

またapp/packs/application.jsには、require("../jsファイル")として読み込むようにしております。

このようなファイル構成で問題ないのかと思っておりましたが、packs内に配置すべきものなのでしょうか？？

配置は問題ない気がします
やはりWebpackが管理しているJSが何らかの理由でコンパイルされていないと思われますので

一度docker-compose run ...で以下のコマンドを試していただけますか？

rails wabpacker:compile

Comments

[covalt]

ご返信ありがとうございます！

どのあたりに検討をつけたらよいのか困っていましたが、Webpack関連が怪しいのですね。
主にネットからの情報を元に作成いたしておりました。

関係あるのかわからないのですが、最初にbuildした際にyarnのインストールでエラーがでておりましので、環境変数を設定して再度buildしてエラー自体は解決しております。

お手数お掛けてして恐縮ですが、何かアドバイスありましたら宜しくお願いします。

▼Dockerfile
```Dockerfile
FROM ruby:2.6.5
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

WORKDIR /myapp
COPY Gemfile ./Gemfile
COPY Gemfile.lock ./Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
```

▼docker-compose.yml
```docker-compose.yml
version: '3'
services:
db:
image: mysql:5.6
environment:
MYSQL_ROOT_PASSWORD: pass
MYSQL_DATABASE: root
ports:
- "4306:3306"
volumes:
- mysql-data:/var/lib/mysql
web:
build: .
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
volumes:
- .:/myapp
ports:
- 3000:3000
depends_on:
- db
tty: true
stdin_open: true
env_file: env_file.env
volumes:
mysql-data:
```

[covalt]

確認検証で得られた内容を追記させていただきます！

こちらローカル環境に一度戻して確認したところ、変更内容の反映が確認できました。
また、ローカル環境ではファイルを変更した場合も都度反映されていることが確認できました。

Docker環境にもう一度戻した場合にはローカルから移した状態が保持されてしまい、Docker環境で行った変更が反映されない、という状況も確認をしております。

そうなりますと、ローカル環境からDocker環境に移行する際の設定に問題あるのでしょうか？？

なにかお気づきの点、アドバイスがありましたらお教えくださいますと幸いです。

[naokit-dev]

追記いただいた内容は、もとの質問のところに書いていただくと他の方も見やすいです

[naokit-dev]

"変更が反映されない"JSファイルは
以下のディレクトに配置していますか？

app/javascript/packs

[covalt]

ご指摘ありがとうございます！
もとの質問に追加させていただきました。

jsファイルのディレクトリですが「app/javascript」配置をしております。
またapp/packs/application.jsには、require("../jsファイル")として読み込むようにしております。

このようなファイル構成で問題ないのかと思っておりましたが、packs内に配置すべきものなのでしょうか？？

たびたびの質問でお手数お掛けてして申し訳ございません。

[covalt]

ご返信ありがとうございます！

お教えいただいたコマンド（docker-compose run web bundle exec rails webpacker:compile)を実行したところ、下記メッセージが表示されました。

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

「yarnがインストールされていない」ということで、ココが原因かもしれません！ご指摘ありがとうございます。

ただyarnのインストールはDockerfileに記載していると思うのですが、インストールが完了していないということなのでしょうか？？

重ね重ねの質問で大変申し訳ございません。

[naokit-dev]

yarn -v

でインストールされているかどうか確認できると思います

[covalt]

ご返信ありがとうございます！

バージョン確認をおこなったところ「1.22.4」と表示はされておりますので、インストール自体はできているようでした。

引き続き原因を探して参りたいと思います。
色々とご確認いただきましてありがとうございます！他にも何か確認すべきポイントなどあればお教えくださいますと幸いです。

[naokit-dev]

一応の確認ですが
`docker-compose run web yarn -v`の結果ですよね？

[covalt]

失礼しました！!

最初「docker-compose exe web yarn -v」で試したのですが、
No such commandとなっておりましたので「yarn -v」だけのコマンドでの実行結果でございまいした。

改めて「docker-compose run web yarn -v」で試してみますと、下記の出力がされておりました。
　Starting fuuun_ramen_db_1 ... done
　/usr/bin/entrypoint.sh: line 8: exec: yarn: not found

そもそも理解が及んでおらず、お教え頂いた内容を理解できておりませんでした！大変失礼しました。
この場合、やはりyarnのインストールに原因がありそうだという事でしょうか。

[naokit-dev]

ローカルにはyarnがインストールされている
Dockerのコンテナにはyarnがインストールされていない
という可能性がありますね

docker-compose buildの過程で
yarnをインストールする辺りにエラーが出ていないか

もしくは同じコマンドでyarnをインストールしてみるといかがでしょうか？

[covalt]

沢山の質問にもご丁寧な回答を頂きまして、誠にありがとうございました！

確認検証をして進めてみたいと思います。
解決できましたら改めてお伝えさせて頂きたいと思います！

[covalt]

naokit-devさん

お世話になります！

Dockerfileを下記のようにyarnを追加して変更を行い、再度buildを行いましたところ、無事にDocker環境でもjsファイルの変更が反映されるようになりました！

ご指摘を頂けたことで無事に解決をはかることができました。
何度もご返信いただき、誠にありがとうございました！

FROM ruby:2.6.5

ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn

WORKDIR /myapp
COPY Gemfile ./Gemfile
COPY Gemfile.lock ./Gemfile.lock
RUN gem install bundler
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

[naokit-dev]

お力になれたようで幸いです