質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2688閲覧

DockerでReduxやTailwind CSSが使えるReact環境を作るための考え方について

moyong

総合スコア19

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/03 09:01

Docker、というかPCについてもいまいち理解できていない初心者です。いくつか疑問があるので相談したいです。

前提・実現したいこと

将来的にフロントがReact(create-react-app, Hooks, Redux Toolkit, Tailwind CSS, Typescript等)、バックエンドがRails APIのWebアプリを就活用ポートフォリオとして、Docker上で開発したいと思ってます。
お聞きしたいのは、ReduxやTailwind CSS(その他様々なライブラリ)を含めたDocker開発環境(コンテナ?)を作るにはどうすればいいか、ということです。

質問

・docker-compose.ymlにおいて、commandにnpm install tailwindcssみたいな感じで記述すればいいのでしょうか?それとも、dokcer-compose up -dしたコンテナの中に入り、そこで普通にnpm install tailwindcssすればいいのでしょうか?

備考

DockerでRuby on Rails + Reactを別々にアプリ作成する環境構築手順
上の記事では、ルートプロジェクトの下にapiフォルダ、frontフォルダ、docker-compose.ymlを作成し、

dockercomposeyml

1version: '3' 2 3services: 4 db: 5 image: postgres 6 volumes: 7 - postgres-data:/var/lib/postgresql/data 8 api: 9 build: 10 context: ./api/ 11 dockerfile: Dockerfile 12 command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" 13 image: rails:dev 14 volumes: 15 - ./api:/myapp 16 - ./api/vendor/bundle:/myapp/vendor/bundle 17 environment: 18 TZ: Asia/Tokyo 19 RAILS_ENV: development 20 ports: 21 - 3000:3000 22 depends_on: 23 - db 24 front: 25 build: 26 context: ./front/ 27 dockerfile: Dockerfile 28 volumes: 29 - ./front:/usr/src/app 30 command: sh -c "cd react-sample && yarn start" 31 ports: 32 - "8000:3000" 33volumes: 34 postgres-data: 35 driver: local

frontフォルダに

Dockerfile

1FROM node:8.16.0-alpine 2WORKDIR /usr/src/app

を作成したうえで、

project-folder $ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-sample"

を実行してください、とあります。
この記事を再現して出来上がるfrontコンテナの中では、今のところ普通のReactしか使えず、Redux ToolkitやTailwind CSS、Material-UI、SASS等を使いたければそれらを一つずつコンテナにnpm installする必要がある(typescriptに関してはcreate-react-appするときに特定のコマンドを指定するわけなので必要ない(?))と思っていますがこの認識は正しいでしょうか。
また、その方法を調べているうちに次の記事に辿り着き、
Reactの開発環境をDockerで構築(その2)
docker-compose.ymlのcommandに次のように書くアイデアが浮かんだのですがこれも正しいでしょうか?

front: command: sh -c "cd react-sample && npm install tailwindcss && npm install redux ... && yarn start"

初歩的な質問で恐縮です。Dockerに詳しい方、助けてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/03/03 09:11

逆に質問なのですが、React の開発に docker を使う利点って何なのでしょうか?
moyong

2021/03/03 09:28 編集

hoshi-takanoriさん、ありがとうございます。 恥ずかしながらそれに関しては思考停止してました。 「就活でDocker使えますと言いたいから」「そうするよう指南してくれてる記事があるから」というのが本音なのですが出先ではmacbook、家に帰ったらwindowsのデスクトップPCで開発できたらいいなと考えてるからだとあえて言わせてください。 まだよく調べきれていないのに質問するのもどうかと思うのですがRailsのAPIだけコンテナを作ってReactは普通にローカルで開発する、というようにする場合普通にデータ通信できるものなのでしょうか?(APIにはjsonの提供だけ期待しています)
hentaiman

2021/03/03 14:28

技術と学習意欲のみで評価するんだとしたら、dockerの良さを理解していない酷い使い方をしていてdocker使えますって言っている事が判明した時点で首切り理由になるから試用期間付きの採用だったら損しかなさそうだし、面接段階で判断されれば不採用理由になってしまいそうだな
moyong

2021/03/03 18:18 編集

hentaimanさん、ありがとうございます。 「なぜDockerなのか」を正しく説明できなければ、Dockerを使うことがかえってマイナスに影響することもあり得るということですね。 私のことを言っているのだとしたら、学び始めてまだ間もないためご容赦ください。半日色々と読み漁りました。「複数人開発において環境差異を吸収してくれることだけが唯一の利点」だとか、「エンジニア就活中の初学者がDockerを学ぶのは単なる技術意欲アピールのため」だとか、そんな勘違いをしておりました。自戒として受け止めたいと思います。
hentaiman

2021/03/03 18:36

もちろんあなたの事として言ってますが、別にdockerをやる事自体をネガティブに受け取ってコメントした訳ではないですよ。 ただ就活の武器としてdocker使えると言えるようになる事を目的にやっていると言っているから、その結果今の質問内容になっているなら良くない結果になっているなと。 その状態なら普通のサーバー操作を習熟した方が良いです。それかawsですね。 でもまあ「kubernetes使えます」って言えるところまでを目標とした最初の一歩としてのdockerならありかもしれません。
guest

回答1

0

自己解決

必要なライブラリは、dokcer-compose up -dしたコンテナの中に入り、そこでインストールすればよさそうです。
実際にやってみたところうまくいきました。

投稿2021/03/03 12:15

moyong

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問