Использование сервера Webpack dev с приложением PHP

Ответ 1

- Новый ответ -

С тех пор как я впервые ответил на этот вопрос, я начал использовать другое решение.

С новым решением вы отправляете запросы непосредственно на веб-сервер nginx/apache. Веб-сервер работает как прокси-сервер и перенаправляет запросы либо на webpack-dev-server, либо на приложение php. Приложение php раскрывает все свои конечные точки в /api/<actual/endpoint> (см. непроверенные примеры конфигураций ниже, где localhost:8080 относится к webpack-dev-server).

Конфигурация Apache (http://php-application относится к отдельному VirtualHost, здесь не показан)

<VirtualHost *:80>
    ServerName my-website.dev

    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/

    ProxyPassMatch ^\/api\/.+$ http://php-application/
    ProxyPassReverse / http://php-application/
</VirtualHost>

Конфигурация Nginx (PHP7.1)

server {
    listen 80;
    server_name my-website.dev;

    root /path/to/backend/public;
    index index.php index.html;

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://localhost:8080;
    }

    location ~ ^/api/.+$ {
        try_files /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.1-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

- Старый ответ -

Я знаю, что вы заставили это работать, но я наткнулся на этот пост, когда сам столкнулся с этой проблемой и после ее решения хотел поделиться своим решением.

Я не использую Laravel, но у меня есть серверная часть PHP на сервере Apache. Мне только нужно было внести два изменения в webpack.config.js, чтобы заставить работать сервер разработки webpack:

Изменить это

publicPath: __dirname + '<path_to_bundle>'

Для этого (примечание: http://localhost:8080 - это URL-адрес webpack-dev-server)

publicPath: "http://localhost:8080/<path_to_bundle>/"

И добавьте некоторые настройки прокси для пересылки запросов в бэкэнд php

devServer: {
    proxy: [
        {
            path: /./,
            target: "http://<php_backend_url>"
        }
    ]
}

Обратите внимание, что свойство path является регулярным выражением, которое соответствует всему. Это приведет к тому, что все запросы будут перенаправлены на сервер php. Возможно, вам придется изменить регулярное выражение, если вы хотите, чтобы интерфейс обрабатывал некоторые запросы.

В документации сервера webpack также говорится, что вы должны изменить атрибут src тегов скрипта на http://localhost:8080/<path_to_bundle>/<bundleFilename.js>, но это необходимо только для меня, если я хочу получить доступ к приложению из его старого (apache) URL вместо localhost: 8080 когда используя флаг --inline.

Чтобы заставить горячую замену модуля работать с реагировать:

• Установите реагирующий горячий загрузчик: npm install --save-dev react-hot-loader

• Добавьте загрузчик в ваш webpack.config.js вместе с другими вашими загрузчиками как react-hot

Теперь все, что вам нужно сделать, это запустить webpack-dev-server --inline --hot и, надеюсь, вы золотые.

Ответ 2

У меня была похожая проблема: В моем desctop у меня есть PHP-сервер, работающий с Open Server, а также приложение Webpack Vue. Я хотел получить доступ к API с помощью AJAX из моего приложения Vue. Так что мое решение:

Создайте локальный домен (мне не нравится "localhost", поэтому я создал loc-team.test) с открытым сервером (вы можете использовать XAMPP или, например,). Теперь у меня есть доступ к http://loc-team.test/ajax.php из браузера, но у меня нет доступа AJAX к этому URL с моего сервера разработки Webpack (http://loc-team.test:8081) из-за Access-Control-Allow-Origin/CORS.

Добавить прокси-сервер к вашему devServer В настройках dev для веб-пакета добавьте этот реквизит:

devServer: {
  contentBase: 'dist_folder',
  host: 'loc-team.test',
  port: 8081,
  overlay:{
    warnings: true,
    errors: true,
  },
  proxy: {
    '/api': {
      target: 'http://loc-team.test',
      pathRewrite: {'^/api' : ''}
    }
  },
}

Так что в моем приложении Vue я могу сделать AJAX-запрос к loc-team.test/api/ajax.php, и из-за pathRewrite я получу ответ от loc-team.test/ajax.php. Также у меня нет проблем с сессиями.

Узнайте больше о прокси на webpack.js.org