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

page_footer_300rect




page_footer_300rect




-Server
-, ,

執筆者:


comment

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

CAPTCHA


関連記事

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

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

InnoDBでauto_incrementの値が戻る?

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

MyCoachのDocker環境を変えてみた

1 はじめに2 なんで改修しようと思ったか3 構成3.1 使用するコンテナ3.2 各Dockerfile3.3 docker-compose.yml3.4 Unicorn3.5 database.rb ...

aws

Amazon EC2を使ってみる

1 はじめに2 事前準備2.1 ルートアカウントのMFAを有効化2.2 個々のIAMユーザの作成(及びグループの作成)2.3 IAMユーザのMFAを有効化2.4 IAMパスワードポリシーの適用3 EC ...

icon

ブログ運営で最も気をつけること(障害報告)

1 お詫び2 障害報告書2.1 障害内容2.2 障害期間2.3 障害の原因2.4 障害の長期化の原因2.5 詳細3 対応3.1 決済に使用するクレジットカードを変更する3.2 一つ前のOSバージョンで ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年8月
« 7月 9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031