「 React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう」のWindowsでの環境構築

aはじめに

タイトル通りですが、この教材の環境構築がWindowsだとスムーズにいかなかったので解決するためにやったことをメモとして残しておきます。

※なお、Macでは教材通りに問題なく環境構築できました。Windowsの環境構築の難しさたるや・・・

✅環境
Windows/Docker

✅教材
💻React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろう

環境構築

※Dockerは起動済み。Node.jsとgitはインストール済みの状態です。

①教材指定のGitのリポジトリからfork

②ローカルにクローンする。

git clone https://github.com/chobi1125/calender-app.git

③環境構築

Windowsだとデフォルトでmakeコマンドは使えないので以下コマンド。

cd calender-app
npm --prefix ./front install ./front
npm --cwd ./front run build
npm --prefix ./server install ./server

※どうやらセットアップすれば使えるようにはなるらしい。 参考

④Dockerを起動

docker-compose up -d

⑤サーバーの確認

http://localhost:8080/へアクセス

教材通りにやると何も表示されません。なので、表示されるようにしていきます。

frontディレクトリでビルドする

cd front
npm run watch

これで再読み込みすると表示されました。

⑥APIの確認

次にhttp://localhost:8080/api/hcへアクセス。

これが個人的にはかなり頭を抱えた部分です。

原因を探ります。

docker-compose ps
Name Command State Ports
-------------------------------------------------------------------------------------
calender-app_api_1 docker-entrypoint.sh npm start Exit 1
calender-app_db_1 docker-entrypoint.sh mysql ... Up 3306/tcp, 33060/tcp
calender-app_nginx_1 nginx -g daemon off; Up 0.0.0.0:8080->80/tcp

api_1がExitになっていることが確認できます。

docker-composeしてみます。※dオプションを付けないと原因がわかったりします。

api_1 |
api_1 | > server@1.0.0 start /var/www/server
api_1 | > ts-node index.ts
api_1 |
api_1 | sh: ts-node: not found
api_1 | npm ERR! code ELIFECYCLE
api_1 | npm ERR! syscall spawn
api_1 | npm ERR! file sh
api_1 | npm ERR! errno ENOENT
api_1 | npm ERR! server@1.0.0 start: `ts-node index.ts`
api_1 | npm ERR! spawn ENOENT
api_1 | npm ERR!
api_1 | npm ERR! Failed at the server@1.0.0 start script.
api_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
api_1 |
api_1 | npm ERR! A complete log of this run can be found in:
api_1 | npm ERR! /root/.npm/_logs/2020-05-28T03_49_03_759Z-debug.log
calender-app_api_1 exited with code 1

ts-node: not foundと記載されているのがわかりました。ctrl+cで一旦離脱します。

ts-nodeをserverディレクトリでインストールします。※ルートディレクトリにインストールしても意味ないので注意です。

cd server
npm i ts-node
>> + ts-node@8.10.1

再度yamlファイルのあるルートディレクトリに移動して起動してみる。

cd ..
docker-compose up
>> api_1    | Example app listening on port 8000!

無事表示されました。

Dockerを使わずに試してみる。

※後述のReduxの部分でサーバーが起動できず原因も掴めなかったのでローカルで試してみました。

※教材では通常のCRA(create-react-project)とは異なり、ビルド後のファイルをpublic/js/bundle.jsにトランスパイルして描画している。

プロジェクト作成

npx create-react-app react-calendar-local

Reduxのインストール

npm install --save redux react-redux

※あとは教材通りにコードを書く。

フォルダ階層はこんな感じになる。

動作確認◎

📝connectに関して

export default connect(mapStateProps, mapDispatchProps)(Counter);

高階関数でどのデータを props として渡すのかと適用したいコンポーネントを定義

※srcディレクトリ下

├── src
│   ├── components
│   │   └── Counter
│   │       ├── container.jsx
│   │       └── presentation.jsx
│   ├── index.js
│   └── redux
│       ├── count
│       │   ├── actions.js
│       │   ├── constants.js
│       │   └── reducer.js
│       └── rootReducer.js

👆view 用のpresentation.jsxと redux の接続用のcontainer.jsx、action typeをconstants.js(定数の意味)、actionをactions.js、reducerをreducer.jsに定義している。

1章終えた時点のリポジトリ

※どうでもいいけどRedux重いし結構インストールに時間かかりますね。。。

・2章以降

$ npm install --save dayjs
$ npm install --save @material-ui/core @material-ui/icons

CSSが表示されないがカレンダーの出力、2-3まで終えた。

おわりに

Reactを学ぼうと思うとVue.jsに比べてまだチュートリアルが少ないように感じます。

そんな中で個人的にかなり購入したかった教材ですが、以前はプレビューの環境構築の時点で挫折してしまい、購入を見送りました。

Macではすんなり環境構築できることが最近わかったのでいずれにせよ購入しようと思っていましたが、Windowsで環境構築できないことが気持ち悪かったので、今回勉強がてら原因を探ってみました。

解決できてよかったです(進めてみたらまた躓くかもなのでその際は改めて追記します)。

未解決備忘録

※Reduxの部分で改めて躓いてしまったのでメモです。おとなしくMacでやったほうが良さそう。。。

✅Reduxの開発準備

※redux-sampleディレクトリ下で操作します。

cd redux-sample

JSX記法を読み込むためにJSへのトランスパイルを行う。

ビルドする。ここでエラー。

npm run build
> redux-sample@1.0.0 build C:\xampp\htdocs\react-calender-app\calender-app\redux-sample
> webpack --mode production

'webpack' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

インストールしなおしてビルドで解決。

npm i
npm run build
>> Built at: 2020-05-28 13:22:50

サーバー起動

npm start
>> Starting up http-server, serving ./public
   Available on:
     http://192.168.99.1:8081

確認

http://192.168.99.1:8081

表示されない原因が掴めず。。。

コメントを残す