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

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

新規登録して質問してみよう
ただいま回答率
85.50%
docker-compose

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

コマンド

コマンドとは特定のタスクを行う為に、コンピュータープログラムへ提示する指示文です。多くの場合、コマンドはShellやcmdようなコマンドラインインターフェイスに対する指示文を指します。

Docker

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

524閲覧

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

woj

総合スコア2

docker-compose

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

コマンド

コマンドとは特定のタスクを行う為に、コンピュータープログラムへ提示する指示文です。多くの場合、コマンドはShellやcmdようなコマンドラインインターフェイスに対する指示文を指します。

Docker

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2020/04/22 08:23

編集2022/01/12 10:55

前提・実現したいこと

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

yml

1version: '3' 2 3services: 4 db: 5 image: postgres 6 volumes: 7 - postgres-data:/var/lib/postgresql/data 8 api: 9 build: 10 context: ./api/ 11 dockerfile: Dockerfile 12 command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" 13 image: rails:dev 14 volumes: 15 - ./api:/myapp 16 - ./api/vendor/bundle:/myapp/vendor/bundle 17 environment: 18 TZ: Asia/Tokyo 19 RAILS_ENV: development 20 ports: 21 - 3000:3000 22 depends_on: 23 - db 24 front: 25 build: 26 context: ./front/ 27 dockerfile: Dockerfile 28 volumes: 29 - ./front:/usr/src/app 30 command: sh -c "cd react-sample && yarn start" 31 ports: 32 - "8000:3000" 33volumes: 34 postgres-data: 35 driver: local

試したこと

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

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

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

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

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

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

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

gentaro

2020/04/22 08:31

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

2020/04/22 09:25

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

2020/04/22 09:28

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

2020/04/22 09:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問