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

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

ただいまの
回答率

88.64%

docker-compose.ymlのportsの設定が効いていない(?)

受付中

回答 0

投稿 編集

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

woj

score 2

前提・実現したいこと

DockerでRuby on Rails + Reactを別々にアプリ作成する環境構築手順 - Qiita
↑のページを参考に、

  • api : rails
  • フロント : React

という構成で環境構築を行ないました。

参考にしたページによると、

  • localhost:3000 : Railsのページ
  • localhost:8000 : Reactのページ

を開くと書いてありますが、私の環境ではChromeでlocalhost:8000にアクセスしても、下図のページになります。
image1

localhost:3000にアクセスすると、私の環境でもRailsのページを開きます。

localhost:8000にアクセスすることで、下図のようにReactのページを開きたいです。
iamge2

バージョン

  • Docker 19.03.8

該当のソースコード

ディレクトリ構成

.
├── docker-comose.yml
├── api
│   ├── Dockerfile
│   └── rails new で作成したファイル群
└── front
    ├── Dockerfile
    └── react-sample
        └── create-react-appで作成したファイル群

docker-compose.yml

version: '3'

services:
  db:
    image: postgres
    volumes:
      - postgres-data:/var/lib/postgresql/data
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: rails:dev
    volumes:
      - ./api:/myapp
      - ./api/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "8000:3000"
volumes:
  postgres-data:
    driver: local

試したこと

command: sh -c "cd react-sample && yarn start"


上記コマンドを手動で行なったところ、下図のReactのページを開くことができました。
image2

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • gentaro

    2020/04/22 17:31

    なぜ元記事にコメントして質問しないんでしょうか?

    キャンセル

  • woj

    2020/04/22 18:25

    Qiitaのコメント欄は代案挙げたり内容を指摘する趣旨のコメントしか見たことないのと「記事の通りやったけどできませんでした、教えてください」みたいなコメントを見たことないので、Qiitaは質問する場所ではないのかなと思ったことと、teratailは技術的な質問をするところという認識だったので、ここで質問しました。

    キャンセル

  • gentaro

    2020/04/22 18:28

    「記事の通りにやってみたけどうまくいきませんでした」というのは記事に対する立派なフィードバックになると思いますが。

    キャンセル

  • woj

    2020/04/22 18:55

    私が参考にした記事の執筆者が参考にした記事でもほぼ同じコードを書いていることと、私が参考にした記事の環境をベースに私が参考にした記事の執筆者が様々な実装に関する記事を執筆していることから、現段階では私か記事のどちらかに問題があるか判断する場合、私に問題がある可能性が高いと思います。そのためteratailでコードに問題がないか、質問文に不足している情報が原因になっていないかを先に見ていただきたいと思っています。

    キャンセル

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

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

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

関連した質問

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