カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-4

開発環境を作ろう

project を git から取ってくる

では、早速開発環境を作っていきましょう。開発環境の元となるプロジェクトを github 上で公開しているので、それを fork してきます。

これの上の方にある fork ボタンを押します。すると自分のプロジェクトにこれのコピーが作成されます。あとはこれを自分のローカル環境に持ってくるだけです。

プロジェクトを作成したいディレクトリに移動して、

shell
12345678
Copied!
$ cd /path/to/app ## 僕は `~/src/react/calender-app/` というディレクトリにしています。 ## => `$ cd ~/src/react/` $ git clone https://github.com/[YOUR_USERNAME]/calender-app.git ## 僕なら `https://github.com/Dragon-taro/calender-app.git` $ cd calender-app

を実行しましょう。これで必要なファイルが揃いました。

開発環境をセットアップする

コマンド一つで必要な依存ライブラリがインストールされるように設定しておいたのであとはコマンドを叩くだけです。プロジェクトのルートディレクトリ($ cd calender-appしてすぐの一番上のディレクトリ)

shell
1
Copied!
$ make

これで必要なファイルがインストールされます。makeコマンドがない場合は、

shell
123
Copied!
$ npm --prefix ./front install ./front $ npm --cwd ./front run build $ npm --prefix ./server install ./server

の 3 つのコマンドを実行してください。

次に、サーバーの起動を行います。

shell
1
Copied!
$ docker-compose up -d

こうするとlocalhost:8080にサーバーが起動します。初回は docker image をダウンロードするので少し時間がかかります。

localhost:8080を開いたときに

localhost:8080/api/hcを開いたときに、

が表示されていれば ok です。api はすべて/api/の path で構築してあります。

今後の開発の流れを理解しよう

今後カレンダーアプリを開発していくにあたって、すべてfront/以下で作業を行なってください。変更するファイルには関してもfront/にいるものとして、そこからの相対 path で記載していきます。

bash
1
Copied!
$ cd front

また、先ほどの$ makeではフロントの build が 1 度だけ実行されますが、このままでは変更があるたびに毎回 build コマンドを実行する必要があります。そこで、変更を検知して自動で build し直してくれるコマンドを用意してあります。繰り返しになりますが、front/で実行するようにしてください。

bash
1
Copied!
$ npm run watch

このコマンドを実行すると常駐のプロセスが立ち上がるので、他のコマンドを実行したいときは新しいターミナルのウインドウを開いて実行してください。終了するときはctl + Cで終了できます。

また、このコマンドはかなり CPU を使ってしまいます。(一部使っているライブラリがかなり大きいためのようです。build のオプションをいじってましにはしたのですが、それでもかなり使ってしまいます。)作業が終わったあとや PC が重いと感じたら一度終了させるようにしてください。

今後、カレンダーアプリの動作確認をする際はlocalhost:8080を確認すれば動くように実装してあります。上記の watch コマンドも忘れずに実行するようにしてください。

また、1 章で redux の簡単なチュートリアルがありますが、これはここまでの環境とは別の環境で実行していきます。説明の都合上、順番がわかりにくくなってしまいましたがご了承ください。

現在のパート (11)
全パート (68)
みんなで助け合おう!
現在のパートのディスカッション 全11件
0-4
k.k 2022-03-12
【質問です】npm --prefix ./front install ./frontコマンドでエラーが発生します

発生している問題

npm --prefix ./front install ./frontコマンドを実行時にエラーが発生します。

Copied!
npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\userName\Documents\study\calender-app/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\userName\Documents\study\calender-app\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent
0-4
黒澤僚太 2021-04-19
手順の補足&自分用メモ

$ docker-compose up -d
の後、

cd front
npm run watch

新規タブを開いて
cd server
npm i ts-node

cd ..
docker-compose up

localhost:8080
localhost:8080/api/hc
の二つを開く

https://chobimusic.com/react-calender-windows/
参照

0-4
黒澤僚太 2021-04-19
docker-compose up -dのところでエラーが出ました[20464] Failed to execute script docker-compose

発生している問題

docker-compose up -dのところでエラーが出ました

エラー画面をスクショで添付してください

docker-compose up -d
Traceback (most recent call last):
File "docker\api\client.py", line 214, in _retrieve_server_version
File "docker\api\daemon.py", line 181, in version
File "docker\utils\decorators.py", line 46, in inner
File "docker\api\client.py", line 237, in _get
File "requests\sessions.py", line 543, in get
File "requests\sessions.py", line 530, in request
File "requests\sessions.py", line 643, in send
File "requests\adapters.py", line 439, in send
File "urllib3\connectionpool.py", line 670, in urlopen
File "urllib3\connectionpool.py", line 392, in _make_request
File "http\client.py", line 1255, in request
File "http\client.py", line 1301, in _send_request
File "http\client.py", line 1250, in endheaders
File "http\client.py", line 1010, in _send_output
File "http\client.py", line 950, in send
File "docker\transport\npipeconn.py", line 32, in connect
File "docker\transport\npipesocket.py", line 23, in wrapped
File "docker\transport\npipesocket.py", line 72, in connect
File "docker\transport\npipesocket.py", line 52, in connect
pywintypes.error: (2, 'CreateFile', '指定されたファイルが見つかりません。')

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "docker-compose", line 3, in <module>
File "compose\cli\main.py", line 81, in main
File "compose\cli\main.py", line 199, in perform_command
File "compose\cli\command.py", line 60, in project_from_options
File "compose\cli\command.py", line 152, in get_project
File "compose\cli\docker_client.py", line 41, in get_client
File "compose\cli\docker_client.py", line 170, in docker_client
File "docker\api\client.py", line 197, in init
File "docker\api\client.py", line 221, in _retrieve_server_version
docker.errors.DockerException: Error while fetching server API version: (2, 'CreateFile', '指定されたファイルが見つかりません。')
[20464] Failed to execute script docker-compose

試したこと

docerを入れなおした
PC再起動

問題に対して試したことを記載してください。
インストール手順に問題があったのかと思い、エラーメッセージをもとに調査しています

補足情報(フレームワークのバージョン・OS)

Rails 5.1・Mac OS

0-4
大平 礼 2020-08-06
【解決済み】docker-compose up -d 後に、eact-calendar-app_api_1 コンテナがステータス Exited (0) で終了する

既に質問されている方がいらっしゃいますが、
実際に解決したかどうかが明記されていないため、
改めて共有させて頂きます。

発生している問題

以下コマンドを実行。

Copied!
docker-compose up -d

react-calendar-app_api_1 コンテナが終了する。

Copied!
❯ d ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES ec2b53033a57 react-calendar-app_nginx "/docker-entrypoint.…" 24 minutes ago Up 24 minutes 0.0.0.0:8080->80/tcp react-calendar-app_nginx_1 36534356d4b4 mysql:5.7 "docker-entrypoint.s…" 24 minutes ago Up 24 minutes 3306/tcp, 33060/tcp react-calendar-app_db_1 bb005e45ca76 react-calendar-app_api "docker-entrypoint.s…" 24 minutes ago Exited (0) 23 minutes ago react-calendar-app_api_1

コンテナログ

Copied!
❯ d logs bb005e45ca76 > server@1.0.0 start /var/www/server > ts-node index.ts (node:17) UnhandledPromiseRejectionWarning: Error: Error: connect ECONNREFUSED 172.24.0.2:3306 at DB.<anonymous> (/var/www/server/src/infrastructure/db/handler.ts:35:15) at step (/var/www/server/src/infrastructure/db/handler.ts:33:23) at Object.throw (/var/www/server/src/infrastructure/db/handler.ts:14:53) at rejected (/var/www/server/src/infrastructure/db/handler.ts:6:65) at processTicksAndRejections (internal/process/task_queues.js:97:5) (node:17) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:17) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

解決策

./serverディレクトリにて、以下npm install を実行。

Copied!
❯ cd ./server ❯ npm install

実行環境

OS: macOS Catalina 10.15.5
Docker: 19.03.8, build afacb8b
npm: 6.14.7

0-4
さくま 2020-07-01
質問です

Windows 10 HomeにDocker ToolBoxをインストールしてDocker構築を行いました。
本資料の環境構築手順に従いサーバの起動を行いましたが、localhost:8080で接続ができません。
(「このサイトにアクセスできませんlocalhost で接続が拒否されました。」と表示されます)

調べたところ、Docker Toolbox はバックエンドとして VirtualBox を使っている関係で、デフォルトでは localhost(127.0.0.1)からアクセスできず、別の IP アドレスからアクセスできるようになっているため、該当のIP(192.168.99.100/8080 )で接続したところ、403 Forbidden nginx/1.19.0
が表示され、画面を表示することができません。

何か解決のヒントがありましたらご教授いただけますでしょうか。