DockerにWebpacker環境構築(jquery, Bootstrap5, Vue) (CI/CDまでの道②)
はじめに
前回に引き続き、今回はRails環境にWebpacker
を導入して、jquery
、Bootstrap5
, Vue.js
を利用できるようにしていきます。
作成に使用するリポジトリはこちらとなります。
CI/CDの道シリーズ
- ① Rails6+MySQLのDocker環境構築
- ② DockerにWebpacker環境構築(jquery, Bootstrap5, Vue) (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 . /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を色々追加していこうかなと思います。
Discussion
docker-compose.ymlですが以下の行があると
「- /myapp/node_modules」
私の環境ではnode_modules以下のファイルをimportできなくなってしまいます。
この行を削除すれば読み込めました。