教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
では、早速開発環境を作っていきましょう。開発環境の元となるプロジェクトを github 上で公開しているので、それを fork してきます。
これの上の方にある fork ボタンを押します。すると自分のプロジェクトにこれのコピーが作成されます。あとはこれを自分のローカル環境に持ってくるだけです。
プロジェクトを作成したいディレクトリに移動して、
shell12345678 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
してすぐの一番上のディレクトリ)
shell1 Copied!$ make
これで必要なファイルがインストールされます。make
コマンドがない場合は、
shell123 Copied!$ npm --prefix ./front install ./front
$ npm --cwd ./front run build
$ npm --prefix ./server install ./server
の 3 つのコマンドを実行してください。
次に、サーバーの起動を行います。
shell1 Copied!$ docker-compose up -d
こうするとlocalhost:8080にサーバーが起動します。初回は docker image をダウンロードするので少し時間がかかります。
localhost:8080を開いたときに
localhost:8080/api/hcを開いたときに、
が表示されていれば ok です。api はすべて/api/
の path で構築してあります。
今後カレンダーアプリを開発していくにあたって、すべてfront/
以下で作業を行なってください。変更するファイルには関してもfront/
にいるものとして、そこからの相対 path で記載していきます。
bash1 Copied!$ cd front
また、先ほどの$ make
ではフロントの build が 1 度だけ実行されますが、このままでは変更があるたびに毎回 build コマンドを実行する必要があります。そこで、変更を検知して自動で build し直してくれるコマンドを用意してあります。繰り返しになりますが、front/
で実行するようにしてください。
bash1 Copied!$ npm run watch
このコマンドを実行すると常駐のプロセスが立ち上がるので、他のコマンドを実行したいときは新しいターミナルのウインドウを開いて実行してください。終了するときはctl + C
で終了できます。
また、このコマンドはかなり CPU を使ってしまいます。(一部使っているライブラリがかなり大きいためのようです。build のオプションをいじってましにはしたのですが、それでもかなり使ってしまいます。)作業が終わったあとや PC が重いと感じたら一度終了させるようにしてください。
今後、カレンダーアプリの動作確認をする際はlocalhost:8080を確認すれば動くように実装してあります。上記の watch コマンドも忘れずに実行するようにしてください。
また、1 章で redux の簡単なチュートリアルがありますが、これはここまでの環境とは別の環境で実行していきます。説明の都合上、順番がわかりにくくなってしまいましたがご了承ください。
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
$ 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
の二つを開く
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再起動
問題に対して試したことを記載してください。
インストール手順に問題があったのかと思い、エラーメッセージをもとに調査しています
Rails 5.1・Mac OS
既に質問されている方がいらっしゃいますが、
実際に解決したかどうかが明記されていないため、
改めて共有させて頂きます。
以下コマンドを実行。
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
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
が表示され、画面を表示することができません。
何か解決のヒントがありましたらご教授いただけますでしょうか。