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

blog-page_footer_336




blog-page_footer_336




-Server
-, ,

執筆者:


comment

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

CAPTCHA


関連記事

laravel logo

Laravel Cashierでサブスクリプションを実装する

1 はじめに2 Stripeの準備3 Laravel Cachierの初期設定3.1 インストール3.2 APIキーの設定3.3 Userモデルへの実装4 支払い方法の登録4.1 支払い方法の登録5 ...

CentOS7でwebサーバの初期設定

1 はじめに2 設定内容3 必要なパッケージをインストール3.1 まずはカーネルその他諸々アップデート3.2 dnf4 SSH設定4.1 ユーザー作成・設定4.2 ローカル側で鍵作成4.3 サーバにア ...

InnoDBでauto_incrementの値が戻る?

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

aws

AWSのT3インスタンスの特徴

1 はじめに2 T3インスタンスとは2.1 T3インスタンスのスペック2.2 Unlimited Modeがデフォルトで有効2.3 ハイパーバイザはNitro3 T2インスタンスとの比較3.1 仮想C ...

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

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

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。