既存のRailsアプリにvue.jsを組み込みたいが、error Command "webpack" not found.のエラーがでる。

Question

前提・実現したいこと

Dockerで作成中のRailsアプリでvue.jsを使えるようにしたいのです。

発生している問題・エラーメッセージ

<%=javascript_pack_tag 'hello_vue'%>と記述し、Hello Vue!は出てきますが、app.viewを編集してもデータが表示されません。
また、devツールで確認するとデータが格納されていない状態です。
vue.jsを使用するために、docker-compose run web bin/webpackコマンドを実行するとエラーが出現しますが、これがデータが反映されない原因なのか分からないのでご教示お願いします。

$ docker-compose run web bin/webpack

Creating webworks_web_run ... done
warning ../package.json: No license field                                                                                                                                                                                                    
yarn run v1.22.5
warning ../package.json: No license field
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

やったこと

①Docker.fileの編集。
②Gem.fileにgem 'webpacker'を追記。
③docker-compose run web rails webpacker:installを実行。
④docker-compose run web rails webpacker:install:vueを実行。
⑤docker-compose run web bin/webpackを実行。　->エラー発生。
⑥初期値やコントローラ、view等を作成。
⑦viewに<%=javascript_pack_tag 'hello_vue'%>と記述し、Hello Vue!は確認できている。

該当のソースコード

FROM ruby:2.6.3

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
  apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

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

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
  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 && \
  apt-get update && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
  apt-get install nodejs

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app

app.vue

<template>
  <div id="app">
      <ul>
      <li v-for="memo in memos" :key="memo.id">
        {{ memo.title }}： {{ memo.body }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      memos: "memos"
    }
  },
  mounted () {
    this.setMemo();
  },
  methods: {
    setMemo: function () {
      axios.get('/api/memos')
      .then(response => (
      this.memos = response.data
    ))
  }
 }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Answer 1

yarn installを行っていないようですが、それを追加したらどうなりますでしょうか？

Comments

[shin342]

すみません、どこに追加するばよいでしょうか？
yarn -vとすると、1.22.10と出ますがそれは関係ないですか？

[maisumakun]

dockerfileで「RUN bundle install」としていますが、その並びで「RUN yarn install」としましょう。

> yarn -vとすると、1.22.10と出ますがそれは関係ないですか？

yarn自体のインストールと別に、yarnを使ったパッケージのインストールが必要です・

[shin342]

やってみましたが同じ結果となりました。
以下のようにしたのですが合っていますでしょうか？

FROM ruby:2.6.3

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

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

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
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 && \
apt-get update && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
apt-get install nodejs

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
RUN yarn install
COPY . /app