(自分用)UdemyのReactを動かす環境をdockerで作る(備忘録)

はじめに

自分用備忘録です。
仕事で急にdockerとdjangoとreactを使うことになったので勉強していきます。
djangoは先にdjango girlsと公式チュートリアルをやったのでReactの動画を見ていきます。
dockerは触りながら覚えていきます。

Dockerの準備

dockerImageはここを参考に作成
https://qiita.com/kerochelo/items/1063da8893026de5ebbf

Dockerfile

FROM node:12 ←新しいのにしておく
WORKDIR /usr/src/app

ちなみにDockerfileにyarn入ってなくね？と思って
RUN npm install --global yarnってするとERRORになります。
nodeのImageは既にyarnが入っているかららしいです。

docker-compose.yml

version: '3'
services:
    web:
        build:
            context: .
            dockerfile: Dockerfile
        volumes: 
            - ./:/usr/src/app
        ports:
        - "3000:3000"
        tty: true ←これ追加

tty: true入れないとコンテナ立ち上げた時にexitになってしまう。。。
よくわからないがとりあえず入れておきます。
あとでちゃんと調べます。

Docker起動

Dockerfileとdocker-compose.yml置いている場所に行ってビルド＆起動

cd ~/docker-react-app
// Dockerのビルドと起動
docker-compose up -d --build

Reactのモジュール作成

cretate-react-appのコマンド

~/docker-react-app/udemy-react-redux-crud-application ←作業ディレクトリ
$docker-compose run --rm web sh -c "yarn global add create-react-app && create-react-app ./udemy-react-redux-crud-application"

imageの中に入って作ってもいいです

~/docker-react-app ←Dockerfile置いてるディレクトリ
$docker exec -it docker-react-app_web_1 bash
root@b:/usr/src/app#yarn global add create-react-app
root@b:/usr/src/app#create-react-app ./udemy-react-redux-crud-application"

ディレクトリはこんな感じになった

create-react-appを立ち上げてみる

docker-compose run --rm web sh -c "cd udemy-react-redux-crud-application && yarn run start"

立ち上がった

docker-compose.ymlにcommand入れておけばコンテナ起動した時に立ち上げてくれます。

docker-compose.yml

version: '3'
services:
    web:
        ...
        command: sh -c "cd udemy-react-redux-crud-application && yarn start"

予定

とりあず、Udemyの動画をベースに勉強しつつ、チュートリアルを眺めていく。
最終的にはDockerでNingx + Django + React + Postgresのコンテナ作って適当なwebアプリ作ってみたい。
覚えなきゃいけないことがいっぱいで大変だけど頑張ろう。
仕事が急に別の業務に変わらない限りは。。。