0
Help us understand the problem. What are the problem?

posted at

【Docker】Docker for macのコンテナに他端末からアクセスする方法【Rails】【React】

はじめに

 本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
 そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
 間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

Docker for macのコンテナに他端末からアクセスする方法

Docker for macでは特段の設定をすることなく、ローカル環境と同じように【Rails】macのrailsサーバーに他の端末からアクセスする方法に記載の手順でアクセスできました。
Windowsの場合には別途設定が必要なようです。

Nginx + Rails

nginx.confを以下のように記述している場合にはhttp://localhostの代わりにhttp://ローカルIPアドレスとすることでiPad等でアクセスできます。

nginx.conf
upstream myapp {
  server unix:///myapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name localhost;
  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  root /myapp/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @myapp;
  keepalive_timeout 5;

  location @myapp {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://myapp;
  }
}

React

npm startした際に表示されたOn Your Networkに記載のアドレスをアドレスバーに入力することでアクセスできます。

ターミナル
  Local:            http://localhost:3000
  On Your Network:  http://192.168.2.108:3000

ローカルIPアドレスをホットキーで取得する方法

ショートカットアプリでショートカットを作成し、ホットキーを割り当てることでホットキーでローカルIPアドレスを取得することができます。

ショートカットアプリで以下の内容のショートカットを作成します。
スクリーンショット 2022-04-07 3.27.27.png

赤枠のマークをクリックして「クイックアクションとして使用」にチェックを入れます。
次に「キーボードショートカットを追加」をクリックし、任意のホットキーを入力します。
スクリーンショット 2022-04-07 3.30.27.png

以下のように「次で実行」に設定したホットキーが表示されます。
スクリーンショット 2022-04-07 3.31.39.png

以降ホットキーを入力することでローカルIPアドレスがクリップボードにコピーされペーストできるようになります。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?