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
以下に続く。。。
