dockerを使って、Rails（サーバーサイド）の環境を１つ、React(node)（クライアントサイド）の環境を１つ作る。
両環境ではChromeとAtomが動かせて、開発できるようになるところまでが目標です。
docker 自体触るのが初めてだったので、基本的なことから記載しておきます。
加えて初心者なので、間違えがあったらごめんなさい。
docker自体のインストールはあちこちに記載されているので、そちらを参照ください。
まず、ubuntuのイメージを検索します。
スター(STARS)が多い、イメージをダウンロード（PULL)すればOKでしょう。
[bash]
$ docker search “ubuntu 16”
NAME DESCRIPTION STARS OFFICIAL AUTOMATED
ubuntu Ubuntu is a Debian-based Linux operating s… 5919 [OK]
1and1internet/ubuntu-16-nginx-php-phpmyadmin-mysql-5 ubuntu-16-nginx-php-phpmyadmin-mysql-5 12 [OK]
1and1internet/ubuntu-16-apache ubuntu-16-apache 2 [OK]
$ docker pull ubuntu
[/bash]
dockerを起動し、bashシェルを起動します。
[bash]
$ docker run -ti ubuntu bash
[/bash]
dockerの仮想環境でbashシェルが走ります。
ホストOSから dockerを閲覧・操作する
■起動中のコンテナの確認
[bash]
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
561fabf4163e ubuntu “bash” 9 minutes ago Up 9 minutes adxx_eadd
[/bash]
■停止しているコンテナの確認
[bash]
$ docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
8541933cccdc hello-world “/hello” 3 seconds ago Exited (0) 2 seconds ago sick_euclid
[/bash]
■コンテナの削除
[bash]
docker rm [CONTAINER ID]
[/bash]
■dockerイメージ一覧
[bash]
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
ubuntu latest e7e0c0b1785f About an hour ago 163.1 MB
[/bash]
■コンソールを複数立ち上げたい場合
docker ps で起動中のコンテナ（CONTAINER ID）を確認し、そのNAMEで 別のコンソールを立ち上げる
[bash]
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS
cac1b80e535d ubuntu “bash” 13 minutes ago Exited (0) 9 seconds ago
[/bash]
[bash]
$ docker exec -ti cac1 bash
[/bash]
■dockerイメージの保存
ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。
[bash]
$ docker commit cac1 ubuntu/test1
sha256:ea0b9db5551f4e5a8cd5959f16b54943deda0b6d481fce39092f6b6af5333ff3
[/bash]
■dockerコンテナをむやみに増やさない方法
docker run するたびに新しいコンテナが出来ていきます。
これでは管理がややこしくなるので、docker run するときに –rm オプションをつけて
docker から exitしたら、コンテナを削除するようにしたほうが便利です。
docker で作業したイメージを保存したい場合は、上に記述した docker commitをすればOKですので。
[bash]
$ docker run –rm -ti ubuntu bash
[/bash]
docker環境で、AtomとChromeをインストールしてみましょう。
最初は 最低限必要そうなパッケージを入れてみます。
[bash]
# apt-get update
[/bash]
wget,net-tools コマンドのインストール
[bash]
# apt-get install wget net-tools nano
[/bash]
dockerはたぶんコマンドラインで出来るサーバー環境を構築することをするのがメインなのかと思いますが・・・
今回は開発環境をdockerで作りたいので、 dockerのX Windowシステムを使えるようにしてやる必要があります。
いきなりAtomやChromeをインストールするのは重いので、 x11-appsをインストールして動作確認してみます。
[bash]
# apt-get install sudo
# apt-get install x11-apps
[/bash]
■dockerイメージの保存
ホストPC側で 起動中のdocker を 新しいリポジトリ名で commit します。
[bash]
$ docker commit cac1 ubuntu/x11
sha256:ea0b9db5551f4e5a8cd5959f16b54943deda0b6d481fce39092f6b6af5333ff3
[/bash]
一旦 docker(仮想環境)から exitして再度、X Window を利用できるようなパラメーターをつけて、dockerを起動します。
[bash]
# exit
[/bash]
dockerのX Windowシステムをホスト側で使えるようにして、起動する
[bash]
$ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash
[/bash]
root ユーザーではX Window を利用できないようなので、一般ユーザーを作ります。
そしてその一般ユーザーに sudo権限を与えます。
hiro というユーザーを作ります。
その後 hiroユーザーにスイッチして xclockを起動します。
画面上に下図のような時計が表示されれば、dockerのX Windowシステムを利用できるようになっています。
[bash]
# adduser hiro
# gpasswd -a hiro sudo
# su – hiro
$ xclock
[/bash]
うまく行かない場合は一旦、dockerからexitして
ホスト側で以下のコマンドを叩いて、再度やり直してみてください。
[bash]
$ xhost +
[/bash]
[bash]
$ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash
[/bash]
まず add-apt-repository を使えるようにします。
[bash]
# apt-get install software-properties-common apt-file
[/bash]
atomのppaリポジトリーを追加して、インストール
atomがめでたくホスト側の画面（というかホストOSのディスプレイ）に表示されれば、めでたくOK。
[bash]
# add-apt-repository ppa:webupd8team/atom
# apt-get update
# apt-get install atom
# sudo apt-get install libxss1
# atom
[/bash]
Google Chromeの安定版をダウンロードしてインストールします。
なにか パッケージが足らなかったので、apt-get install する必要がありましたが・・なんだったか忘れてしまいました・・・
[bash]
# wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
# dpkg -i google-chrome-stable_current_amd64.deb
[/bash]
先ほど作ったユーザーにスイッチして、Chrome起動。めでたく起動すればOK。
[bash]
# su – hiro
$ google-chrome-stable
[/bash]
■日本語の文字化け対応
[bash]
# apt-get install fonts-takao fonts-takao-gothic fonts-takao-pgothic fonts-takao-mincho
[/bash]
■ここまでのところを新しいメージとして保存
docker commitで保存します。
[bash]
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1ac21cbaf57b 891 “bash” 18 minutes ago Up 18 minutes tiger_bose
[/bash]
[bash]
$ docker commit 1ac ubuntu/atom_chrome
[/bash]
Ubuntu16 はデフォルトでは古いrubyを使うので、新しい2.3のリポジトリーを追加して、インストール
先ほど保存したAtomとChromeが入ったイメージを起動します。
[bash]
$ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash
[/bash]
[bash]
# apt-add-repository ppa:brightbox/ruby-ng
# apt-get -y install ruby2.3 ruby2.3-dev
# ruby -v
ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]
[/bash]
ビルド環境インストール ついでにmysqlも
[bash]
# apt-get install curl git build-essential libgtk2.0-dev libmysqlclient-dev mysql-server
[/bash]
.gemrc 調整
[bash]
# nano ~/.gemrc
[/bash]
[bash]
install: –no-document
update: –no-document
[/bash]
[bash]
# gem install rails mysql2
[/bash]
[bash]
# su – hiro
$ cd
$ mkdir workspace
$ cd workspace
$ rails new abc
[/bash]
bundle install でこけるので必要なファイルをインストール。＋Gemfileを調整してbundle update
[bash]
$ sudo apt-get install libsqlite3-dev
$ nano Gemfile
[/bash]
末尾に2行追加
[bash]
$ gem ‘therubyracer’, platforms: :ruby
$ gem ‘tzinfo-data’
[/bash]
bundle updateして、 rails sでサーバーが起動したら完成です。
docker exec で もうひとつ bashを起動して、インストール済みのchrome で
http://localhost:3000 でRailsのトップページが見れるはずです。
[bash]
$ bundle update
$ rails s -b 0.0.0.0
[/bash]
ホスト側から dockerのRailsに接続したい場合は、
まず dockerのIPアドレスを ifconfig で調べて、
rails sした時に メッセージとして表示されるポート番号に接続してやればOKです。
■ここまでのところを新しいメージとして保存
docker commitで保存します。
[bash]
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1ac21cbaf57b 891 “bash” 18 minutes ago Up 18 minutes romantic_bose
[/bash]
[bash]
$ docker commit 1ac ubuntu/rails
[/bash]
Railsの環境（サーバーサイド）は出来ましたので、フロントエンドを開発するようの
nodejsの環境を整えましょう。
先ほど保存したAtomとChromeが入ったイメージを起動します。
[bash]
$ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash
[/bash]
[bash]
# apt-get install -y nodejs npm
# npm cache clean
# npm install n -g
# n stable
# ln -sf /usr/local/bin/node /usr/bin/node
# node -v
v7.8.0
[/bash]
apt-get でインストールした nodejsとnpmを削除
[bash]
# apt-get purge -y nodejs npm
[/bash]
■出来上がった環境を保存
[bash]
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1ac21cbaf57b 891 “bash” 18 minutes ago Up 18 minutes romantic_bose
[/bash]
[bash]
$ docker commit 1ac ubuntu/node
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
ubuntu/node latest e705dc8f48f3 About a minute ago 1.522 GB
ubuntu/rails latest f247ec8c0dc3 23 minutes ago 1.736 GB
ubuntu/chrome latest 891c48bf403d 52 minutes ago 1.186 GB
ubuntu/fastest-mirror latest e7e0c0b1785f About an hour ago 163.1 MB
[/bash]
以上で、Rails環境＋Chrome＋Atom と React(node)環境＋Chrome＋Atom ができました。
開発にあたっては、以下のコマンドでdockerを起動して、作業をしてください。
で、イメージを保存したい場合は docker commitで。
[bash]
$ docker run -ti –privileged –rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix/:/tmp/.X11-unix [IMAGE ID] bash
[/bash]
フロントReactJS、バックエンドRailsという構成でサービス立ち上げに関わってた。 思うんだけど、Macを開発に使うのはわかるんだけど、なぜWindows使う人がいるんだろ？ どうせリリースするのLinuxベースのOSなんだし、フロントはiPhoneのSafariか AndroidのChrome、まぁあとはWindowsのChrome,Firefox,IE,Edge Macはほとんど使わないんでわからないんだけど、Windowsはほんともっさり動作だよね。 これだけマシンのスペックがどんどん上がっているにもかかわらず、嫌がらせのように 動きがトロい。 コンソールでコマンドライン叩くのがほ…
はじめに Webpackを使って、Sassをコンパイルする方法です。 Webにそれなりにやり方が載ってますが、2017年4月末現在では、動く例が少なかったので、 実際に動いた例を示しておきます。 末尾にReactなんかの開発で ES6をノーマルなJavascriptに変換するときとの合わせ技の方法も記載しておきます。 コンパイル環境構築 [bash] $ mkdir test-saas $ cd test-saas $ npm init -y $ npm install webpack extract-text-webpack-plugin css-loader sass-loader sty…
はじめに React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。 flex layoutを使うと、それなりの画面は出来ますが・・・ ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが 曖昧になり、 時には隠れてしまうケースもあります。 で、どうすりゃいいんだと考えて、今、思いついたのは、 flex layoutを諦めて、固定ピッチで画面デザインをしてやること。 固定ピッチと言っても、デバイスの画面サイズを判定して、 ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さ というのを計算で求めてやるのが、一番スマートかなとい…
はじめに Reactでファイルアップロードを実装してみたくて、どのような方法があるのか調べてみた。 あまり深く調べてはないが、１つめに良さそうだと感じた react-dropzone を使ってみたら、 これがかなりいい！！ あまりに気に入ってしまったので、react-dropzoneでアップロード対象のファイルを選んで、 axiosでPOSTして、サーバーサイドのRailsでファイルを保存するところまでをざっと紹介します。 Reactのことは分かっている前提ですすめますので、あしからず。 出来上がりのイメージはこんな感じ 画面左上に ファイルをドロップする場所があり、その右側にドロップされたフ…
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 前回のGoogle編に続き、今回はTwitter編。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Twitter Developerにア…
はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Develope…
はじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・ そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。 で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。 ドキュメントが超少なく…
はじめに ここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。 公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・ なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。 欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・ 考えていく手順 画面イメージ 画面を構築するためのコンポーネント階層図 ステート イベント 基本的にこの４つを考えればOKです。 既…
Leave a comment