Firebaseのためのお手軽な開発環境

Firebaseのためのお手軽な開発環境

Firebaseのプロトタイプを作る必要があったため、ReactからFirebaseを操作できる開発環境をdockerで作ってみました。お手軽感はかなり高いと思います。実際の開発が始まるまでにはもう少しちゃんと整備する必要がありそうです。

docker関連のファイルを配置

以下のようなファイル構成にします。

/Users/koji/dev/sapmle-app
                 ├ docker-compose.yml
                 ├ Dockerfile
                 └ package.json

docker-compose.ymlは以下のような感じで、はじめはcommandの部分をコメントにしておきます。Reactのプロジェクトを作成した後に有効化すればwebサーバーが自動で立ち上がるので便利です。

version: '3'
services:
  web:
    build: .
#    command: yarn start
    container_name: web
    ports:
      - "127.0.0.1:3000:3000"
      - "127.0.0.1:5000:5000"
      - "127.0.0.1:9005:9005"
    stdin_open: true
    tty: true
    volumes:
      - .:/myapp

Dockerfileは以下のような感じです。&&がエスケープされてしまうため、全角の&&に置き換えてありますので、コピペする場合はご注意を!

FROM ubuntu:18.04
RUN apt-get update -qq && 
    apt-get install -y yarn curl gnupg2 npm nodejs

# yarnが失敗する問題への対応
RUN curl -SL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && 
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && 
    apt-get update -qq && 
    apt-get install -y yarn

# Firebaseなどのインストール
RUN yarn add typescript @types/node @types/react @types/react-dom @types/jest 
    react-firebaseui firebase @types/firebase \
    mobx mobx-react

RUN npm install -g firebase-tools

# nodejsのバージョンを上げる
RUN npm install n -g && n stable && apt purge -y nodejs npm

RUN mkdir /myapp
WORKDIR /myapp

ADD . .

package.jsonは空にしておきます。

{
}

Reactのプロジェクトを作成

dockerを立ち上げます。「Attaching to web」が出れば成功です。

$ docker-compose build
$ docker-compose up

Starting web ... done
Attaching to web

上記のwebコンテナにコンソールでログインします。

$ docker exec -it web /bin/bash
root@123:/myapp# ls

Dockerfile  docker-compose.yml  package.json

Reactの雛形を作成しますが、以下のようにサブディレクトリにプロジェクトが出来てしまうため、手動で親のsapmle-appディレクトリにコピーすればOKです。ファイルは全て上書きします。

root@123:/myapp# yarn create react-app sample-app --typescript
root@123:/myapp# ls

Dockerfile  docker-compose.yml  package.json  sample-app

root@123:/myapp# cp -rf sample-app/* /myapp/

コピー後は以下のようになるはずです。子のsapmle-appディレクトリは消してしまいましょう。

root@123:/myapp# ls

Dockerfile  docker-compose.yml  package.json  sample-app  tsconfig.json
README.md   node_modules        public        src         yarn.lock

root@123:/myapp# rm -rf sample-app

ここまで出来たらソースをGitに登録できると思います。

Reactのサンプルのページを表示

docker関連のファイルを再修正する場合はコンテナを落とします。

$ docker-compose stop

Stopping web ...
web    | root@123:/myapp# exit
Stopping web ... done

docker-compose.ymlのcommandの部分を有効にします。

#    command: yarn start

↓↓↓↓

    command: yarn start

コンテナを再起動します。

$ docker-compose up

Compiled successfully!
web    |
web    | You can now view sample-app in the browser.
web    |
web    |   Local:            http://localhost:3000/
web    |   On Your Network:  http://192.168.0.2:3000/
web    |
web    | Note that the development build is not optimized.
web    | To create a production build, use yarn build.
web    |

ブラウザでhttp://localhost:3000/を開きます。以下の画面が出れば成功です。

まとめ

以下の記事等を参考にFirebaseの実装を進めますが、その過程も記事にしようと思います。ではまた。

参考:https://qiita.com/magaming/items/6ee5318c581d34c4c932

we are hiring

優秀な技術者と一緒に、好きな場所で働きませんか

株式会社もばらぶでは、優秀で意欲に溢れる方を常に求めています。働く場所は自由、働く時間も柔軟に選択可能です。

現在、以下の職種を募集中です。ご興味のある方は、リンク先をご参照下さい。