【TypeScript】Create-react-app+Flaskの環境構築【Docker】
前書き
開発するアプリはフロントエンド側をCRA(TypeScript)とバックエンド側をFlask(Python)とします。
個人的にReactのフレームワークはCRAやNext.js、Gatsbyなど様々であり、正直悩みました。
特に今回開発するアプリは静的サイトに近いので、Gatsbyの方が良いのではないかと考えました。
GatsbyはWebAPI規格であるGraphQLの適用や海外では最も人気なReactフレームワークなので、個人的には魅力的でした。
GatsbyはSEOにも強いというアドバンテージもあります。
ただTypeScriptをどうしても勉強したかったので、環境構築が楽にできるCRAを採用しました。
GatsbyでもTypeScriptは扱えます。以下の記事だと凄くわかりやすいのですが、
自分がReactとTypeScriptの両面に初心者すぎることと、CRAの方が情報量（日本語）が多い気がしました。（甘え）
Docker
Docker-compose.yml
version: "3"
services:
flask:
build: ./server/
container_name: flask-server
working_dir: /var/www/server
ports:
- 5000:5000
volumes:
- ./server/:/var/www/server
env_file:
- .env
tty: true
node:
image: node:latest
container_name: node-clients
working_dir: /var/www/client/
ports:
- 3000:3000
env_file:
- .env
volumes:
- ./server/:/var/www/server/
- ./client/:/var/www/client/
tty: true
server/Dockerfile
FROM python:3.7 ADD ./requirements.txt /tmp/requirements.txt RUN pip install -r /tmp/requirements.txt
server/requirements.txt
Flask==1.0.2 Flask-Cors==3.0.6 Flask-Migrate==2.2.1 Flask-RESTful==0.3.6 Flask-Script==2.0.6 Flask-SQLAlchemy==2.3.1
ymlファイルとDockerファイルの準備ができたら、実際にコンテナを立ち上げて、node-clientsコンテナに入ります。
$ docker-compose build $ docker-compose up -d $ docker exec -it node-clients /bin/bash
Craete-react-Appの作成
Craete-react-AppはReactプロジェクトをコマンド一つで構築してくれます。
Craete-react-Appでは、typescriptをオプションとして追加するだけで簡単にTSファイルでプロジェクトが作られます。
これは凄く便利です。
npx create-react-app [appName] --template typescript
注意点
IDEにVSCodeを使用しているのですが、App.tsxを開いたところ、以下のエラーが散見されます。
Cannot use JSX unless the '--jsx' flag is provided.
これを解決するのは、tsconfig.jsonを開いて、以下に変更してください。
"jsx": "react-jsx" → "jsx": "react"
そのあと[cmd] + [Shift] + [P]にて IDEの更新を行うと改善されます。
結果
