如何使用 WSL2 中的反向代理 Apache 网络在 Docker 中配置 Browsersync

问题描述 投票：0回答：1

我正在尝试让 Browsersync、WordPress 和 Apache 在 WSL2 (Ubuntu) 的 Docker 中工作。几年前，我在 Windows 上的 XAMPP 中使用了 Browsersync，但我意识到这要复杂一个数量级。

除了 Browsersync 之外，一切都正常，我可以通过端口 80 和 443 在 Windows 上的浏览器中访问 WordPress，但如果我使用 Browsersync 在 

mysite.localhost
访问它，Apache 日志不会响应，浏览器会返回以下内容： 
http://mysite.localhost:3000


如果我更改文件，Browsersync 会在日志中看到更改，但我无法让浏览器看到任何内容。我花了一周的时间，我发现的最接近的是 
this Question
，作者自己回答了这个问题，尽管他们使用 Nginx 作为代理和 Laravel，不确定这会产生多大的差异。
以下是我的 Docker Compose 的相关部分：


This site can’t be reached
mysite.localhost unexpectedly closed the connection
ERR_CONNECTION_CLOSED



浏览器同步配置：


services:

  node:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
    image: node:18.16.1-build
    container_name: node
    restart: always
    depends_on:
      - wordpress
    # user: "node"
    expose:
      - 3000
      - 3001
    volumes:
      - ./wordpress/source/themes/omikuji/src:/home/node/omikuji/src
      - ./wordpress/source/themes/omikuji/dist:/home/node/omikuji/dist
      - ./wordpress/source/themes/omikuji/bs-config.js:/home/node/omikuji/bs-config.js
    command: "npm run dev"
    networks:
      - apache

  database:
    #...database stuff
    networks:
      - apache

  wordpress:
    build:
      context: .
      dockerfile: ./docker/wordpress/Dockerfile
    image: wordpress:6.2.2-php8.1-build
    container_name: wordpress
    restart: always
    hostname: mysite.localhost
    depends_on:
      database:
        condition: service_healthy
    expose:
      - 80
    volumes:
      - ./wordpress/source/themes/omikuji/dist:/var/www/html/wp-content/themes/omikuji
    environment:
      TZ: ${TZ} # Set local time
      WORDPRESS_DB_HOST: database
      WORDPRESS_DB_USER: ${MARIADB_USER}
      WORDPRESS_DB_PASSWORD: ${MARIADB_PASSWORD}
      WORDPRESS_DB_NAME: ${MARIADB_DATABASE}
      WORDPRESS_DEBUG: 1
    networks:
      - apache

  phpmyadmin:
    # ...phpmyadmin stuff
    networks:
      - apache

  apache:
    build:
      context: .
      dockerfile: ./docker/apache/Dockerfile
    image: httpd:2.4-build
    container_name: apache
    ports:
      - 80:80
      - 443:443
      - 3000:3000
      - 3001:3001
    environment:
      TZ: ${TZ} # Set local time
    networks:
      - apache

volumes:
  db_data:
    external: true

networks:
  apache:
    name: apache



httpd-vhosts.conf 中的 Apache 虚拟主机：


module.exports = {
  "logLevel": "debug",
  "logConnections": false,
  "logFileChanges": true,
  "logSnippet": true,
  "open": false,
  "files": ["./dist/style.css", "./dist/js/*.js", "./dist/*.php"],
  "proxy": "http://node:3000",
  "host": "node",
  "port": 3000,
  "reloadDebounce": 2000,
  "watchOptions": {
    "awaitWriteFinish": true
  }
};



在 WordPress 根目录的 .htaccess 中重写规则：


<VirtualHost *:80>
  ServerName localhost
  RewriteEngine On
  RewriteCond %{HTTP:X-Forwarded-Proto} !https
  RewriteCond %{HTTPS} !=on
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</VirtualHost>

<VirtualHost *:80>
  ServerName mysite.localhost

  # SSL redirection is in .htaccess

  # Reverse proxy
  ProxyPreserveHost On
  ProxyPass / http://wordpress:80/
  ProxyPassReverse / http://wordpress:80/
  RequestHeader set X-Forwarded-Proto http
</VirtualHost>

<VirtualHost *:443>
  ServerName mysite.localhost

  # Reverse proxy
  ProxyPreserveHost On
  ProxyPass / http://wordpress:80/
  ProxyPassReverse / http://wordpress:80/
  RequestHeader set X-Forwarded-Proto https

  # Enable SSL
  SSLEngine on
  SSLCertificateFile /etc/ssl/certs/mysite.localhost.pem
  SSLCertificateKeyFile /etc/ssl/private/mysite.localhost-key.pem
</VirtualHost>

<VirtualHost *:3000>
  ServerName mysite.localhost

  # Reverse proxy
  ProxyPreserveHost On
  ProxyPass / http://node:3000/
  ProxyPassReverse / http://node:3000/
  RequestHeader set X-Forwarded-Proto http

  # Enable SSL
  SSLEngine on
  SSLCertificateFile /etc/ssl/certs/mysite.localhost.pem
  SSLCertificateKeyFile /etc/ssl/private/mysite.localhost-key.pem
</VirtualHost>



Apache Dockerfile：


RewriteEngine On

# If the request is not https on the development server (reverse proxy)
RewriteCond %{HTTP:X-Forwarded-Proto} !https

# If the request is not https on the production server
RewriteCond %{HTTPS} !=on

# Redirect to SSL
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]



节点 Dockerfile：


FROM httpd:2.4

# Copy the configuration files
WORKDIR /usr/local/apache2/conf
COPY ./localhost/apache/httpd.conf httpd.conf

# Copy the configuration extra files
WORKDIR /usr/local/apache2/conf/extra
COPY ./localhost/apache/httpd-vhosts.conf httpd-vhosts.conf
COPY ./localhost/apache/httpd-ssl.conf httpd-ssl.conf
COPY ./localhost/apache/proxy-html.conf proxy-html.conf

# Copy the SSL certificates
WORKDIR /etc/ssl/certs
COPY ./localhost/certs/localhost.pem localhost.pem
COPY ./localhost/certs/mysite.localhost.pem mysite.localhost.pem
COPY ./localhost/certs/phpmyadmin.localhost.pem phpmyadmin.localhost.pem

# Copy the SSL certificate private keys
WORKDIR /etc/ssl/private
COPY ./localhost/private/localhost-key.pem localhost-key.pem
COPY ./localhost/private/mysite.localhost-key.pem mysite.localhost-key.pem
COPY ./localhost/private/phpmyadmin.localhost-key.pem phpmyadmin.localhost-key.pem

# Change to default directory
WORKDIR /usr/local/apache2



节点日志响应文件更改：


FROM node:18.16.1

# Copy SSL certificates
WORKDIR /etc/ssl/certs
COPY ./localhost/certs/mysite.localhost.pem mysite.localhost.pem
WORKDIR /etc/ssl/private
COPY ./localhost/private/mysite.localhost-key.pem mysite.localhost-key.pem

# Copy configuration files to root
RUN mkdir /home/node/omikuji
WORKDIR /home/node/omikuji
COPY ./wordpress/source/themes/omikuji/.stylelintrc.json .stylelintrc.json
COPY ./wordpress/source/themes/omikuji/package.json package.json
COPY ./wordpress/source/themes/omikuji/package-lock.json package-lock.json

# Install npm packages
RUN npm install

# Add environment variables after installing npm
ENV NPM_CONFIG_LOGLEVEL info
ENV NODE_ENV development


    



    
    docker
    
    apache
    
    reverse-proxy
    
    windows-subsystem-for-linux
    
    browser-sync
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        


我的服务器完全支持实时重新加载和 SSL（帽子提示 
chatGPT
），我不再需要 Browsersync。如果其他人有兴趣学习如何执行此操作，这些是我使用的 Node 包。
 *  Executing task in folder Development: docker logs --tail 1000 -f 78ed8100eca903cd446d057b7da9f05fefac45f31d97d865e9b32a9264c15665 

npm info using [email protected]
npm info using [email protected]

> [email protected] dev
> npm-run-all --parallel localhost dev:scss

npm info using [email protected]
npm info using [email protected]
npm info using [email protected]
npm info using [email protected]

> [email protected] dev:scss
> sass --watch --verbose --style=expanded ./src/scss/style.scss:./dist/style.css


> [email protected] localhost
> browser-sync start --config 'bs-config.js'

[Browsersync] [debug] -> Starting Step: Finding an empty port
[Browsersync] [debug] Found a free port: 3000
[Browsersync] [debug] Setting Option: {cyan:port} - {magenta:3000
[Browsersync] [debug] +  Step Complete: Finding an empty port
[Browsersync] [debug] -> Starting Step: Getting an extra port for Proxy
[Browsersync] [debug] +  Step Complete: Getting an extra port for Proxy
[Browsersync] [debug] -> Starting Step: Checking online status
[Browsersync] [debug] Resolved www.google.com, setting online: true
[Browsersync] [debug] Setting Option: {cyan:online} - {magenta:true
[Browsersync] [debug] +  Step Complete: Checking online status
[Browsersync] [debug] -> Starting Step: Resolve user plugins from options
[Browsersync] [debug] +  Step Complete: Resolve user plugins from options
[Browsersync] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[Browsersync] [debug] Setting multiple Options
[Browsersync] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
[Browsersync] [debug] -> Starting Step: Setting Internal Events
[Browsersync] [debug] +  Step Complete: Setting Internal Events
[Browsersync] [debug] -> Starting Step: Setting file watchers
[Browsersync] [debug] +  Step Complete: Setting file watchers
[Browsersync] [debug] -> Starting Step: Merging middlewares from core + plugins
[Browsersync] [debug] Setting Option: {cyan:middleware} - {magenta:List []
[Browsersync] [debug] +  Step Complete: Merging middlewares from core + plugins
[Browsersync] [debug] -> Starting Step: Starting the Server
[Browsersync] [debug] Proxy running, proxing: {magenta:http://node:3000}
[Browsersync] [debug] Running mode: PROXY
[Browsersync] [debug] +  Step Complete: Starting the Server
[Browsersync] [debug] -> Starting Step: Starting the HTTPS Tunnel
[Browsersync] [debug] +  Step Complete: Starting the HTTPS Tunnel
[Browsersync] [debug] -> Starting Step: Starting the web-socket server
[Browsersync] [debug] Setting Option: {cyan:clientEvents} - {magenta:List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[Browsersync] [debug] +  Step Complete: Starting the web-socket server
[Browsersync] [debug] -> Starting Step: Starting the UI
[Browsersync] [debug] Setting Option: {cyan:session} - {magenta:1690129836067
[Browsersync] [UI] Starting Step: Setting default plugins
[Browsersync] [UI] Step Complete: %s Setting default plugins
[Browsersync] [UI] Starting Step: Finding a free port
[Browsersync] [UI] Step Complete: %s Finding a free port
[Browsersync] [UI] Starting Step: Setting options also relevant to UI from BS
[Browsersync] [UI] Step Complete: %s Setting options also relevant to UI from BS
[Browsersync] [UI] Starting Step: Setting available URLS for UI
[Browsersync] [debug] Getting option via path: {magenta:[ 'urls' ]
[Browsersync] [UI] Step Complete: %s Setting available URLS for UI
[Browsersync] [UI] Starting Step: Starting the Control Panel Server
[Browsersync] [UI] Using port 3001
[Browsersync] [UI] Step Complete: %s Starting the Control Panel Server
[Browsersync] [UI] Starting Step: Add element events
[Browsersync] [UI] Step Complete: %s Add element events
[Browsersync] [UI] Starting Step: Registering default plugins
[Browsersync] [UI] Step Complete: %s Registering default plugins
[Browsersync] [UI] Starting Step: Add options setting event
[Browsersync] [UI] Step Complete: %s Add options setting event
[Browsersync] [debug] +  Step Complete: Starting the UI
[Browsersync] [debug] -> Starting Step: Merge UI settings
[Browsersync] [debug] Setting Option: {cyan:urls} - {magenta:Map { "local": "http://localhost:3000", "external": "http://node:3000", "ui": "http://localhost:3001", "ui-external": "http://localhost:3001" }
[Browsersync] [debug] +  Step Complete: Merge UI settings
[Browsersync] [debug] -> Starting Step: Init user plugins
[Browsersync] [debug] Setting Option: {cyan:userPlugins} - {magenta:
[Browsersync] [debug] +  Step Complete: Init user plugins
[Browsersync] Proxying: http://node:3000
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://node:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------
[Browsersync] Watching files...
Sass is watching for changes. Press Ctrl-C to stop.

[2023-07-23 16:30] Compiled src/scss/style.scss to dist/style.css.
[Browsersync] File event [change] : dist/style.css



chokidar 包用于监视文件的更改，socket.io 包用于实时重新加载，其他包是核心服务器、SSL、代理对 Docker WordPress 容器的请求以及注入 Socket 所需的 HTML 所必需的.io.


在 Apache 虚拟主机中，代理地址指向 Docker 中 Node 容器的名称和端口，其中我的 Node 容器名称是 
  "devDependencies": {
    "chokidar": "^3.5.3",
    "express": "^4.18.2",
    "http": "^0.0.1-security",
    "http-proxy-middleware": "^2.0.6",
    "https": "^1.0.0",
    "socket.io": "^4.7.1",
    "socket.io-client": "^4.7.2"
  },

，端口是 
node
。
另请注意 
3000
 指令。这是支持 WebSocket 的
更新方法
，并且是您所需要的，比使用 WebSocket 重写和路径重定向的已弃用方法要容易得多。
upgrade=websocket

    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.