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

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

ただいまの
回答率

88.65%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 718

perpouh

score 299

構成

version: '3'
services:
  nginx:
    build: ./nginx
    ports:
      - '9000:80'
    volumes:
      - ./data/www:/var/www/html
      - ./nginx/server.conf:/etc/nginx/nginx.conf
  vue:
    build: ./vue
    volumes:
      - ./data/www:/app
    command: npm run dev
    ports:
      - '80:8080'
    tty: true

  swagger-editor:
    image: swaggerapi/swagger-editor
    container_name: "swagger-editor"
    ports:
      - "8081:8080"

  swagger-ui:
    image: swaggerapi/swagger-ui
    container_name: "swagger-ui"
    ports:
      - "8082:8080"
    volumes:
      - ./swagger/openapi.json:/openapi.json
    environment:
      SWAGGER_JSON: /openapi.json

  swagger-api:
    image: danielgtaylor/apisprout
    container_name: "swagger-api"
    ports:
      - "8083:8000"
    volumes:
      - ./swagger/openapi.json:/openapi.json
    command: /openapi.json

該当のコード

<script>
  import Parent from '@/components/Parent'
  export default {
    name: 'ParentList',
    data(){
      return {
        parents: []
      }
    },
    created(){
      this.fetchData()
    },
    watch: {
      // ルートが変更されたらこのメソッドを再び呼び出します
      '$route': 'fetchData'
    },
    components: {
      'parent' : Parent
    },
    methods: {
      fetchData () {
        axios.post(
          "http://localhost:8083/parents",
          null,
          {},
          {
            headers:{
            }
          })
        .then(function(res){
          //vueにバインドされている値を書き換えると表示に反映される
          // app.result = res.data
          console.log(res)
        })
        .catch(function(res){
          //vueにバインドされている値を書き換えると表示に反映される
          // app.result = res.data
          console.log(res)
        })
      }
    }
  }
</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側に問題があるのかすらわからない有様で(どちらも素人です)検索ワードすら思いつかず困り果てています。お力添えをいただければ幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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

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

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

  nginx:
    build: ./nginx
    ports:
      - '9000:9000'
    volumes:
      - ./nginx/server.conf:/etc/nginx/nginx.conf
    links:
      - server
http {
  charset UTF-8;
  server {
    listen 9000; # ←listen 9000しているくせにポートフォワードで80番を見ていた
    server_name localhost;
    location / {
        proxy_pass  http://server:3000;
        add_header Access-Control-Allow-Origin http://localhost;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
    }
  }
}
axios.get(
  "http://localhost:9000/users",
  null,
  {},
  {
    headers:{
    }
  })
.then(function(res){
  console.log(res)
})

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/10 09:51

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

    キャンセル

checkベストアンサー

0

こんばんは。

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る