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

0md85ypi  于 2023-10-23  发布在  Apache
关注(0)|答案(1)|浏览(138)

我试图让Browsersync，WordPress和Apache在WSL 2（Ubuntu）的Docker中工作。几年前，我在Windows上的XAMPP中使用了Browsersync，但我意识到这是一个更复杂的数量级。
除了Browsersync之外，一切都可以正常工作，我可以在Windows上通过端口80和443在mysite.localhost访问WordPress，但如果我在http://mysite.localhost:3000上使用Browsersync访问它，Apache日志不会响应，浏览器返回以下内容：

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

如果我更改了一个文件，Browsersync会在日志中看到更改，但我无法让浏览器看到任何内容。我花了一个星期的时间，我发现最接近的是this question，作者自己回答说，虽然他们使用Nginx作为代理和Laravel，不知道有多大的区别。
以下是我的Docker Compose的相关部分：

  1. services:
  3.   node:
  4.     build:
  5.       context: .
  6.       dockerfile: ./docker/node/Dockerfile
  7.     image: node:18.16.1-build
  8.     container_name: node
  9.     restart: always
  10.     depends_on:
  11.       - wordpress
  12.     # user: "node"
  13.     expose:
  14.       - 3000
  15.       - 3001
  16.     volumes:
  17.       - ./wordpress/source/themes/omikuji/src:/home/node/omikuji/src
  18.       - ./wordpress/source/themes/omikuji/dist:/home/node/omikuji/dist
  19.       - ./wordpress/source/themes/omikuji/bs-config.js:/home/node/omikuji/bs-config.js
  20.     command: "npm run dev"
  21.     networks:
  22.       - apache
  24.   database:
  25.     #...database stuff
  26.     networks:
  27.       - apache
  29.   wordpress:
  30.     build:
  31.       context: .
  32.       dockerfile: ./docker/wordpress/Dockerfile
  33.     image: wordpress:6.2.2-php8.1-build
  34.     container_name: wordpress
  35.     restart: always
  36.     hostname: mysite.localhost
  37.     depends_on:
  38.       database:
  39.         condition: service_healthy
  40.     expose:
  41.       - 80
  42.     volumes:
  43.       - ./wordpress/source/themes/omikuji/dist:/var/www/html/wp-content/themes/omikuji
  44.     environment:
  45.       TZ: ${TZ} # Set local time
  46.       WORDPRESS_DB_HOST: database
  47.       WORDPRESS_DB_USER: ${MARIADB_USER}
  48.       WORDPRESS_DB_PASSWORD: ${MARIADB_PASSWORD}
  49.       WORDPRESS_DB_NAME: ${MARIADB_DATABASE}
  50.       WORDPRESS_DEBUG: 1
  51.     networks:
  52.       - apache
  54.   phpmyadmin:
  55.     # ...phpmyadmin stuff
  56.     networks:
  57.       - apache
  59.   apache:
  60.     build:
  61.       context: .
  62.       dockerfile: ./docker/apache/Dockerfile
  63.     image: httpd:2.4-build
  64.     container_name: apache
  65.     ports:
  66.       - 80:80
  67.       - 443:443
  68.       - 3000:3000
  69.       - 3001:3001
  70.     environment:
  71.       TZ: ${TZ} # Set local time
  72.     networks:
  73.       - apache
  75. volumes:
  76.   db_data:
  77.     external: true
  79. networks:
  80.   apache:
  81.     name: apache

browsersync配置：

  1. module.exports = {
  2.   "logLevel": "debug",
  3.   "logConnections": false,
  4.   "logFileChanges": true,
  5.   "logSnippet": true,
  6.   "open": false,
  7.   "files": ["./dist/style.css", "./dist/js/*.js", "./dist/*.php"],
  8.   "proxy": "http://node:3000",
  9.   "host": "node",
  10.   "port": 3000,
  11.   "reloadDebounce": 2000,
  12.   "watchOptions": {
  13.     "awaitWriteFinish": true
  14.   }
  15. };

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

  1. <VirtualHost *:80>
  2.   ServerName localhost
  3.   RewriteEngine On
  4.   RewriteCond %{HTTP:X-Forwarded-Proto} !https
  5.   RewriteCond %{HTTPS} !=on
  6.   RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  7. </VirtualHost>
  9. <VirtualHost *:80>
  10.   ServerName mysite.localhost
  12.   # SSL redirection is in .htaccess
  14.   # Reverse proxy
  15.   ProxyPreserveHost On
  16.   ProxyPass / http://wordpress:80/
  17.   ProxyPassReverse / http://wordpress:80/
  18.   RequestHeader set X-Forwarded-Proto http
  19. </VirtualHost>
  21. <VirtualHost *:443>
  22.   ServerName mysite.localhost
  24.   # Reverse proxy
  25.   ProxyPreserveHost On
  26.   ProxyPass / http://wordpress:80/
  27.   ProxyPassReverse / http://wordpress:80/
  28.   RequestHeader set X-Forwarded-Proto https
  30.   # Enable SSL
  31.   SSLEngine on
  32.   SSLCertificateFile /etc/ssl/certs/mysite.localhost.pem
  33.   SSLCertificateKeyFile /etc/ssl/private/mysite.localhost-key.pem
  34. </VirtualHost>
  36. <VirtualHost *:3000>
  37.   ServerName mysite.localhost
  39.   # Reverse proxy
  40.   ProxyPreserveHost On
  41.   ProxyPass / http://node:3000/
  42.   ProxyPassReverse / http://node:3000/
  43.   RequestHeader set X-Forwarded-Proto http
  45.   # Enable SSL
  46.   SSLEngine on
  47.   SSLCertificateFile /etc/ssl/certs/mysite.localhost.pem
  48.   SSLCertificateKeyFile /etc/ssl/private/mysite.localhost-key.pem
  49. </VirtualHost>

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

  1. RewriteEngine On
  3. # If the request is not https on the development server (reverse proxy)
  4. RewriteCond %{HTTP:X-Forwarded-Proto} !https
  6. # If the request is not https on the production server
  7. RewriteCond %{HTTPS} !=on
  9. # Redirect to SSL
  10. RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Apache Dockerfile：

  1. FROM httpd:2.4
  3. # Copy the configuration files
  4. WORKDIR /usr/local/apache2/conf
  5. COPY ./localhost/apache/httpd.conf httpd.conf
  7. # Copy the configuration extra files
  8. WORKDIR /usr/local/apache2/conf/extra
  9. COPY ./localhost/apache/httpd-vhosts.conf httpd-vhosts.conf
  10. COPY ./localhost/apache/httpd-ssl.conf httpd-ssl.conf
  11. COPY ./localhost/apache/proxy-html.conf proxy-html.conf
  13. # Copy the SSL certificates
  14. WORKDIR /etc/ssl/certs
  15. COPY ./localhost/certs/localhost.pem localhost.pem
  16. COPY ./localhost/certs/mysite.localhost.pem mysite.localhost.pem
  17. COPY ./localhost/certs/phpmyadmin.localhost.pem phpmyadmin.localhost.pem
  19. # Copy the SSL certificate private keys
  20. WORKDIR /etc/ssl/private
  21. COPY ./localhost/private/localhost-key.pem localhost-key.pem
  22. COPY ./localhost/private/mysite.localhost-key.pem mysite.localhost-key.pem
  23. COPY ./localhost/private/phpmyadmin.localhost-key.pem phpmyadmin.localhost-key.pem
  25. # Change to default directory
  26. WORKDIR /usr/local/apache2

Node Dockerfile：

  1. FROM node:18.16.1
  3. # Copy SSL certificates
  4. WORKDIR /etc/ssl/certs
  5. COPY ./localhost/certs/mysite.localhost.pem mysite.localhost.pem
  6. WORKDIR /etc/ssl/private
  7. COPY ./localhost/private/mysite.localhost-key.pem mysite.localhost-key.pem
  9. # Copy configuration files to root
  10. RUN mkdir /home/node/omikuji
  11. WORKDIR /home/node/omikuji
  12. COPY ./wordpress/source/themes/omikuji/.stylelintrc.json .stylelintrc.json
  13. COPY ./wordpress/source/themes/omikuji/package.json package.json
  14. COPY ./wordpress/source/themes/omikuji/package-lock.json package-lock.json
  16. # Install npm packages
  17. RUN npm install
  19. # Add environment variables after installing npm
  20. ENV NPM_CONFIG_LOGLEVEL info
  21. ENV NODE_ENV development

节点日志响应文件更改：

  1. *  Executing task in folder Development: docker logs --tail 1000 -f 78ed8100eca903cd446d057b7da9f05fefac45f31d97d865e9b32a9264c15665 
  3. npm info using [email protected]
  4. npm info using [email protected]
  6. > [email protected] dev
  7. > npm-run-all --parallel localhost dev:scss
  9. npm info using [email protected]
  10. npm info using [email protected]
  11. npm info using [email protected]
  12. npm info using [email protected]
  14. > [email protected] dev:scss
  15. > sass --watch --verbose --style=expanded ./src/scss/style.scss:./dist/style.css
  17. > [email protected] localhost
  18. > browser-sync start --config 'bs-config.js'
  20. [Browsersync] [debug] -> Starting Step: Finding an empty port
  21. [Browsersync] [debug] Found a free port: 3000
  22. [Browsersync] [debug] Setting Option: {cyan:port} - {magenta:3000
  23. [Browsersync] [debug] +  Step Complete: Finding an empty port
  24. [Browsersync] [debug] -> Starting Step: Getting an extra port for Proxy
  25. [Browsersync] [debug] +  Step Complete: Getting an extra port for Proxy
  26. [Browsersync] [debug] -> Starting Step: Checking online status
  27. [Browsersync] [debug] Resolved www.google.com, setting online: true
  28. [Browsersync] [debug] Setting Option: {cyan:online} - {magenta:true
  29. [Browsersync] [debug] +  Step Complete: Checking online status
  30. [Browsersync] [debug] -> Starting Step: Resolve user plugins from options
  31. [Browsersync] [debug] +  Step Complete: Resolve user plugins from options
  32. [Browsersync] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
  33. [Browsersync] [debug] Setting multiple Options
  34. [Browsersync] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
  35. [Browsersync] [debug] -> Starting Step: Setting Internal Events
  36. [Browsersync] [debug] +  Step Complete: Setting Internal Events
  37. [Browsersync] [debug] -> Starting Step: Setting file watchers
  38. [Browsersync] [debug] +  Step Complete: Setting file watchers
  39. [Browsersync] [debug] -> Starting Step: Merging middlewares from core + plugins
  40. [Browsersync] [debug] Setting Option: {cyan:middleware} - {magenta:List []
  41. [Browsersync] [debug] +  Step Complete: Merging middlewares from core + plugins
  42. [Browsersync] [debug] -> Starting Step: Starting the Server
  43. [Browsersync] [debug] Proxy running, proxing: {magenta:http://node:3000}
  44. [Browsersync] [debug] Running mode: PROXY
  45. [Browsersync] [debug] +  Step Complete: Starting the Server
  46. [Browsersync] [debug] -> Starting Step: Starting the HTTPS Tunnel
  47. [Browsersync] [debug] +  Step Complete: Starting the HTTPS Tunnel
  48. [Browsersync] [debug] -> Starting Step: Starting the web-socket server
  49. [Browsersync] [debug] Setting Option: {cyan:clientEvents} - {magenta:List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
  50. [Browsersync] [debug] +  Step Complete: Starting the web-socket server
  51. [Browsersync] [debug] -> Starting Step: Starting the UI
  52. [Browsersync] [debug] Setting Option: {cyan:session} - {magenta:1690129836067
  53. [Browsersync] [UI] Starting Step: Setting default plugins
  54. [Browsersync] [UI] Step Complete: %s Setting default plugins
  55. [Browsersync] [UI] Starting Step: Finding a free port
  56. [Browsersync] [UI] Step Complete: %s Finding a free port
  57. [Browsersync] [UI] Starting Step: Setting options also relevant to UI from BS
  58. [Browsersync] [UI] Step Complete: %s Setting options also relevant to UI from BS
  59. [Browsersync] [UI] Starting Step: Setting available URLS for UI
  60. [Browsersync] [debug] Getting option via path: {magenta:[ 'urls' ]
  61. [Browsersync] [UI] Step Complete: %s Setting available URLS for UI
  62. [Browsersync] [UI] Starting Step: Starting the Control Panel Server
  63. [Browsersync] [UI] Using port 3001
  64. [Browsersync] [UI] Step Complete: %s Starting the Control Panel Server
  65. [Browsersync] [UI] Starting Step: Add element events
  66. [Browsersync] [UI] Step Complete: %s Add element events
  67. [Browsersync] [UI] Starting Step: Registering default plugins
  68. [Browsersync] [UI] Step Complete: %s Registering default plugins
  69. [Browsersync] [UI] Starting Step: Add options setting event
  70. [Browsersync] [UI] Step Complete: %s Add options setting event
  71. [Browsersync] [debug] +  Step Complete: Starting the UI
  72. [Browsersync] [debug] -> Starting Step: Merge UI settings
  73. [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" }
  74. [Browsersync] [debug] +  Step Complete: Merge UI settings
  75. [Browsersync] [debug] -> Starting Step: Init user plugins
  76. [Browsersync] [debug] Setting Option: {cyan:userPlugins} - {magenta:
  77. [Browsersync] [debug] +  Step Complete: Init user plugins
  78. [Browsersync] Proxying: http://node:3000
  79. [Browsersync] Access URLs:
  80.  ----------------------------------
  81.        Local: http://localhost:3000
  82.     External: http://node:3000
  83.  ----------------------------------
  84.           UI: http://localhost:3001
  85.  UI External: http://localhost:3001
  86.  ----------------------------------
  87. [Browsersync] Watching files...
  88. Sass is watching for changes. Press Ctrl-C to stop.
  90. [2023-07-23 16:30] Compiled src/scss/style.scss to dist/style.css.
  91. [Browsersync] File event [change] : dist/style.css
apache

1条答案

按热度按时间
k4aesqcs

k4aesqcs1#

Browsersync中的一些东西似乎与Node不兼容，因为我写了自己的Node服务器，它在第一次尝试时连接到同一个docker WordPress服务的同一个目标地址和端口。
我的服务器完全可以使用live reload和SSL（hat tip chatGPT），我不再需要Browsersync。如果其他人有兴趣学习如何做到这一点，这些是我使用的Node包。

  1. "devDependencies": {
  2.     "chokidar": "^3.5.3",
  3.     "express": "^4.18.2",
  4.     "http": "^0.0.1-security",
  5.     "http-proxy-middleware": "^2.0.6",
  6.     "https": "^1.0.0",
  7.     "socket.io": "^4.7.1",
  8.     "socket.io-client": "^4.7.2"
  9.   },

chokidar包用于监视文件的更改，socket.io包用于实时重新加载，其他包用于核心服务器，SSL，代理请求到Docker WordPress容器以及注入Socket.io所需的HTML。
在Apache虚拟主机中，代理地址指向Docker中的Node容器的名称和端口，其中我的Node容器名称为node，端口为3000。
还请注意upgrade=websocket指令。这是支持WebSocket的更新方法，是您所需要的全部，比不推荐的方法更容易使用WebSocket重写和路径重定向。

  1. <VirtualHost *:80>
  2.   ServerName mysite.localhost
  4.   # SSL redirection is in .htaccess
  6.   # Reverse proxy with websocket
  7.   ProxyPreserveHost On
  8.   ProxyPass / http://node:3000/ upgrade=websocket
  9.   ProxyPassReverse / http://node:3000/ upgrade=websocket
  10.   RequestHeader set X-Forwarded-Proto http
  11.   ProxyTimeout 60
  12. </VirtualHost>
  14. <VirtualHost *:443>
  15.   ServerName mysite.localhost
  17.   # Reverse proxy with websocket
  18.   ProxyPreserveHost On
  19.   ProxyPass / http://node:3000/ upgrade=websocket
  20.   ProxyPassReverse / http://node:3000/ upgrade=websocket
  21.   RequestHeader set X-Forwarded-Proto https
  22.   ProxyTimeout 60
  24.   # Enable SSL
  25.   SSLEngine on
  26.   SSLCertificateFile /etc/ssl/certs/myproject.localhost.pem
  27.   SSLCertificateKeyFile /etc/ssl/private/myproject.localhost-key.pem
  28. </VirtualHost>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com