dockerを使って RailsとReact(node)の開発環境を構築する

dockerを使って RailsとReact(node)の開発環境を構築する

dockerを使って RailsとReact(node)の開発環境を構築する

dockerを使って RailsとReact(node)の開発環境を構築する へのコメントはまだありません

はじめに

dockerを使って、Rails(サーバーサイド)の環境を1つ、React(node)(クライアントサイド)の環境を1つ作る。
両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。
docker 自体触るのが初めてだったので、基本的なことから記載しておきます。
加えて初心者なので、間違えがあったらごめんなさい。

docker自体のインストールはあちこちに記載されているので、そちらを参照ください。

docker イメージのダウンロード

まず、ubuntuのイメージを検索します。
スター(STARS)が多い、イメージをダウンロード(PULL)すればOKでしょう。

dockerの基本的な操作

dockerを起動し、bashシェルを起動します。

dockerの仮想環境でbashシェルが走ります。

ホストOSから dockerを閲覧・操作する

■起動中のコンテナの確認

■停止しているコンテナの確認

■コンテナの削除

■dockerイメージ一覧

■コンソールを複数立ち上げたい場合

docker ps で起動中のコンテナ(CONTAINER ID)を確認し、そのNAMEで 別のコンソールを立ち上げる

■dockerイメージの保存
ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。

■dockerコンテナをむやみに増やさない方法
docker run するたびに新しいコンテナが出来ていきます。
これでは管理がややこしくなるので、docker run するときに –rm オプションをつけて
docker から exitしたら、コンテナを削除するようにしたほうが便利です。
docker で作業したイメージを保存したい場合は、上に記述した docker commitをすればOKですので。

Atom(エディタ)とChrome(ブラウザー)を動かせるようにする

docker環境で、AtomとChromeをインストールしてみましょう。
最初は 最低限必要そうなパッケージを入れてみます。

wget,net-tools コマンドのインストール

docker の X Windowシステムを使えるようにする。

dockerはたぶんコマンドラインで出来るサーバー環境を構築することをするのがメインなのかと思いますが・・・
今回は開発環境をdockerで作りたいので、 dockerのX Windowシステムを使えるようにしてやる必要があります。
いきなりAtomやChromeをインストールするのは重いので、 x11-appsをインストールして動作確認してみます。

■dockerイメージの保存
ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。

一旦 docker(仮想環境)から exitして再度、X Window を利用できるようなパラメーターをつけて、dockerを起動します。

dockerのX Windowシステムをホスト側で使えるようにして、起動する

ユーザーの作成・xclockを起動

root ユーザーではX Window を利用できないようなので、一般ユーザーを作ります。
そしてその一般ユーザーに sudo権限を与えます。

hiro というユーザーを作ります。
その後 hiroユーザーにスイッチして xclockを起動します。
画面上に下図のような時計が表示されれば、dockerのX Windowシステムを利用できるようになっています。

dc-1

うまく行かない場合は一旦、dockerからexitして
ホスト側で以下のコマンドを叩いて、再度やり直してみてください。

Atom インストール

まず add-apt-repository を使えるようにします。

atomのppaリポジトリーを追加して、インストール
atomがめでたくホスト側の画面(というかホストOSのディスプレイ)に表示されれば、めでたくOK。

Google Chromeのインストール

Google Chromeの安定版をダウンロードしてインストールします。
なにか パッケージが足らなかったので、apt-get install する必要がありましたが・・なんだったか忘れてしまいました・・・

先ほど作ったユーザーにスイッチして、Chrome起動。めでたく起動すればOK。

■日本語の文字化け対応

■ここまでのところを新しいメージとして保存
docker commitで保存します。

Ruby 2.3の環境を作る

Ubuntu16 はデフォルトでは古いrubyを使うので、新しい2.3のリポジトリーを追加して、インストール

先ほど保存したAtomとChromeが入ったイメージを起動します。

ビルド環境インストール ついでにmysqlも

.gemrc 調整

Railsとmysql2をインストール

作成済みの一般ユーザーで Rails プロジェクトを作る

bundle install でこけるので必要なファイルをインストール。+Gemfileを調整してbundle update

末尾に2行追加

bundle updateして、 rails sでサーバーが起動したら完成です。
docker exec で もうひとつ bashを起動して、インストール済みのchrome で
http://localhost:3000 でRailsのトップページが見れるはずです。

ホスト側から dockerのRailsに接続したい場合は、
まず dockerのIPアドレスを ifconfig で調べて、
rails sした時に メッセージとして表示されるポート番号に接続してやればOKです。

■ここまでのところを新しいメージとして保存
docker commitで保存します。

Node.jsとnpmの環境を整える

Railsの環境(サーバーサイド)は出来ましたので、フロントエンドを開発するようの
nodejsの環境を整えましょう。

先ほど保存したAtomとChromeが入ったイメージを起動します。

apt-get でインストールした nodejsとnpmを削除

■出来上がった環境を保存

以上で、Rails環境+Chrome+Atom と React(node)環境+Chrome+Atom ができました。

開発にあたっては、以下のコマンドでdockerを起動して、作業をしてください。
で、イメージを保存したい場合は docker commitで。


About the author:

Related Posts

Leave a comment

Back to Top