質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

0回答

1378閲覧

Vue/TypeScriptの開発環境をDockerで立ち上げた際のエラーについて

NOOSE

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2021/11/23 12:46

編集2021/11/23 13:04

以下のページにあるファイルを一式ダウンロードし、PCへインストールし実行しました。
https://github.com/pluswing/ChatService

開発環境を実現しようと以下のコマンドを実行しましたが、一部のイメージがうまく実行されていないようです。何が原因なのでしょうか?

実行したコマンド

cp .env.sample .env cp docker-compose.override.yaml.sample docker-compose.override.yaml docker-compose build docker-compose run api npm run setup docker-compose run operator npm run setup docker-compose run client npm run setup docker-compose up

上記のコマンドを実行すると、chatservice-operator-1 がちゃんと起動しませんでした。

出力されるエラー

chatservice-operator-1 |Error: Cannot find module '@vue/cli-plugin-typescript' chatservice-operator-1 | at Function.Module._resolveFilename (module.js:548:15) chatservice-operator-1 | at Function.Module._load (module.js:475:25) chatservice-operator-1 | at Module.require (module.js:597:17) chatservice-operator-1 | at require (internal/module.js:11:18) chatservice-operator-1 | at idToPlugin (/operator2/node_modules/@vue/cli-service/lib/Service.js:138:14) chatservice-operator-1 | at Object.keys.concat.filter.map.id (/operator2/node_modules/@vue/cli-service/lib/Service.js:178:20) chatservice-operator-1 | at Array.map (<anonymous>) chatservice-operator-1 | at Service.resolvePlugins (/operator2/node_modules/@vue/cli-service/lib/Service.js:164:10) chatservice-operator-1 | at new Service (/operator2/node_modules/@vue/cli-service/lib/Service.js:34:25) chatservice-operator-1 | at Object.<anonymous> (/operator2/node_modules/@vue/cli-service/bin/vue-cli-service.js:16:17) chatservice-operator-1 | npm ERR! code ELIFECYCLE chatservice-operator-1 | npm ERR! errno 1 chatservice-operator-1 | npm ERR! ope@0.1.0 serve: `vue-cli-service serve --host 0.0.0.0 --port 3012` chatservice-operator-1 | npm ERR! Exit status 1 chatservice-operator-1 | npm ERR! chatservice-operator-1 | npm ERR! Failed at the ope@0.1.0 serve script. chatservice-operator-1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above. chatservice-operator-1 | chatservice-operator-1 | npm ERR! A complete log of this run can be found in: chatservice-operator-1 | npm ERR! /root/.npm/_logs/2021-11-23T11_57_43_303Z-debug.log

http://localhost:3011に接続すると画面は表示されるのですが、チャットメッセージを送っても正しく機能せず、以下のエラー文が出力されます。

chatservice-api-1 | (node:42) UnhandledPromiseRejectionWarning: Error: Client does not support authentication protocol requested by server; consider upgrading MySQL client chatservice-api-1 | at PromisePool.execute (/api2/node_modules/mysql2/promise.js:335:22) chatservice-api-1 | at Object.<anonymous> (/api2/src/repositories/db.ts:20:31) chatservice-api-1 | at step (/api2/src/repositories/db.ts:32:23) chatservice-api-1 | at Object.next (/api2/src/repositories/db.ts:13:53) chatservice-api-1 | at /api2/src/repositories/db.ts:7:71 chatservice-api-1 | at new Promise (<anonymous>) chatservice-api-1 | at __awaiter (/api2/src/repositories/db.ts:3:12) chatservice-api-1 | at Object.exports.select (/api2/src/repositories/db.ts:19:58) chatservice-api-1 | at UserDAO.<anonymous> (/api2/src/repositories/User.ts:44:24) chatservice-api-1 | at step (/api2/src/repositories/User.ts:32:23) chatservice-api-1 | (node:42) 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: 4)

行ったこと

・環境にvue/typescriptを追加する(vue add typescript / vue add @vue/typescript)
・コンテナ内のSQLに入りmysqlをアップデート(参考:https://qiita.com/monga3/items/6583c07a9b275b469608

環境

Windows 10 Home 64
node v17.0.1
Vue @vue/cli 4.5.15
Typescript 4.4.4
Docker 20.10.10

追記

Windows自体にMySqlをインストールし再起動したあとで docker-compose up を行うと、以下のエラー文が出力されるようになりました。その他のエラーの状況は同じです。

Error response from daemon: Ports are not available: listen tcp 0.0.0.0:3306: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

surface_0

2021/11/24 05:31

ほぼ同等の環境で同様に標準のセットアップ手順を試しましたが、問題なく正常に動いてしまいました。 (ビルド時に何かエラーはでていたものの) Error: Cannot find module '@vue/cli-plugin-typescript' とあるので、docker-compose run operator npm run setup のところで何かエラーが起きていないでしょうか? 再度実行して確認してみてください。 > Windows自体にMySqlをインストールし再起動したあとで docker-compose up を行うと、以下のエラー文が出力されるようになりました。 WindowsにインストールしたMySQLを使用する場合は、docker-compose.yamlの構成からmysqlを外さないと、使用ポートの重複でエラーになってしまいます。 しかし、これはチャットが動かない原因とは関係無いと思われます。
NOOSE

2021/11/27 06:11

ありがとうございます。Mac環境で実施してみたところ、普通に起動しました。 もう少し原因を探ってみます。docker-compose run operator npm run setupで起きているエラーも見てみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問