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

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

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

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

18
apache javascript reactjs

5 ответов

в конечном итоге удалось выяснить это , я надеюсь, это поможет кому-то вроде меня.
Ниже показано, как должен выглядеть файл конфигурации web pack проверьте указанный 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 file 

{
  "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"
  }
}

обратите внимание на раздел сценария и производства, производственного участка, что дает вам окончательный индекс развертывания.JS файл ( имя может быть любым )

Rest fot вещи будут зависеть от вашего кода и компонентов

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

установка npm

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

затем

НПМ запустить производство

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

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

20

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

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

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

npm run build

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

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

6

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

чтобы иметь доступ к вашему "React App", вам нужно:

  1. Bundle ваше приложение React в комплекте
  2. имейте Apache, указывающий на ваш html-файл на вашем сервере и разрешающий доступ извне.

вы можете иметь всю информацию здесь: https://httpd.apache.org/docs/trunk/getting-started.html для сервер Apache, и здесь, чтобы сделать ваш JavaScript bundle https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

5

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

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

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

2.) Изменения httpd-прокси.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

2

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

-2