如何正确使用 ngrok 隧道以实现 WordPress 和 docker compose yml 的最佳工作流程

Question

我正在使用

docker-compose.yml

与其他一些容器一起运行 Wordpress 容器...

version: '3.7'

services:

  # here is our mysql database
  db:
    image: mysql:5.7
    volumes:
      - ./db:/var/lib/mysql:delegated
    ports:
      - "3306:3306"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  # here is our wordpress server
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      # our persistent local data re routing
      - .:/var/www/html/wp-content/themes/testing:delegated
      - ./plugins:/var/www/html/wp-content/plugins
      - ./uploads:/var/www/html/wp-content/uploads
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    ports:
      - "80:80"
    restart: always
    environment:
      # our local dev environment
      WORDPRESS_DEBUG: 1
      DEVELOPMENT: 1
      # docker wp config settings
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_AUTH_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_SECURE_AUTH_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_LOGGED_IN_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_NONCE_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
      WORDPRESS_CONFIG_EXTRA: |
        /* Development parameters */
        define('WP_CACHE', false);
        define('ENVIRONMENT', 'local');
        define('WP_DEBUG', true);

  # here is our mail hog server
  mailhog:
    image: mailhog/mailhog:latest
    ports:
      - "8025:8025"

这

docker-compose.yml

构建了我的Wordpress网站可访问

http://localhost

对于我来说，要设置一个 ngrok 隧道，我必须通过 ngrok 仪表板添加一个新隧道并按照这些说明进行操作...

这会将我的身份验证代码添加到我的用户根目录中的

.ngrok/ngrok.yml

，然后启动 https 和 http 的隧道。这个方法似乎有点啰嗦，因为我每次开始新会话时都必须这样做。

是否可以在

docker-compose up -d

上运行此代码作为我本地环境的一部分？

---

此外，每次我开始新会话时，我的隧道 URL 都会发生变化。我在我的 ngrok 仪表板中创建了一个自定义域，这就是没有运行隧道的情况...

然后，如果我启动隧道（使用上面显示的默认方法）...

Last login: Sat Oct 17 17:17:53 on ttys005
joshmoto@Joshs-iMac ~ % unzip /Users/joshmoto/Desktop/ngrok.zip
Archive:  /Users/joshmoto/Desktop/ngrok.zip
replace ngrok? [y]es, [n]o, [A]ll, [N]one, [r]ename: y
  inflating: ngrok                   
joshmoto@Joshs-iMac ~ % 

ngrok by @inconshreveable                                                (Ctrl+C to quit)
                                                                                         
Session Status                online                                                     
Account                       joshmoto (Plan: Basic)                                     
Version                       2.3.35                                                     
Region                        United States (us)                                         
Web Interface                 http://127.0.0.1:4040                                      
Forwarding                    http://############.ngrok.io -> http://localhost:80        
Forwarding                    https://############.ngrok.io -> http://localhost:80       
                                                                                         
Connections                   ttl     opn     rt1     rt5     p50     p90                
                              0       0       0.00    0.00    0.00    0.00 

然后回头看看我的自定义域名，一模一样，

0 tunnels

。

---

在我运行上述隧道后，Wordpress / Docker Compose 还存在另一个问题。

http://############.ngrok.io

ajax 似乎不起作用，但除了字体之外，网络资源加载得很好。 。

我不太担心，因为我的主要目标是为 webhooks 提供一个可用的

https

url。

https://############.ngrok.io

url 确实有效，但根本没有加载任何资源。然而，对于 webhook 的使用来说，它确实有效。

但是每次我重新启动终端 ngrok 会话时，这些隧道 URL 都会发生变化，因此使用自定义 url 会更好。

---

我尝试使用 docker 镜像 wernight/ngrok 和这些

docker-compose.yml

配置...

version: '3.7'

services:

  # ngrok
  ngrok:
    image: wernight/ngrok:latest
    environment:
      NGROK_AUTH: #################################################
      NGROK_LOOK_DOMAIN: localhost
      NGROK_PROTOCOL: http
      NGROK_PORT: 80
      NGROK_BINDTLS: true
      NGROK_HOSTNAME: mycustomdomain.eu.ngrok.io
      NGROK_REMOTE_ADDR: 127.0.0.1:80

    ports:
      - "4040:4040"

    ...

然后是命令行

docker-compose down

和

up -d

，但是自定义的ngrok url页面返回...

未找到隧道 mycustomdomain.eu.ngrok.io

---

使用 docker compose wordpress 映像配置 ngrok 以获得最佳工作流程并使用自定义 ngrok 域的最佳方法是什么。

我也尝试过这些 ngrok wordpress 选项（参见 ngrok wp 文档）来修复资产...

WORDPRESS_CONFIG_EXTRA: |

  /* ngrok wp urls overrides */
  define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
  define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

但是当我

docker-compose up -d

并破坏

localhost

版本时，这会返回下面的警告，并且不会更改 ngrok 隧道 url 上的任何内容。

WARNING: The _SERVER variable is not set. Defaulting to a blank string.

任何想法都会很棒，谢谢。

Answer 1

值 NGROK_LOOK_DOMAIN 应该使用 Docker 的本地主机，而不是通用的本地主机，

用这个代替

NGROK_LOOK_DOMAIN = 主机.docker.internal

这对我有用

Answer 2

我设法让它与以下 docker-compose.yaml 一起工作：

version: '3.7'

volumes:
    mysite_wordpress_content:
    mysite_mysql_data:
    
services:
  mysite_mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"    
    volumes:
      - mysite_mysql_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  mysite_wordpress:
    depends_on:
      - mysite_mysql
    image: wordpress:6.3.2
    ports:
      - "8181:80"
    volumes:
      - mysite_wordpress_content:/var/www/html/wp-content
      - ./Backups:/Backups
    restart: always
    environment:
      WORDPRESS_DB_HOST: mysite_mysql:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

并使用以下命令启动 ngrok>

docker run -it --net=host -e NGROK_AUTHTOKEN=<myToken> ngrok/ngrok http --host-header=127.0.0.1:8181 8181

（另请参阅 WordPress stackexchange 网站上的我的问题和我的答案）