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


関連記事

Conohaのサーバーを借りて、CentOS+MySQL+nginxの環境を作ってみた。

1 はじめに1.1 環境2 Conohaでサーバーをレンタル3 サーバーの初期設定3.1 サーバーにrootユーザーでログイン3.2 ユーザー作成3.3 SSHログインを許可3.4 秘密鍵を生成3.5 ...

[CentOS7] systemdにサービスを登録して、サーバ起動時に自動でサービスを立ち上げる

1 はじめに2 chkconfigについてざっくり3 前提4 起動スクリプトを作成する5 Unitを定義する6 EnvironmentFileを作成する7 確認と設定7.1 systemdで管理できる ...

MyCoachのDocker環境を変えてみた

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

aws

Amazon Linux 2でLet’s Encryptが使えない

1 はじめに2 Amazon Linux 22.1 Amazon Linux Extras Library3 Let’s Encrypt4 本題5 さいごに はじめに 知人からタイトルのよ ...

aws

MyCoachの本番環境をAWS上に構築する 〜ネットワーク編〜

1 はじめに1.1 関連記事2 MyCoachのネットワーク構成3 VPCとは3.1 設定する項目4 VPCの設定5 インターネットゲートウェイの設定6 サブネットの設定6.1 公開ネットワークの設定 ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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