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に定義している。
※どうでもいいけど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
表示されない原因が掴めず。。。
コメントを残す