如何在移动 phone 上使用自定义域和 SSL 在本地访问网站运行？

Question

我有一个 WordPress (WP) 博客运行在我的本地机器上 (OSX)。 WP 站点 URL 设置设置为 https://abc.dev，我可以在我机器的浏览器上毫无问题地访问该站点。

视觉上看起来像这样：

WP 站点运行ning 在端口 443 上，我使用自签名证书使其正常工作。我从 this website 获得了自签名证书。我已将自签名证书导入 OSX Keychain Access 并将其标记为 Always Trust.

这就是我的 docker-compose.yml 文件的样子：

version: '2'
services:
  wordpress:
    build: .
    ports:
      - 8080:80
    volumes:
      - ./config/php.conf.uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
      - ./wp-app:/var/www/html # Full wordpress project
      #- ./plugin-name/trunk/:/var/www/html/wp-content/plugins/plugin-name # Plugin development
      #- ./theme-name/trunk/:/var/www/html/wp-content/themes/theme-name # Theme development
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: root
      WORDPRESS_DB_PASSWORD: password
    depends_on:
      - db
    networks:
      - wordpress-network
  db:
    image: mysql:latest
    ports:
      - 127.0.0.1:3306:3306
    command: [
        '--default_authentication_plugin=mysql_native_password',
        '--character-set-server=utf8mb4',
        '--collation-server=utf8mb4_unicode_ci'
    ]
    volumes:
      - ./wp-data:/docker-entrypoint-initdb.d
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wordpress-network
  caddy:
    image: abiosoft/caddy
    restart: always
    ports:
      - "80:80"
      - "443:443"
    links:
      - wordpress
    volumes:
      - "./Caddyfile:/etc/Caddyfile"
      - "./caddy:/var/caddy"
    networks:
      - wordpress-network
networks:
  wordpress-network:
      driver: bridge

这是 Caddyfile:

abc.dev:443
root /var/www/html

tls /var/caddy/cert.pem /var/caddy/key.pem
proxy / wordpress {
    transparent
}

log     stdout
errors  stderr

树结构如下所示：

├── Caddyfile
├── caddy
│   ├── cert.pem
│   └── key.pem
└── docker-compose.yml

Docker 撰写打开的端口：

$ lsof -PiTCP -sTCP:LISTEN | grep com.dock

com.docke 497 zz   18u  IPv4 0xc97e1c7b362c847b      0t0  TCP localhost:3306 (LISTEN)
com.docke 497 zz   23u  IPv6 0xc97e1c7b3aa15d0b      0t0  TCP localhost:3306 (LISTEN)
com.docke 497 zz   24u  IPv4 0xc97e1c7b50618b83      0t0  TCP *:8080 (LISTEN)
com.docke 497 zz   25u  IPv6 0xc97e1c7b3aa1624b      0t0  TCP localhost:8080 (LISTEN)
com.docke 497 zz   27u  IPv4 0xc97e1c7b39e63b83      0t0  TCP *:443 (LISTEN)
com.docke 497 zz   28u  IPv4 0xc97e1c7b5061b85b      0t0  TCP *:80 (LISTEN)

我在 8080 打开 wordpress 端口的主要原因是因为 Caddy 想要打开 80 和 443 端口。因此，通过这样做，它帮助我解决了端口冲突问题。

我现在的问题是，我想在我的 phone 上访问 WP 站点，我希望 URL 和 phone 中的 https://abc.dev 一样。

这几天一直在Squid proxy and Mitmproxy胡思乱想，也没找到什么运气

我通常尝试过的一些事情：

使用 SquidMan 设置代理
设置 Mitmproxy 运行ning reverse 模式
设置 Mitmproxy 运行ning upstream 模式
在我的 phone

Mitmproxy cert

使用 VirtualBox 在我的机器 (OSX) 上设置 Ubuntu 18 服务器虚拟机，安装 Mitmproxy，运行 Mitmproxy，配置主机 (OSX) 和 phone 使用那个 Ubuntu 18 服务器作为代理

上面的所有步骤都不适合我，我不知道如何让这个设置对我有用。

我不想将 WP 站点 URL 设置更改为其他 URL，即 http://localhost[:port] 或 https://localhost[:port]，因为它在我的机器上运行良好。

此外，我希望我的设置在外观和行为上与我的生产网站一样接近运行ning 使用相同的 URL 结构，https://example.com.

我发现了 CharlesProxy，但我不喜欢它，因为它是付费软件。我确信 Squid、Mitmproxy 和其他一些工具可以帮助我解决这个问题。我只是不确定该怎么做。

非常感谢所有帮助和指点。

Answer 1

回答

首先确定你的问题只是DNS。您应该能够从您的 phone 连接到您计算机的 IP http://COMPUTER_IP 的网站。如果您无法加载网站，请检查防火墙。

您的本地主机知道 abc.dev 并将其解析为本地主机。

但这对于家庭网络中的其他主机而言并非如此。另一个 Windows/Mac/Linux 只需要在 hosts 文件中添加域条目。在 Linux 中它可能看起来像

/etc/hosts

127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
COMPUTER_IP abc.dev

但是对于 phone 来说，出于安全原因，管理自定义 DNS 记录并不容易。

一种可能的解决方案，使用家里现有的 DNS 服务器：

如果您的家庭路由器可以添加静态 DNS 条目。在您的家庭路由器中添加自定义 DNS 条目以指向 abc.dev 您计算机的家庭网络 IP 地址。

第二种可能的解决方案，使用在线 DNS 服务：

这个不使用 abc.dev，但使用在线服务提供的东西，例如在 https://www.noip.com/ 上，您可以注册 abc1234.ddns.net，然后将 COMPUTER_IP 设置为该域的 IP。在 caddy 中，您使用相同的域 abc1234.ddns.net。

这样您的 phone 将向 noip 询问 abc1234.ddns.net 的 IP，它会回答您的 COMPUTER_IP 并且浏览器连接到您的计算机。

第三种可能的解决方案：

使用 docker-compose 和 wordpress 一起部署您的 DNS 服务器。
将 COMPUTER_IP 设置为 phone 中的 DNS 服务器。

要尝试此操作，请将这些文件添加到您的 docker-compose 项目中。

dnsmasq/dnsmasq.conf 正在运行配置文件，但您需要更改最后一行：

address=/abc.dev/COMPUTER_IP

请输入您计算机的 IP 地址 COMPUTER_IP。

你的目录结构 docker-compose.yml:

docker-compose.yml
dnsmasq/dockerfile
dnsmasq/dnsmasq.conf
... other files

你的docker-compose.yml

version: '2'
services:
    wordpress:
        ...
    db:
        ...
    caddy:
        ...
    dnsmasq:
        build:
            context: .
            dockerfile: ./dnsmasq/dockerfile
        ports:
            - "53:53/udp"
        cap_add:
            - NET_ADMIN
    ...

dnsmasq/dockerfile

FROM andyshinn/dnsmasq

COPY dnsmasq/dnsmasq.conf /etc/dnsmasq.conf

CMD ["--log-facility", "-"]

dnsmasq/dnsmasq.conf

# default dnsmasq config file
# Never forward plain names (without a dot or domain part)
domain-needed
# Never forward addresses in the non-routed address spaces.
bogus-priv
# use DNS server 8.8.8.8 for all except abc.dev
# you can use IP of your home router
server=8.8.8.8
no-hosts
expand-hosts
user=dnsmasq
group=dnsmasq
cache-size=2048
neg-ttl=60
log-queries

# put IP address of your computer instead COMPUTER_IP
address=/abc.dev/COMPUTER_IP

有关 dnsmasq 配置的更多信息，请参阅 manpage。

如何在移动 phone 上使用自定义域和 SSL 在本地访问网站运行？

How to access website running locally with custom domain & SSL on mobile phone?

wordpress

ssl

squid

docker

mitmproxy

回答

一种可能的解决方案，使用家里现有的 DNS 服务器：

第二种可能的解决方案，使用在线 DNS 服务：

第三种可能的解决方案：

如何在移动 phone 上使用自定义域和 SSL 在本地访问网站 运行？

How to access website running locally with custom domain & SSL on mobile phone?

wordpress

ssl

squid

docker

mitmproxy

回答

一种可能的解决方案，使用家里现有的 DNS 服务器：

第二种可能的解决方案，使用在线 DNS 服务：

第三种可能的解决方案：

如何在移动 phone 上使用自定义域和 SSL 在本地访问网站运行？