0

Есть удаленная машина на которой находится Laravel приложение, на локальную машину я выкачал проект и синхронизировал его по SFTP.

Первый вопрос, это где нужно запускать Dev сборку Webpack (На локалке или на сервере) и как вообще правильнее? Если на локальной машине то как проксироваться к серверу c Backend.

Я без проблем смог сделать так, чтобы запуская сборку получить все прелести HMR, но в директории public/index.html, но я не понимаю как сделать так, чтобы webpack-dev-server работал с PHP, например myapp.com/tasks?

3
  • Dev - это там где разработка ведется. Prod - это там где юзеры пользуются плодами, разработки. В идеале, есть ещё Stage - это там где всё как в проде, но юзеры туда не допускаются, тестовый сервер, перед диплоем в прод. Когда всё готово рабочий код диплоится на прод (или если есть стейдж, то на стейдж).
    – Kosta B.
    20 июн 2018 в 16:39
  • Подскажи, ты используешь laravel mix или другой шаблон webpack?
    – MaxKut
    22 июн 2018 в 16:10
  • Долго боролся с голым конфигом вебпака, но всетаки настроил все через laravel-mix, все превосходно работает включая HMR)
    – Alex Prom
    23 июн 2018 в 17:46

1 ответ 1

0

Итак, в своем проекте я не использовал laravel-mix, т.к. мне нужна была бОльшая гибкость настройки самого webpack (Мне нужны были асинхронные компоненты Vue вместе с HMR, а асинхронные компоненты лучше использовать с родным webpack dev server вместо browserSync). Я также не являюсь гуру webpack.

webpack

Итак, webpack запускает свой сервер на localhost (на локальном компе)
В настройках webpack.config в объект devServer нужно добавить следующий middleware, который разрешает cors, т.к. к дев серверу будут кроссдоменные запросы (сервер на localhost, а проект на другом домене).

/**
 * https://webpack.js.org/configuration/dev-server/#devserver-before
 * @param app - Express app
 */
before: function(app) {
  // Добавляем промежуточный обработчик 
  // всех GET запросов к webpack devServer
  app.get("*",function (req, res, next) {
    // console.log(req.headers)
    res.set({
      'Access-Control-Allow-Origin': req.headers.origin,
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS'
    });
    next()
  })
},

А теперь объяснение. В связи с жесткой CORS политикой браузеров сервер, к которому браузер обращается с другого домена, должен прислать как минимум два заголовка:

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods

Причем недостаточно выдать заголовок Access-Control-Allow-Origin со значением * (все домены). Нужно отдать заголовок с конкретным доменом, Например, вы с домена http://example.com обращаетесь к http://localhost:8080, так сервер http://localhost:8080 должен в ответе отдать два вышеуказанных заголовка, причем заголовок Access-Control-Allow-Origin должен иметь значение http://example.com.
Также сделует помнить, что localhost у вас по http протоколу работает, поэтому, если собираетесь так вести разработку на https://example.com, то ничего не выйдет (опять же политика безопасности браузеров)

laravel

тут немного проще. В режиме разработки webpack сборку именует app.js (Опять же laravel mix не использовал, там не знаю тонкостей, возможно знающие дополнят ответ)
В шаблоне blade, который относится к нужному роуту, вывожу <script src="http://localhost:8080/app.js"></script> по условию наличия GET параметра debug вместо стандартных скриптов и стилей

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
    @if(!$isDev)
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    @endif
  </head>
  <body>
    <div id="app">
      <example></example>
    </div>
    @if(!$isDev)
    <script src="{{ mix('js/app.js') }}"></script>
    @else
    <script src="http://localhost:8080/app.js"></script>
    @endif
  </body>
</html>

Это все упрощенно, в реале моя конфигурация несколько сложнее

1
  • Спасибо за развернутый ответ!)))
    – Alex Prom
    26 июн 2018 в 9:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.