Zenn
📚

DockerにWebpacker環境構築(jquery, Bootstrap5, Vue) (CI/CDまでの道②)

2022/01/13に公開1件
Docker
Rails
#
webpacker
tech

はじめに

前回に引き続き、今回はRails環境にWebpackerを導入して、jquery、Bootstrap5, Vue.jsを利用できるようにしていきます。

作成に使用するリポジトリはこちらとなります。

CI/CDの道シリーズ

環境

  • WSL2 (Ubuntu20.04)
  • Docker 20.10.9
  • docker-compose 1.29.1
  • Git 2.25.1
  • VSCode

Webpacker環境構築

Docker上のRailsアプリにWebpackerを導入してみる

Rails6.1 + Webpacker + MySQLをDocker composeで構築する

こちらの記事を参考に環境を構築していきます。

まずdocker-compose.ymlを修正します。

version: "3.9"
services:
  rails:
    build: .
    container_name: rails
    command: ash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
      - public-data:/myapp/public
    ports:
      - "3000:3000"
    env_file:
      - .env
    depends_on:
      - db
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker

  webpacker:
    build: .
    container_name: webpacker
    volumes:
      - .:/myapp
      - /myapp/node_modules
      - public-data:/myapp/public
    command: ./bin/webpack-dev-server
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    ports:
      - "3035:3035"


  db:
    image: mysql:8.0.27
    container_name: db
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    ports:
      - "3306:3306"
    volumes:
      - db:/var/lib/mysql

volumes:
  db:
    driver: local
  bundle:
    driver: local
  public-data:

だいたいは参考記事と同じですが、railsとwebpackerでpublic-dataでボリュームを共有しています。これはpublic/packs/manifest.jsonというファイルをVueを利用するために共有する必要があるからです。また、webpackerで/myapp/node_modulesをボリュームに指定するのは次で編集するDockerfileの中でyarn installした際に作成される/node_modulesをコンテナで利用するためです(ボリューム指定しないと削除されてしまいます)
このボリュームを指定することでcommand: webpack-dev-serverを/node_modulesから利用することができます。

詳しくはこちらの記事を確認ください。

次にDockerfileを編集します。

FROM ruby:alpine3.13

ARG UID

RUN adduser -D app -u ${UID:-1000} && \
      apk update \
      && apk add --no-cache gcc make libc-dev g++ mariadb-dev tzdata nodejs~=14 yarn

WORKDIR /myapp
COPY Gemfile .
COPY Gemfile.lock .
RUN bundle install
COPY --chown=app:app . /myapp
RUN yarn install
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
# EXPOSE 3000
# CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]

USER app
RUN mkdir -p tmp/sockets
RUN mkdir -p tmp/pids

コンテナの中のデフォルトユーザーをappに変更しました。この設定をすることでコンテナ内でファイルを作成(rails gコマンドなど)した際にrootで作成されてWSL2と権限が違うためVSCodeで編集できない問題を解決します。
また、yarn installをすることで、package.jsonから/node_modulesを作成しています。

では、Webpackerを起動します。

$ docker-compose up

起動することができました。

javascriptとCSSが適応されるか確認

Docker上のRailsアプリにWebpackerを導入してみる

こちらを参考に必要なフォルダを作成してjavascript, cssが動くことをまず確認します。

まずはapp/javascript/にjavascriptsとstylesheetsというフォルダを作成します。

javascripts/にapplication.jsを作成
stylesheets/にapplication.scssを作成

すると以下のようなファイル構成になります。

/app/javascript:
  ├── packs:
  │   # ここに置いたファイルが読み込まれる
  │   └── application.js
  └── javascripts:
  │   └── application.js
  └── stylesheets:
      └── application.scss

app/javascripts/packs/application.jsに変更します

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "bootstrap"

import '../javascripts/application.js'
import '../stylesheets/application.scss'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

この設定をすることでpacks/application.jsを読み込んだファイルはjavascripts/application.jsとstylesheets/application.scssの内容を適応することができます。

まずは、Railsの全てのViewに適応させるためapp/view/layouts/application.html.erbでpacks/application.jsを読み込むように設定してみます。

app/view/layouts/application.js

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%#= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%#= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application' %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

以下を変更しています。

	# コメントに変更
    <%#= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%#= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

	# 追加
    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application' %>

この状態でDockerのWebpackerのログがCompiled successfully.となっていればここまではできています。なっていない場合は、application.js, application.cssなどのファイルがあるか、場所が間違っていないか確認してください。

ここまでできたらRailsで表示する画面を準備します。
以下のコマンドでtestコントローラーを作成

# dockerを起動した状態で別のターミナルを開いて以下のコマンド
$ docker exec -it rails sh
$ rails g controller test

すると、コントローラー(app/controllers/test_controller.rb)が作成されます。以下に修正します。

app/controllers/test_controller.rb

class TestController < ApplicationController
	layout 'application'
	def index; end
end

レイアウトとしてlayouts/application.html.erbを選択しています。

次にapp/views/test/にindex.html.erbを追加して以下の内容をいれます。

<h1>Hello World</h1>
<h2>CSSが適応されると色が変わる</h2>

次にconfig/routes.rbを修正します。

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  get 'test', to: 'test#index'
end

まずはこの状態でlocalhost:3000/testにアクセスします。
うまくいけば以下のような画面になります。

それでは、CSSとjavascriptを適応していきます。

まずはapp/javascript/javascripts/application.jsを以下にします。

alert('javascriptは動いています')

javascriptが動いていれば、アラートが表示されます。

次にapp/javascript/stylesheets/application.scss

h2 {
	color: red;
}

h2タグの文字は赤(CSS)で表示するようにします。

ではlocalhost:3000/testにアクセスします。すると以下のような画面になります。

ここまでできたらCSSとjavascriptの導入は終了です。

jquery, Bootstrap5の導入

jqueryはBootstrapを導入すると利用できるようになるのでここではbootstrapの導入を紹介します。

Docker + rails6 + MySQL + bootstrap,jqueryまで環境構築完全ロードマップ

こちらを参考に設定していきます。
まずはコンテナ内にはいって必要なライブラリをインストールします。

# 別ターミナルを開く
# コンテナに入る
$ docker exec -it rails sh
$ yarn add bootstrap jquery @popperjs/core @fortawesome/fontawesome-free

app/javascript/stylesheets/application.scssを以下に修正します。

@import 'bootstrap/scss/bootstrap'; # 追加

h2 {
	color: red;
}

app/javascript/pack/application.jsに以下を追加

(省略)
import "channels"
import "bootstrap" # 追加
(省略)

config/webpack/environment.jsを修正します。

const { environment } = require('@rails/webpacker')
var webpack = require('webpack');

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

では、bootstrapが適応されたかを確かめてみます。

app/views/test/index.html.erbに以下を追加します。

<button type="button" class="btn btn-primary">Bootstrap適応</button>

青いボタンが表示されれば成功です。

Vue.jsの導入

【保存版】Docker上に構築したRails6でVue.jsを表示する方法（エラー対処法＆Vuetifyの使い方）

こちらを参考にしながら導入していきます。

まずはコンテナの中に入ってVueをインストールします。

# 別のターミナルを開く
# コンテナの中に入る(権限の関係でwebpackerの中で実行)
$ docker exec -it webpacker sh
$ rails webpacker:install:vue

app.vueやhello_vue.jsといったファイルが生成されます。
次にvue_roladerのバージョンを下げます。

/package.json

"dependencies": {
　　(省略)
    "vue-loader": "15.9.2",
　　(省略)
  },

そのあとコンテナの中で以下のコマンドでインストールを行います。

$ yarn install

hello_vue.jsという名前で作成されたファイルをmain.jsに変更します。

$ mv app/javascript/packs/hello_vue.js app/javascript/packs/main.js

app/views/layouts/application.jsに以下を追加します。

<%= javascript_pack_tag 'main' %>

適応するためにコンテナを落として再度起動します

# ctrl + Cでコンテナを落とす
$ docker-compose build --no-cache
$ docker-compose up

localhost:3000/testにアクセスします。

Hello Vue!と表示されれば成功です。
(public/packs/manifest.jsonが自動生成されるまではエラー画面がでます)

おわりに

今回作成したものはこちらのリポジトリにあります。
次回は、Gemを色々追加していこうかなと思います。

参考

GitHubで編集を提案

Discussion

masamasa

docker-compose.ymlですが以下の行があると
「- /myapp/node_modules」
私の環境ではnode_modules以下のファイルをimportできなくなってしまいます。
この行を削除すれば読み込めました。