Как развернуть приложение React на веб-сервере Apache

Я создал базовое приложение React по адресу https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm здесь, я хочу запустить этот тестовый код на сервере на основе Apache, я знаю, что мне нужно создать распространяемую сборку, но я не мог понять, как это сделать, и не мог найти четких инструкций.

Я видел этот пост React, JS на сервере Apache, но он не имеет ничего, кроме нескольких рекомендаций

Если вы можете руководствоваться с некоторыми четкими указателями или инструкциями, я буду благодарен. PS Я знаю, как работает Apache, я разработчик PHP

Ответы

Ответ 1

В конечном итоге удалось выяснить это, я просто надеюсь, что это поможет кому-то, как я.
Ниже показано, как должен выглядеть файл конфигурации веб-пакета, проверьте указанные каталоги dist и dir. Мне не хватало способа указать путь к каталогу dist

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

Тогда пакет json файл

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

Обратите внимание на раздел сценария и раздел производства, раздел производства - это то, что дает вам окончательный развертываемый файл index.js (имя может быть любым)

Отдых для вещей будет зависеть от вашего кода и компонентов

Выполните следующую последовательность команд

установка npm

это должно получить вам все зависимости (узловые модули)

затем

нпм запустить производство

это должно привести к окончательному файлу index.js который будет содержать весь связанный код

После этого поместите файлы index.html и index.js в www/html или корневой каталог веб-приложения и все.

Ответ 2

Сначала перейдите в папку packages.json и поместите эту строку кода в соответствие с вашим реальным адресом домена:

"homepage": "https://yourwebsite.com/afolder/",

Во-вторых, перейдите к терминалу в папке проекта и введите:

npm run build

теперь вы увидите, что в структурах папок проекта есть папка build.

Только тот, который вы загружаете на свой сервер с помощью filezilla.

Ответ 3

Как сказано в сообщении, React - это браузерная технология. Он только отображает представление в HTML-документе.

Чтобы иметь доступ к вашему "приложению React", вам необходимо:

Объедините свое приложение React в пакет
Пусть Apache указывает на ваш HTML файл на вашем сервере и разрешает внешний доступ.

У вас может быть вся информация здесь: https://httpd.apache.org/docs/trunk/getting-started.html для сервера Apache и здесь, чтобы сделать ваш комплект javascript https://www.codementor.io/tamizhvendan./начинающий гид-настройка-reactjs-среда-NPM-Бабель-6-WebPack-du107r9zr

Ответ 4

Вы можете запустить его через прокси-сервер Apache, но его нужно будет запускать в виртуальном каталоге (например, http://mysite.something/myreactapp).

Это может показаться излишним, но если у вас есть другие страницы, которые не являются частью вашего приложения React (например, страницы PHP), вы можете обслуживать все через порт 80 и заставлять его говорить, что все это сплоченный веб-сайт.

1.) Запустите приложение для реагирования с запуском npm или любую другую команду, которую вы используете для запуска сервера node. Предполагая, что он работает на http://127.0.0.1:8080

2.) Отредактируйте httpd-proxy.conf и добавьте:

ProxyRequests On
ProxyVia On
<Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

ProxyPass /myreactapp http://127.0.0.1:8080/
ProxyPassReverse /myreactapp  http://127.0.0.1:8080/

3.) Перезапустите Apache

Ответ 5

Перед сборкой npm,
1) Перейдите в корневую папку вашего проекта React и откройте package.json.
2) Добавьте атрибут "homepage" в package.json

если вы хотите указать абсолютный путь

"homepage": "http://hostName.com/appLocation",
"name": "react-app",
"version": "1.1.0",

если вы хотите указать относительный путь
```
"homepage": "./",
"name": "react-app",
```
Использование метода относительного пути может предупредить ошибку проверки синтаксиса в вашей IDE. Но сборка производится без ошибок при компиляции.

3) Сохраните package.json, и в терминале запустите npm run-script build
4) Скопируйте содержимое build/ folder в каталог вашего сервера.

PS: метод относительного пути легко использовать, если вы хотите часто менять расположение файла сборки на вашем сервере.

Ответ 6

Я надеюсь, что так может помочь в решении этой проблемы, кто и я есть. Комментарий передо мной правильный, потому что получаю большую помощь, но в моем случае должно было быть немного по-другому. Сначала я пишу в package.json следующий код "start": "set PORT=80&&react-scripts start". Потому что я использую Windows и Wampserver64 с Apache. Там я делаю виртуальный хост, и на этот виртуальный хост экспортируется все, что у меня есть в приложении React, из папки build dist. Там это работает очень хорошо. А потом после дополнительных тестов я развернут с интернет-сервера. Если вы хотите, пожалуйста, посетите следующую ссылку http://miodragtrajanovic.com/. Это статический сайт, который я использую в своей работе Bootstrap и React.