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


関連記事

aws

Amazon EC2を使ってみる

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

CircleCIを使ってみた(RailsのRSpecとデプロイのサンプル)

1 はじめに2 導入するにあたって3 項目B4 補足4.1 開発環境とCI環境でdatabase.ymlが異なる5 さいごに はじめに 個人的に作成しているアプリケーションのCIツールとして、Circ ...

Google

【Google Invisible reCAPTCHA】Railsサイトにキャプチャ導入

1 はじめに2 reCAPTCHAとは3 Site keyとSecret keyの取得4 Rails gemの導入5 サイトへの組み込み6 さいごに はじめに こんにちは、最近休みなく仕事をいただいて ...

Python(bottle)をApacheで動かす

1 はじめに1.1 環境2 サーバーの立ち上げ3 Pythonのインストール3.1 IUS Community Project の yum リポジトリ3.2 インストール4 Apacheのインストール ...

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  

アプリ情報

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