こんにちは、KOUKIです。
ReactでMovie Appの開発を行います。
フロントエンド側はReact、バックエンド側はGo言語で実装するので、Webアプリ開発を一通り経験したい人には必見な記事になると思います。
今回は、Reactの開発環境をDockerを使って構築してみましょう。
尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。
事前準備
フォルダ/ファイル
|
1 2 3 4 |
mkdir movie-app cd movie-app touch Dockerfile-react touch docker-compose.yml |
Reactプロジェクトの作成
Reactプロジェクトを以下の手順で作成しましょう。
- Reactプロジェクトを作成
- React用のDockerfileを作成
- docker-compose.ymlにサービスとして追加
- ビルドして起動
Reactプロジェクトを作成
Reactのプロジェクトを作成するには、NodeJSが必要です。
以下の記事にある通り、ローカル環境にNodeJSをインストールしましょう。
インストールが完了したら、下記のコマンドを実行します。
|
1 2 |
# Reactプロジェクトを作成 npx create-react-app go-movies --template typescript |
コマンドが成功したら、カレントディレクトリに「go-movies」ディレクトリが生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ tree -L 2 . ├── Dockerfile-react ├── README.md ├── docker-compose.yml └── go-movies <<<<<<<<<< ├── README.md ├── node_modules ├── package.json ├── public ├── src ├── tsconfig.json └── yarn.lock |
React用のDockerfileを作成
React用のDockerfileを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# Dockerfile-react FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /go-movies WORKDIR ${PROJECT} RUN apk update && \ npm install -g create-react-app ADD ${PROJECT}/package.json ${PROJECT} RUN npm install |
docker-compose.ymlにサービスとして追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# docker-compose.yml version: "3.3" services: frontend: build: context: . dockerfile: "./Dockerfile-react" volumes: - ./go-movies:/go-movies command: > sh -c "npm run start" ports: - "3000:3000" container_name: "frontend" |
ビルドして起動
コンテナをビルドして、起動します。
|
1 2 3 |
# ビルド docker-compose build frontend docker-compose up frontend |
コンテナが立ち上がったら、ブラウザから「http://localhost:3000」へアクセスしてみましょう。
上記の画面が出てきたら成功です。
次回
次回は、画面遷移処理を実装しましょう。
記事まとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1919737f.3a3d64cb.19197380.327d0987/?me_id=1278256&item_id=19902768&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F6041%2F2000009456041.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
ソースコード
ここまで実装したソースコードを下記に記載します。
Dockerfile-react
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# Dockerfile-react FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] ENV PROJECT /go-movies WORKDIR ${PROJECT} RUN apk update && \ npm install -g create-react-app ADD ${PROJECT}/package.json ${PROJECT} RUN npm install |
docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# docker-compose.yml version: "3.3" services: frontend: build: context: . dockerfile: ./Dockerfile-react volumes: - ./go-movies:/go-movies command: > sh -c "npm run start" ports: - "3000:3000" container_name: frontend |
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
{ "name": "go-movies", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。