wordpress - 如何在手机上使用自定义域和 SSL 访问本地运行的网站？

Question

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

在视觉上，它看起来像这样:

WP 站点在端口 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 Compose 打开的端口:

$ 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 端口被打开。因此，通过这样做，它帮助我解决了端口冲突问题。

我现在的问题是，我想在我的手机上访问 WP 站点，我希望手机中的 URL 也是 https://abc.dev。

这几天一直在和Squid胡闹代理和Mitmproxy并没有找到任何运气。

我一般尝试过的一些事情:

1. 使用 SquidMan 设置代理
2. 设置 Mitmproxy 运行 reverse 模式
3. 设置 Mitmproxy 运行 upstream 模式
4. 安装并信任 Mitmproxy cert在我的手机里
5. 使用 VirtualBox 在我的机器 (OSX) 上设置 Ubuntu 18 Server VM，安装 Mitmproxy，运行 Mitmproxy，配置主机 (OSX) 和手机以使用该 Ubuntu 18 Server 作为代理

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

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

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

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

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

Answer 1

回答

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

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

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

/etc/主机

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

但是出于安全原因，对于手机来说，定制 DNS 记录并不容易。

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

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

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

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

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

第三种可能的解决方案:

1. 使用 docker-compose 和 wordpress 一起部署您的 DNS 服务器。
2. 将您的 COMPUTER_IP 设置为手机中的 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/docker 文件

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 .