Как развернуть приложение React на веб-сервере Apache
Я создал базовое приложение React по https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm здесь, я хочу запустить этот тестовый код на сервере на основе Apache, я знаю, что мне нужно создать распространяемую сборку, но я не мог понять, как это сделать, и не мог найти четких инструкций.
Я видел этот пост React, JS на сервере Apache, но он не имеет ничего, кроме нескольких рекомендаций
Если вы можете руководствоваться с некоторыми четкими указателями или инструкциями, я буду благодарен. PS Я знаю, как работает Apache, я разработчик PHP
11 ответов
В конечном итоге удалось выяснить это, я просто надеюсь, что это поможет кому-то, как я.
Ниже показано, как должен выглядеть файл конфигурации веб-пакета, проверьте указанный каталог dist и файл вывода. Мне не хватало способа указать путь к каталогу 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 или корневой директории веб-приложения и все.
Сначала перейдите в папку packages.json и поместите эту строку кода в соответствии с вашим реальным адресом домена:
"homepage": "https://yourwebsite.com/afolder/",
Во-вторых, перейдите к терминалу в папке вашего проекта и введите:
npm run build
Теперь вы увидите, что в структуре папок проекта есть папка сборки.
Только тот, который вы загружаете на свой сервер с помощью filezilla.
- Перейдите в корневой каталог вашего проекта cd example /home/ubuntu/react-js
- Создайте свой проект при первой сборке npm run
внимательно проверьте каталог сборки, все файлы будут доступны в папке сборки.
актив-manifest.json
favicon.ico
manifest.json
robots.txt
статические активы
index.html
preache-manifest.ddafca92870314adfea99542e1331500.js service-worker.js
4. скопируйте папку сборки на свой сервер apache, т.е. / var / www / html
sudo cp -rf build /var/www/html
перейти в каталог доступных сайтов
cd / etc / apache2 / sites-available /
открыть файл 000-default.conf
sudo vi 000-default.conf и измените путь DocumentRoot
Теперь перейдите к apache conf.
cd / etc / aapche2
sudo vi apache2.conf
добавить данный фрагмент
<Directory /var/www/html>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>сделать файл внутри / var / www / html / build
sudo vi.htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]9.sudo a2enmod переписать
10.sudo systemctl перезапуск apache2
перезапустить сервер Apache
sudo service apache2 перезапуск
спасибо, приятного тебе дня
Перед сборкой 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/ папку в каталог вашего сервера.
PS: метод относительного пути легко использовать, если вы хотите часто менять расположение файла сборки на вашем сервере.
Как сказано в сообщении, React - это браузерная технология. Он только отображает представление в HTML-документе.
Чтобы иметь доступ к вашему "приложению React", вам необходимо:
- Объедините свое приложение React в пакет
- Пусть Apache указывает на ваш html-файл на вашем сервере и разрешает внешний доступ.
У вас может быть вся информация здесь: https://httpd.apache.org/docs/trunk/getting-started.html для сервера Apache и здесь, чтобы сделать ваш комплект javascript https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
Вы можете запустить его через прокси-сервер Apache, но он должен будет работать в виртуальном каталоге (например, http://mysite.something/myreactapp).
Это может показаться излишним, но если у вас есть другие страницы, которые не являются частью вашего приложения React (например, страницы PHP), вы можете обслуживать все через порт 80 и сделать так, чтобы все это было единым веб-сайтом.
1.) Запустите приложение реагирования с помощью команды npm или любой другой команды, которую вы используете для запуска сервера узла. Предполагая, что он работает на 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
Как хорошо описано в официальных документах React, если вы используете маршрутизаторы, использующие HTML5pushState API истории под капотом, вам просто нужно ниже содержимого, чтобы .htaccess файл в public каталог вашего приложения-реакции.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
И при использовании относительного пути обновите package.json как это:
"homepage": ".",
Примечание. Если вы используетеreact-router@^4, вы можете получить root <Link> с использованием basename подпирать любой <Router>.
import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>
Сначала добавьте pom.xml и сделайте его проектом maven, а затем создайте его. Он создаст для вас файл войны в целевой папке, после чего вы сможете развернуть его где угодно.
pom.xmlhttp://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0 it.megadix create-react-app-servlet 0.0.1-SNAPSHOT war
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<npm.output.directory>build</npm.output.directory>
</properties>
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<!-- Standard plugin to generate WAR -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.1.1</version>
<configuration>
<webResources>
<resource>
<directory>${npm.output.directory}</directory>
</resource>
</webResources>
<webXml>${basedir}/web.xml</webXml>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.3.2</version>
<executions>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Default Lifecycle' -->
<execution>
<id>npm install (initialize)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>initialize</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Clean Lifecycle' -->
<execution>
<id>npm install (clean)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>pre-clean</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
the script name I used in my project, change this if yours is
different -->
<execution>
<id>npm run build (compile)</id>
<goals>
<goal>exec</goal>
</goals>
<phase>compile</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
</configuration>
</execution>
</executions>
<configuration>
<environmentVariables>
<CI>true</CI>
<!-- The following parameters create an NPM sandbox for CI -->
<NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
<NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
<NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>local</id>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://localhost:8080/${project.artifactId}</PUBLIC_URL>
<REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>prod</id>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<configuration>
<environmentVariables>
<PUBLIC_URL>http://my-awesome-production-host/${project.artifactId}</PUBLIC_URL>
<REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
</environmentVariables>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
Примечание. - Если после запуска проекта вы обнаружите пустую страницу, очистите кеш или перезапустите IDE.
Первая установка
apache2с
sudo apt install apache2затем запустите команду удара в каталоге проекта
npm run build
или же
yarn run build
тогда
sudo cp -rf build/* /var/www/html/mySite;
cd /etc/apache2/sites-available/;
sudo cp 000-default.conf mySite.conf;
sudo nano /mySite.conf
в этом файле добавьте/раскомментируйте эти строки
ServerName myDomin.com
ServerAlias www.myDomin.com
DocumentRoot /var/www/html/mySite
после настройки appache вы должны добавить свой домен в свою систему, чтобы
sudo nano /etc/hosts
в этом файле добавьте свой IP-адрес VPS, например, если ваш IP-адрес
192.168.1.1так
127.0.0.1 localhost myDomin.com
192.168.1.1 myDomin.com www.myDomin.com
теперь настройте свои серверы имен на своем VPS самостоятельно, если вы знаете, как это сделать, или просто используете cloudflare или подобные вещи.
примечание: если вы хотите использовать на локальном хосте, просто запустите это
cp build/* /var/www/html/ && sudo systemctl restart apache2
Лучший вариант — добавить прокси в/etc/apache2/sites-available/каталог, затем выполнитеsudo nano your-domain.confи добавьте прокси, а затем запустите с помощьюpm2 restart all.
Я надеюсь, что так может помочь в решении этой проблемы, кто и я есть. Комментарий передо мной является правильным, потому что получаю большую помощь, но в моем случае должно было быть немного иначе. Сначала я пишу в package.json следующий код "start": "set PORT=80&&react-scripts start", Потому что я использую Windows и Wampserver64 с Apache. Там я делаю виртуальный хост, и на этом виртуальном хосте экспортируется все, что у меня есть в приложении React, из папки build. Там это работает очень хорошо. А потом после дополнительных тестов я развернут с интернет-сервера. Если вы хотите, пожалуйста, посетите следующую ссылку http://miodragtrajanovic.com/, Это статический сайт, который я использую в своей работе Bootstrap и React