Docker for Macで Rails + PostgreSQLの開発環境を構築する

Mac + Rails + PostgreSQL の開発環境をDockerを使って、素早く構築するための手順です。

Docker for Macのインストール

こちらからDocker for Macをインストール ~ ダウンロード ~ Dockerアプリを起動します。

必要なファイルを作成

Railsアプリ用のディレクトリを作って、そこに移動します。今回はmyappとしました。

そして、作成したディレクトリに次の4つのファイルを以下の内容で作成します。
・ dockerfile
・ Gemfile
・ Gemfile.lock
・ docker-compose.yml

dockerfile

Gemfileは現時点では、これだけです。railsはバージョン指定なしで、最新版がインストールされます。

Gemfile

空のGemfile.lockを用意します。

Gemfile.lock(空のファイル)

docker-compose.yml

プロジェクトの構築

次のコマンドで上記ファイルを読み込み、Dockerコンテナ上に、Railsアプリケーションが作成されます。

Docker imageの作成

次のコマンドでdocker iamgeを作成します。

データベースの設定と作成

DBの設定を以下のように、追加します。

config/database.yml

そして、DBを作成するコマンドを実行します。

Dockerの起動

次のコマンドで、Dockerコンテナが立ち上がり、Rails Serverも起動します。

そして、http://localhost:3000にアクセスして、こちらのページが表示されたら、成功です。

コンテナの停止と起動

ショートカットの「Control + C」でコンテナが停止し、$ docker-compose up で起動します。
webサーバが正常に終了していない時に、次のようなログが出て、コンテナの起動に失敗することがあります。

そのような時はpid情報を削除するために、次のコマンドを実行すると解決します。

その他

開発中にrailsコマンドを実行する場合は 次のように、$ docker-compose run webをつけます。

また、Gemfileを更新したときは、$ docker-compose build をしなければいけません。なので、Gemfileを更新したときは、次の2つのコマンドを実行する必要があります。

この手間をなんとかしたいのですが、現状できていません。(泣)

以上です!ご覧いただき、ありがとうございました!!

docker-compose buildで「no Space Left on Device」のerrorが出た時の対処

Docker For Macで$ docker-compose build を実行した時に、以下のエラーが出たので対処した時のメモです。

エラー内容

no space left on deviceは「デバイスに空き領域がありません」というエラーです。

Dockerを使い続けていくと差分だけですが、 ディスクの消費が増えていきますので、不要なコンテナやイメージを削除する必要があります。

対処

次のように、コンテナもしくはイメージを確認をして、削除していきます。

不要なコンテナを削除すると、無事にbuildできるようになりました!
以上です!😊

Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

rails docker vuejs

既存のRails + Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。

Dockerfileとdocker-compose.ymlの設定

Rubyコンテナを立ち上げる際に必要となるライブラリ(build-essential, libpq-dev, yarn, Node.js)をインストールします。

Dockerfile

続いてdocker-compose.ymlです。

docker-compose.yml

コンテナの起動

webpackerの導入

Gemfile に以下を追加し、bundle します。

Gemfile

これでrails webpackerコマンドが使えるようになりました。

これで以下のWebPack関連ファイルが生成されました。
・.babelrc (babel設定ファイル)
・.postcssrc.yml (PostCSS設定ファイル)
・app/javascript/packs/application.js (エントリーポイントファイル)
・bin/webpack (webpackのビルドスクリプト)
・bin/webpack-dev-server (ビルドサーバーの起動スクリプト)
・config/webpack/development.js (開発環境設定ファイル)
・config/webpack/environment.js (共通環境設定ファイル)
・config/webpack/production.js (プロダクション環境設定ファイル)
・config/webpack/test.js (テスト環境設定ファイル)
・config/webpacker.yml (webpacker設定ファイル)

Vue.jsの導入

このコマンドでは以下のVue.js関連のファイルが生成されました。
・app/javascript/app.vue (Vueコンポーネントファイル)
・app/javascript/packs/hello_vue.js (エントリーポイントファイル)
・config/webpack/loaders/vue.js (Vue.jsの環境設定ファイル)

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをJavascriptにコンパイルするため、bin/webpackコマンド実行しビルドします。

ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。

viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます!

そして railsを起動して、”Hello Vue”が表示されたら成功です!

webpack-dev-server

ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。

Procfile.dev

次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。

bin/server

また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。

Gemfile

config/environments/development.rbに以下を追加します。

config/environments/development.rb

それらに合わせてdocker-compose.ymlを修正します。

docker-compose.yml

これでjavascriptの変更が、即座にブラウザに反映されるようになりました!

以上です!

bin/webpack-dev-serverコマンドで「Cannot destructure property `compile` of ‘undefined’ or ‘null’」となる対処

Rails + Docker + Vue.jsの環境構築を行なっている時に、bin/webpack-dev-serverコマンドを実行すると、「TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.」とエラーが出たのでその対処です。

実行環境はこちらです

エラー内容

解決方法

こちらのissuesにあがっていました。https://github.com/rails/webpacker/issues/1303
webpack-dev-serverのバージョンをダウングレードすればよいとのことで、yarn upgrade webpack-dev-server@^2.11.1を実行してみました。

再度、行うと…

これで無事、実行できました!!

Rails 5.2 + docker + webpackerでVue.jsの導入時に「Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」が起きた時の対処

Rails + Docker + Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。

環境はこちらです

エラー内容

bin/webpackコマンドを入力すると、「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」と出ました。

解決方法

yarn add で postcss-preset-env というプラグインを入れてやれとのことです。ちなみに、Yarnとは Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。

yarn add
https://yarnpkg.com/en/docs/cli/add
PostCSS Preset Env
https://github.com/csstools/postcss-preset-env

これでコマンドが通るようになりました。

やったね!!😊