Zenn
📱

Docker上のAPIやアプリケーションにスマホからアクセスする方法(Windows)

2023/11/07に公開
Docker
Rails
tech

概略

ローカルPCのOS上でアプリケーションやAPIサーバーなどを立ち上げている場合は、http://ローカルPCのIPアドレス:ポート番号でスマホからアクセスが可能だが、Dockerコンテナ上で立ち上げている場合はこのままだとアクセスができない。

このためローカルPCでの設定が必要になり、本記事では手順を説明する。

前提

  • PCとスマホは同じwifiに繋がっていること。
  • 一例としてDocker上で起動するRailsのAPIを例として使用しているが、Railsに限らずDocker上で起動しているアプリケーションは同じ手順で接続が可能。

手順

1.Windows Defenderのファイアウォールで許可設定

  • コントロール パネル\システムとセキュリティ\Windows Defender ファイアウォール
    で詳細設定を押下

  • 受信の規則から新しい規則を作成

  • ポートを選択し次へを押下

  • TCPを選択し、特定のローカルポートの欄に入力し次へを押下
    例：http://localhost:3000/でPCからアクセスできるなら、3000を指定する。
    ※複数のコンテナを立ち上げて確認したいアプリケーションが複数有る場合は、複数指定する。

  • 接続を許可するを選択し次へ

  • ドメイン、プライベート、パブリックを選択して次へ。

  • 規則の名前と説明を入力し完了ボタンを押下する。
    ※ 自分自身が追加したと分かりやすい名称にしておいた方が、確認が終わったあとに削除しやすいです。

2.ポートフォワーディング設定

ローカルPCのIPアドレスを確認する

windowsの設定画面の「ネットワークとインターネット」から接続しているネットワークをクリック。
IPv4アドレスの値を確認する。

powershellで実行

  • powershellを管理者として実行する

  • 設定前に現在のポートフォワード設定を確認する

netsh interface portproxy show all
  • netshコマンドでポートフォワードを設定を行なう。
netsh interface portproxy add v4tov4 listenport={ローカルPCのリッスンポート} listenaddress={windowsの設定から確認したIPアドレス} connectport={Docker上で起動しているアクセスしたいアプリケーションのポート} connectaddress={DockerのIPアドレス}

たとえば、Dockerコンテナ上で、rails s -b 0.0.0.0 -p 3001で立ち上げる場合は、DockerのIPアドレスは0.0.0.0を指定する。

# 例
netsh interface portproxy add v4tov4 listenport=3001 listenaddress=172.28.72.28 connectport=3001 connectaddress=0.0.0.0
  • ポートフォワード設定を確認し、設定がされていることを確認する
netsh interface portproxy show all

  • 参考：設定を消す場合
netsh interface portproxy reset

3.Dockerコンテナ上でアプリケーションを起動してスマホから接続してみる。

Dockerコンテナのポートを確認

たとえば以下のような定義のコンテナでAPI (RubyOnRailsで作成) を起動する場合。
APIは以下の定義のwebコンテナで起動する。
ローカルPCのポートも、Dockerのポートも3001になっているので、前手順のnetsh interface (省略)コマンドでは3001を指定していた。

  • 例：docker-compose.yml
version: '3'
services:
  db:
    image: postgis/postgis:13-master
    volumes:
      - postgres:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
      - PGPASSWORD=password
    ports:
      - "5433:5432"
  web:
    build: .
    command: tail -f /dev/null
    volumes:
      - .:/sample_api
      - bundle:/usr/local/bundle
      - rails-cache:/sample_api/tmp/cache
    ports:
      - "3001:3001"

volumes:
  postgres:
    driver: local
  bundle:
    driver: local
  rails-cache:
    driver: local
  • 例：Dockerfile
FROM ruby:3.2.2
# yarnをinstallするためのリポジトリーを取得
# https://classic.yarnpkg.com/en/docs/install#debian-stable
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

# ライブラリをインストール
RUN apt-get update -qq && \
    apt-get install -y build-essential libpq-dev nodejs postgresql-client yarn vim

ENV EDITOR=vim
WORKDIR /sample_api

# Docker内でGemfileに記載のライブラリをインストールする
COPY Gemfile /sample_api/Gemfile
COPY Gemfile.lock /sample_api/Gemfile.lock
RUN bundle install && bundle update
COPY . /sample_api

RUN bundle install && bundle update

RUN rm -f tmp/pids/server.pid

詳細は以下レポジトリ。
https://github.com/sktaz/sample_api/tree/main

APIを起動

  • 1.ローカルPCのターミナル上で実行し、bashを起動する
docker-compose build
docker-compose up -d
docker-compose exec web bash
  • 2.ライブラリのインストール(bashで実行)
bundle install
  • 3.データベースの作成
rails db:create
  • 4.APIサーバーの起動(bash上で実行)
rails s -b 0.0.0.0 -p 3001

スマホからアクセスできることを確認する

  • スマホのブラウザを開き、URL欄に以下を入力しアクセス。
    http://windowsの設定から確認したIPアドレス:3001

  • APIのレスポンスを確認。
    ※ スマホからの接続が上手くいかない場合は、一度dockerコンテナを再作成・再起動→コンテナ上でAPIなどのサーバーを再起動してアクセスを行なってみてください。


    例：認証が必要なAPIを呼び出すと、APIがエラーレスポンスを返していることが確認できる。

確認が終わったら、windows環境を元に戻す

  • 手順1.Windows Defenderのファイアウォールで許可設定で作成した受信の規則を削除する。

  • powershellを管理者として実行し、ポートフォワードの設定を消す。

netsh interface portproxy reset
  • ポートフォワード設定が消えていることを確認する。
netsh interface portproxy show all

Discussion