Команда create-react-app npm run build

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

Однако, когда я запускаю npm run build, процесс, как представляется, выполняется правильно (создает папку сборки, содержащую связанный файл js и файл index.html), но когда я открываю index.html в своем браузере, он ничего не делает, Что мне не хватает?

Кроме того: Я также попытался загрузить его на удаленный сервер, и когда я перешел к URL-адресу, браузер вернулся...

Запрещено: у вас нет разрешения на доступ к этому серверу.

... если кто-нибудь знает, как это решить, я бы тоже оценил это.

Ответ 1

Однако, когда я запускаю сборку npm run, процесс кажется выполненным правильно (создает папку сборки, содержащую связанный файл js и файл html.index), но когда я открываю index.html в моем браузере, он ничего не делает, Что мне не хватает?

При запуске npm run build он печатает соответствующие инструкции:

Вы можете просто открыть index.html, потому что он должен быть , обслуживаемый статическим файловым сервером.
Это связано с тем, что большинство приложений React используют маршрутизацию на стороне клиента, и вы не можете сделать это с помощью file:// URL-адресов.

В производстве вы можете использовать Nginx, Apache, Node (например, Express) или любой другой сервер для обслуживания статических активов. Просто убедитесь, что если вы используете маршрутизацию на стороне клиента, вы обслуживаете index.html для любого неизвестного запроса, например /*, а не только для /.

В разработке вы можете использовать pushstate-server для этого. Он хорошо работает с маршрутизацией на стороне клиента. Это именно то, что предлагают вам печатные инструкции.

Я также попытался загрузить его на удаленный сервер, и когда я перешел к URL-адресу, браузер вернулся с Forbidden: у вас нет разрешения на доступ к этому серверу.

Вам нужно загрузить содержимое папки build, а не папку build. В противном случае сервер не сможет найти ваш index.html, потому что он находится внутри build/index.html, и поэтому он терпит неудачу. Если ваш сервер не обнаруживает верхний уровень index.html, обратитесь к документации по серверам при настройке файлов, обслуживаемых по умолчанию.

Ответ 2

Здесь вы можете решить эту проблему двумя возможными способами.

1.Измените историю маршрутизации на "hashHistory" вместо имени браузера вместо

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

Теперь создайте приложение, используя команду

sudo npm run build

Затем поместите папку сборки в папку var/www/Now. Теперь приложение работает нормально с добавлением # тега в каждом URL-адресе. как

локальный/#/дома локальный /#/ABOUTUS

Решение 2: Без тега #, использующего browserHistory,

Задайте свою историю = {browserHistory} в своем маршрутизаторе, теперь создайте ее, используя sudo npm run build.

Вам нужно создать файл "conf", чтобы решить 404 не найденную страницу, файл conf должен быть таким.

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

cd/etc/apache2/sites-available Ls nano sample.conf Добавьте в него содержимое ниже.

 <VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Теперь вам нужно включить файл sample.conf, используя следующую команду

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

то он попросит вас перезагрузить сервер Apache, используя sudo service apache2 перезагрузите или перезапустите

затем откройте папку localhost/build и добавьте файл .htaccess с содержимым ниже.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Теперь приложение работает нормально.

Примечание: измените 0.0.0.0 ip на локальный IP-адрес.

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

Ответ 3

cd в вашу папку сборки,
python -m SimpleHTTPServer 8080 для запуска сервера через порт 8080,
перейдите по адресу localhost:8080/index.html в вашем браузере.

Ответ 4

Я попытался запустить ту же команду, и приложение-приложение также показало белый экран. Основной файл js принимал относительный путь к файлу и показывал ошибку при открытии js файла в новом браузере "Ваш файл не найден" Я делаю это до абсолютного пути и его работоспособности.

Ответ 5

Вы не можете запустить производственную сборку, нажав на index.html, вы должны изменить свой скрипт, как показано ниже.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

после запуска npm run-script build, запустите npm run-script deploy, вы получите что-то вроде этого, здесь вы можете загрузить свою производственную сборку.

npm install -g перед запуском npm run-script deploy.

Ответ 6

Расширение "Веб-сервер для Chrome" очень простое в использовании. Установите его и установите каталог ~/my-реагировать-приложение/сборка/

Ответ 7

После создания приложения через create-react-app создать-реагировать-приложение

Выполнить команду npm run build После этого выполнить команду npm install -g serve & наконец serve -s build

Более подробную информацию можно найти здесь: create-реагировать-приложение-развертывание

Ответ 8

открыть файл index.html. прокрутите ближе к концу, и вы увидите

<script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>

просто добавьте точку перед двумя атрибутами src:

<script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>

Кроме того, если у вас есть какие-либо стили, вы также должны прокрутить в начале, где вы увидите:

<link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

а также поместите точку перед атрибутом href

<link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

ПРИМЕЧАНИЕ: имя файла может/не будет одинаковым для вас

также обязательно измените это обратно при использовании сервера или просто запустите npm run build заново (я понятия не имею, что произойдет, если вы этого не сделаете)

Ответ 9

https://www.taniarascia.com/getting-started-with-react/ и финальный скрипт можно найти на GitHub.

npm run build → создаст папку, в которую будут включены index.html и статическая папка. При нажатии на index.html откроется новая вкладка браузера. Но это показывает только пустую страницу. Зачем? потому что ему нужен сервер, чтобы он работал.

Решение:

Переместите файл в другую папку. Откройте папку с помощью кода VC. Откройте файл index.html и щелкните правой кнопкой мыши → выберите: Открыть с помощью живого сервера. В вашем браузере открываются новые вкладки с соответствующим IP-адресом и портом.

Или вы можете запустить его на локальном хосте, используя xampp:

Откройте сервер XAMPP. Поместите это на localhost. И это должно работать.