create build-action-app npm run build command

У меня есть небольшое приложение React с create-react-app-app-, и он работает нормально с локального сервера после запуска npm start. До сих пор.create build-action-app npm run build command

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

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

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

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

источник

2016-09-30 Paulos3000

Вы видите какую-либо ошибку js в консоли браузера при загрузке страницы индекса? – vitomd

Используйте веб-пакет. Существует так много способов создать реактивное приложение. Webpack испускает файл пакета, который невидим, когда мы запускаем сервер webpack с помощью команды npm run start. Я не могу понять, почему вы создаете другой файл отдельно. В моем случае я только что создал файл index.html, файл index.js и другие js-файлы. Используется webpack для интеграции. –

@ Charan Cherry: Я уже использую webpack. create-react-app - это настроенная настройка веб-пакета. Командная строка 'npm run build' создает файл index.html, и соответствующий javascript все вставляется в один мини-js-файл, все помещенные в одну папку« build ». – Paulos3000

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

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

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

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

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

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

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

источник

2016-09-30 14:42:26

Хорошо, спасибо. Я слышал об Heroku - https: //blog.heroku.com/deploying-react-with-zero-configuration - я буду читать на нем, но является ли это одним из способов развертывания Live (не локального) приложения для реагирования на удаленном сервере? – Paulos3000

Да. Кроме того, вы можете скопировать папку сборки на любой удаленный сервер, к которому у вас есть доступ, и настроить любое статическое серверное программное обеспечение для его обслуживания. –

Работает для меня! Краткий ответ: доверяйте инструкциям, которые вы видите из 'npm run build'. – HoldOffHunger

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

1.Change история маршрутизации «hashHistory» вместо browserHistory в месте

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

Теперь построить приложение с помощью команды

sudo npm run build

Затем поместите папку сборки в вашей вар/www/folder, теперь приложение отлично работает с добавлением # тега в каждом URL-адресе. как

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

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

Установите историю = {browserHistory} в вашем маршрутизаторе, сейчас построить его с помощью Суд НПМ запустить сборку.

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

открыть свой тип терминала ниже команды

кд/и т.д./apache2/сайты-доступные Ls нано 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 службы 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-адрес.

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

источник

2017-02-01 12:06:01

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

источник

2017-06-21 08:47:10

ответ

Смежные вопросы