Server

DockerでRails + Vue.jsの環境を作ってみる

投稿日:

はじめに

前回までのあらすじ

Vue.jsの勉強を始めたtonnyであったが、そろそろRailsの中に組み込んでみたいと思いたつ。
最近Dockerも勉強しているため、せっかくなので、Dockerで環境構築をしてみることにした。
前回までの記事はこちら。

今回の趣旨

下記のブログ、および動画でRails + Vue.jsの学習をしました。
非常に分かりやすいため、オススメです。
【動画付き】Rails 5.1で作るVue.jsアプリケーション ~Herokuデプロイからシステムテストまで~

今回はこちらの記事内容をDockerを使用して実施しました。
そのため、今回はDockerを使って、Rails + Vue.jsの環境を作った話となります。

環境

  • Docker

  • Ruby: 2.4.1
  • Ruby on Rails: 5.1.2
  • MySQL: 5.7.17
  • Node.js: 7.10.0
  • Vue.js: 2.3.4

DBは使用しませんが、前回の記事のものを流用しようと考えたので、使っています。
(また、公式のMySQLイメージを使用すると日本語が文字化けしてしまうので、その対応も記載したいと思います。)

MySQLのUTF-8対応

本項は、今回の記事の内容に必須ではありません。

前回の記事にて、Dockerの公式チュートリアルのことを取り上げました。
ただ、MySQLは公式イメージをそのままプルして使用しているだけでした。
公式イメージはデフォルトだとUTF-8対応していないので、下記の記事を参考にさせていただき、新しくMySQL用のDockerfileを作成しました。

なお、RubyコンテナもDockerfile-rubyとリネームします。
合わせてdocker-compose.ymlを修正します。

これで再度ビルドすれば、MySQLの設定ファイルに追記された上で、MySQLが起動します。
余談ですが、下記コマンドで、バックグラウンドにてビルドから立ち上げまでできます。

フォアグラウンドでログなどを見たい場合は-dオプションをなくしてください。
下記コマンドでRubyコンテナとMySQLコンテナを両方停止させることができます。

Node.jsをRubyコンテナに組み込む

Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどを組み込むことができます。
ただ、Node.jsが必要などでRubyコンテナを立ち上げる際にもろもろインストールします。
下記の記事を参考にさせていただきました。

https://terakoya.site/dev/docker-mac-rails51-vuejs-setup/

Rubyコンテナ用のDockerfileに追記し、下記のようにしました。

参考にさせていただいているRailsとVueの記事でもyarnを使用したパッケージ管理をしていたので、今回はyarnをインストールします。
Rails 5.1からnpmyarnパッケージもデフォルトでサポートされているようですね。

また、Dockerfile内でENVを使用すると環境変数を設定できます。
プロジェクトへのパスなど、変数にしておくと後々楽かと思います。
(1度、パスの記述を間違えてビルド失敗したこともあるので。。。)

Webpackerを使用してVue.jsをインストール

さて、本項はRailsのことになります。
Rails 5.1から、rails newコマンドでプロジェクトを生成する際にwebpackオプションを使用することでVue.jsやReactなどを一緒にインストールしてくれます。
例えば、下記のようなコマンドです。

これは後から追加することも可能です。
その場合はwebpackerのGemを追加します。

これでbundle installすると、webpackを生成するrailsコマンドを使用することができます。
(ex. webpacker:install
Rubyコンテナにてrailsコマンドを実行する際には、docker-compose runコマンドを使用します。
bundle installする場合は下記になります。

まずはWebpackerをインストールします。

これでWebPack関連ファイルがインストールされます。

次にVue.jsをインストールします。

これで、さらにVue.js関連のファイルが作成されるかと思います。

Vue.jsが動かない

実際にVue.jsのコードを書いて実行すると、下記のようなエラーが出て詰まりました。

下記の記事にもまとめられていますが、完全コンパイルする必要があるそうです。

Rails5.1でVue.jsで単一ファイルコンポーネントのエラーがでる(You are using the runtime-only build of Vue where the template compiler is not available)

この場合、config/webpack/shared.jsに以下のように追記してエイリアスを設定します。

devサーバーを一緒に立ち上げる

devサーバーを設定しておけば、JSをいちいちコンパイルしなくても、変更を監視して勝手にコンパイルしてくれます。
参考にさせていただいた記事でも紹介されていましたが、作成の仕方は下記の記事で記載されております。

Introducing Webpacker

記事に従って必要なファイルを作成していきます。

Gemfileに記載したら、bundle installします。

これでrails serverwebpack-dev-serverを起動させることができます。
次に、bin/serverというファイルを新たに作成し、Procfile.devに記載されたコマンドを実行するようにします。

これで普通は終了ですが、今回はDockerを使用しているので、docker-compose.ymlを修正します。

8080ポートでdevサーバーが起動しているので、そちらも通してあげます。
これで動画の通りにいけるかと思います。

さいごに

今回は主にDockerを使用して、Rails 5.1で作るVue.jsアプリケーションを実施させていただいた記事になります。
ただ、システムテストに関しまして、ChromeDriverがうまく適用できず、うまくいっておりません。
こちらは検討します。(他にも方法があるようですが。。。)

また、参考記事としてDockerでVue.jsを実施したものを紹介させていただきます。
Webpack and Docker for Development and Deployment

age_footer_300rect




age_footer_300rect




-Server
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

MySQL 5.7 オプティマイザの改善〜UNION ALL〜

1 はじめに2 「UNION」と「UNION ALL」の違い3 MySQL 5.7での「UNION ALL」の改善とは4 MySQL 5.7での実行計画4.1 UNION ALL実行計画4.2 UNI …

InnoDBでauto_incrementの値が戻る?

はじめに 花粉症が辛い季節になりました。 花粉症も困りますが、本日はMySQL関連で困って調べたことをまとめたいと思います。 タイトルですが、InnoDBだとDBを再起動した際にauto_increm …

Docker上でTensorFlowのチュートリアルをやってみた

1 はじめに1.1 環境2 TensorFlowのコンテナを起動する3 チュートリアルをやってみた3.1 ソースコード4 さいごに はじめに こんにちは、最近個人的な勉強でPython、ディープラーニ …

同じレコードがないときだけインサートする!

はじめに あるアイテムを持っていない人だけ、別のアイテムをあげたい! もしくはその逆で、あるアイテムを持っている人に追加でアイテムをあげたい! そういうことってないでしょうか? 先日、僕がそのような状 …

WordPressとRailsアプリケーションを相乗りさせた時の話

1 はじめに1.1 前提条件2 サブドメインを設定する3 Nginxの設定3.1 ステージング環境用の設定3.2 ステージング環境の設定を読み込ませる3.3 Nginxの再起動4 SSL化する4.1 …

page_side_300rect






follow us in feedly

2017年8月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031