Как заменить% PUBLIC_URL% в приложении React на лазурном веб-сайте
У меня есть приложение для реагирования, которое отлично работает локально, когда я развертываю его в Azure, у меня появляется несколько ошибок 404 в index.html.
Все с тегом% PUBLIC_URL%
Согласно документации, они будут заменены в процессе сборки, но не знаю, как это делается, чтобы при развертывании правильные URL-адреса были помещены на место.
<!doctype html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name = "theme-color" content = "#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "%PUBLIC_URL%/favicon.png">
<link href = "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel = "stylesheet" async>
<link async rel = "stylesheet" href = "%PUBLIC_URL%/css/ionicons.min.css">
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/style.min.css">
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css"
integrity = "sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ= = "
crossorigin = "" async/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Isomorphic</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id = "root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
У меня есть CI / CD, когда что-то фиксируется в репозитории vsts git, запускается сборка и развертывание, позвольте мне отправить вам несколько снимков экрана
не уверен, поможет ли этот снимок экрана. screencast.com/t/y279smspa
тогда конвейер развертывания действительно прост: screencast.com/t/033U0cZHm
Ответы 2
Это похоже на индексный файл, взятый из public вместо build.
Как сказано в документации, %PUBLIC_URL% заменяется при сборке проекта.
Предполагая, что вы использовали create-react-app, убедитесь, что вы используете npm run build и размещаете файлы из каталога build.
большие вопросы, заменяется ли это чем? есть ли где-нибудь файл параметров, куда я должен поместить этот общедоступный URL-адрес?
есть свойство homepage, которое вы можете установить внутри package.json, которое указывает, где размещается приложение для реагирования. Если это свойство не установлено, команда сборки предполагает, что приложение размещено в корневом каталоге. Если он установлен и содержит путь после домена, команда сборки заменяет %PUBLIC_URL% на путь. пример: если я установил "homepage": "http://example.com/reactapp/", то %PUBLIC_URL% заменяется на /reactapp, но если "homepage": "http://example.com/"%PUBLIC_URL% просто заменяется пустой строкой.
Я проверил развернутые файлы. а в index.html% PUBLIC_URL% заменяется пустым, поэтому все должно быть в порядке, если вы проверите скриншоты выше для моего конвейера сборки, я копирую каталог сборки
@LuisValencia, где вы используете npm run build? CI использует скрипт или это просто графический интерфейс?
Я не слишком знаком с Azure, пробовали ли вы использовать задачу «Развертывание службы приложений Azure»? Вы должны иметь возможность обновить значение пакета или папки на этом до $(System.DefaultWorkingDirectory)/build.
Я почувствовал себя очень глупо, когда нашел этот ответ, но вы избавили меня от серьезной головной боли, так что спасибо!
КАК ЗАМЕНИТЬ% PUBLIC_URL%
По умолчанию Create React App создает сборку, если ваше приложение размещено в корне сервера. example.com
Если ваш веб-сайт обслуживается не из этого корня (возможно, вы хотите обслуживать его из example.com/relativepath, вы можете переопределить это, указав домашнюю страницу в своем package.json).
"homepage": "http://example.com/relativepath",
Это позволит Create React App правильно определить корневой путь для использования в сгенерированном HTML-файле.
Однако в вашем случае, я думаю, вы получаете ошибку 404, потому что Azure пытается найти index.html (или какой-либо другой index. * С именем). Чтобы исправить это, Azure необходимо знать, как передать предполагаемый маршрут единственному файлу index.html, размещенному в корне сайта. Создайте новый файл с именем web.config внутри папки /site/wwwroot со следующим содержимым:
<?xml version = "1.0" encoding = "UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name = "React Routes" stopProcessing = "true">
<match url = ".*" />
<conditions logicalGrouping = "MatchAll">
<add input = "{REQUEST_FILENAME}" matchType = "IsFile" negate = "true" />
<add input = "{REQUEST_FILENAME}" matchType = "IsDirectory" negate = "true" />
<add input = "{REQUEST_URI}" pattern = "^/(api)" negate = "true" />
</conditions>
<action type = "Rewrite" url = "/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Это скажет Azure переписать все URL-адреса, как если бы они указывали на наш корневой файл, и наше приложение SPA сможет правильно обрабатывать ссылки.
Использованная литература:
https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Я надеюсь это поможет тебе
%PUBLIC_URL%будет заменен фактическим значением в сборке, как вы сказали. Вы уверены, что развертываете файлindex.htmlиз каталогаbuild, а не из каталогаpublic?