🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

docker-compose

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

Swagger

Swaggerは、REST APIを定義するための標準仕様に基づいて構築された一連のオープンソースツール。REST APIの設計や構築、文書化、使用に便利なツールを提供。Swagger Specを書くことでドキュメント生成まで自動的に行い、さらにドキュメントから実際のリクエストを投げられます。

Docker

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

Q&A

解決済

3回答

2834閲覧

Docker上のVueからDocker上のswaggerAPIを叩きたい

perpouh

総合スコア299

Vue.js

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

docker-compose

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

Swagger

Swaggerは、REST APIを定義するための標準仕様に基づいて構築された一連のオープンソースツール。REST APIの設計や構築、文書化、使用に便利なツールを提供。Swagger Specを書くことでドキュメント生成まで自動的に行い、さらにドキュメントから実際のリクエストを投げられます。

Docker

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

0グッド

1クリップ

投稿2019/12/04 09:34

構成

docker

1version: '3' 2services: 3 nginx: 4 build: ./nginx 5 ports: 6 - '9000:80' 7 volumes: 8 - ./data/www:/var/www/html 9 - ./nginx/server.conf:/etc/nginx/nginx.conf 10 vue: 11 build: ./vue 12 volumes: 13 - ./data/www:/app 14 command: npm run dev 15 ports: 16 - '80:8080' 17 tty: true 18 19 swagger-editor: 20 image: swaggerapi/swagger-editor 21 container_name: "swagger-editor" 22 ports: 23 - "8081:8080" 24 25 swagger-ui: 26 image: swaggerapi/swagger-ui 27 container_name: "swagger-ui" 28 ports: 29 - "8082:8080" 30 volumes: 31 - ./swagger/openapi.json:/openapi.json 32 environment: 33 SWAGGER_JSON: /openapi.json 34 35 swagger-api: 36 image: danielgtaylor/apisprout 37 container_name: "swagger-api" 38 ports: 39 - "8083:8000" 40 volumes: 41 - ./swagger/openapi.json:/openapi.json 42 command: /openapi.json

該当のコード

ParentList.vue

1<script> 2 import Parent from '@/components/Parent' 3 export default { 4 name: 'ParentList', 5 data(){ 6 return { 7 parents: [] 8 } 9 }, 10 created(){ 11 this.fetchData() 12 }, 13 watch: { 14 // ルートが変更されたらこのメソッドを再び呼び出します 15 '$route': 'fetchData' 16 }, 17 components: { 18 'parent' : Parent 19 }, 20 methods: { 21 fetchData () { 22 axios.post( 23 "http://localhost:8083/parents", 24 null, 25 {}, 26 { 27 headers:{ 28 } 29 }) 30 .then(function(res){ 31 //vueにバインドされている値を書き換えると表示に反映される 32 // app.result = res.data 33 console.log(res) 34 }) 35 .catch(function(res){ 36 //vueにバインドされている値を書き換えると表示に反映される 37 // app.result = res.data 38 console.log(res) 39 }) 40 } 41 } 42 } 43</script>

ログ

spread.js:25 POST http://localhost:8083/parents 404 (Not Found) ParentList.vue?7aa4:51 Error: Request failed with status code 404 at e.exports (spread.js:25) at e.exports (spread.js:25) at XMLHttpRequest.d.onreadystatechange (spread.js:25)

http://localhost:8083/parentsを直接ブラウザで開けば開けます。
ホストを0.0.0.0にしてみたりもしましたがだめでした。Docker側に問題があるのかVue側に問題があるのかすらわからない有様で(どちらも素人です)検索ワードすら思いつかず困り果てています。お力添えをいただければ幸いです。

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

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

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

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

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

guest

回答3

0

間が空いちゃってすみません。結果報告です。

  • nginxのポートフォワードが間違っていた
  • docker-compose.ymlのlinks設定が間違っていた
  • nginxにCORSの設定がなかった
  • そもそもgetのパスにpostでアクセスしていた

など、割と酷い有様でした……。
以下、自戒としてコードを張ります。せめてどこかの誰かの助けになりますよう。

docker

1 nginx: 2 build: ./nginx 3 ports: 4 - '9000:9000' 5 volumes: 6 - ./nginx/server.conf:/etc/nginx/nginx.conf 7 links: 8 - server

server.conf

1http { 2 charset UTF-8; 3 server { 4 listen 9000; # ←listen 9000しているくせにポートフォワードで80番を見ていた 5 server_name localhost; 6 location / { 7 proxy_pass http://server:3000; 8 add_header Access-Control-Allow-Origin http://localhost; 9 add_header Access-Control-Allow-Methods "POST, GET, OPTIONS"; 10 add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"; 11 add_header Access-Control-Allow-Credentials true; 12 } 13 } 14}

js

1axios.get( 2 "http://localhost:9000/users", 3 null, 4 {}, 5 { 6 headers:{ 7 } 8 }) 9.then(function(res){ 10 console.log(res) 11})

投稿2019/12/09 09:32

perpouh

総合スコア299

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

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

perpouh

2019/12/10 00:51

勉強のついでだと思って知らないことと知らないことを一緒にやるのはおすすめしません(こうなります)
guest

0

ベストアンサー

こんばんは。

Vueのアプリケーションは http://localhost/http://localhost:80/ でアクセスしている状況でしょうか?

http://localhost:8083/parentsを直接ブラウザで開けば開けます。

とあるので、ブラウザから、SwaggerのこのエンドポイントにPOSTは出来る感じでしょうか。

CORSの可能性もあるのかな?とも思いました。

投稿2019/12/04 13:33

suama

総合スコア1997

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

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

0

ホストマシンとvueのポート8083が接続されていないため、エラーが出ているんだと思います。
vueにネットワークを設定することで8083へアクセスできるようになるかと思います。

デフォルト・ネットワークの設定

投稿2019/12/04 10:18

KaiShoya

総合スコア551

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問