こんにちは、今回はReactを勉強することにしたので、その環境構築について書こうと思います。
React + docker + typescriptとかモダンな開発っぽいですよね。
敷居が高そうに見えますが、docker-compose.ymlだけで開発環境を準備できます。
node? nvm? ndenv?何それよくわからない(汗)。
そんな人でも簡単に環境構築できます。
React開発環境を簡単に一瞬で作っちゃいましょう!
用意するファイルは一個だけ
使うファイルは一個だけです。docker-compose.yml
これだけです。
中身はこんな感じ
version: '3'
services:
react:
image: node:13.6.0-slim
working_dir: "/var/www"
command: bash -c "cd [アプリ名] && yarn && yarn start"
ports:
- "3000:3000"
volumes:
- ./[アプリ名]:/var/www/[アプリ名]
イメージはnode – Docker Hubから好きなバージョンを選んで使えます。まぁ、よくわからない方は気にしなくて良いです笑
コマンド一つで出来上がり
あとはコマンドを打つだけです。
魔法のコマンドはこちら
docker-compose run react npx create-react-app [アプリ名] --template typescript
はい!
出来上がりですね!
お疲れ様でした。
環境構築完了です。
ちゃんとプロジェクトファイルが出来上がってます。
いつものReactの画面を開いてみましょう。
docker-compose up
上記コマンドを実行しましょう。
localhost:3000にアクセスします。
いつもの画面ですね。
最後に
docker上で作った環境をローカルにマウントして開発していく形になります。
その中で、yarn
コマンド使いたいんだけど、、、。
みたいなことがあると思いますが、ローカルで環境構築してない場合はそんなコマンドないと言われますよね。
でも大丈夫です。
docker上にはyarn入ってるのでdockerコンテナの中に入っちゃいましょう。
docker-compose exec react bash
別のターミナルを開いてプロジェクト配下で上記コマンドを実行すれば入れます。
コンテナに入ることができました!
ここではyarn
コマンドが使えるので試しに、semantic-ui-react
を入れてみましょう。
cd [アプリ名]
でプロジェクトディレクトリに入ってyarn add semantic-ui-react semantic-ui-css
を実行
package.jsonにもインストールできているのが確認できます。
試しに使ってみるとこんな感じです。
どうでしたか?
めちゃめちゃ簡単に環境構築できたと思います。
ちなみにdocker-compose down
でコンテナを消去できますので、使わなくなったら簡単に捨てれます。
ローカルを汚さず試せるので、試しにやってみてはどうでしょうか?
良きReactライフを!!
コメント