서브디렉토리에서 앱을 처리하도록 create-react-app을 설정하려면 어떻게 해야 합니까?
서버에 기존의 웹 어플리케이션을 렌더링하고 있습니다.React에서 관리 패널을 한 페이지 어플리케이션으로 만들고 싶습니다.https://smyapp.example.com/admin/의 서버 관리 패널을 원합니다.사용하려고 합니다.create-react-app
, 로 하고 있습니다.「 」의 설정 create-react-app
을 "admin"
서브디렉토리?문서에서는 다음과 같은 사실을 발견했습니다."homepage"
속성을 올바르게 이해하려면 완전한 URL이 필요합니다.앱이 몇 가지 환경에 배포되어 있기 때문에 완전한 URL을 제공할 수 없습니다.
당신의 요구 사항에 덧붙여, 저는 제 것을 추가합니다.
- CD나 env 변수를 사용하여 수행해야 합니다.
- 서브디렉토리의 이름을 변경해야 할 경우 env 변수만 변경하면 됩니다.
- 리액트 라우터와 함께 작동해야 합니다.
- scss(sass) 및 html에서 동작합니다.
- 모든 것이 dev 모드에서 정상적으로 동작합니다(npm start).
, , 이 더 어려웠습니다.Resact 하다 Angular2+로 하다.ng build --base-href /<project_name>/
소스
쇼트 버전
- 해 주세요.
PUBLIC_URL
.env를 합니다./subdir
도 이 변수에 수 ..env.production
(파일이 없는 경우 문서를 확인할 수 있습니다.) - »
public/index.html
아래에 기본 요소를 추가합니다. 이것은 이미지와 같은 정적 파일에 대한 것입니다.
<base href="%PUBLIC_URL%/">
- 도도에도 .
public/index.html
「」가link
가 붙는 을 확인합니다.%PUBLIC_URL%
것)manifest.json
★★★★★★★★★★★★★★★★★」favicon.ico
href) - 「 」를 사용하고
BrowserRouter
, 을 붙일 수 .basename
품::
<BrowserRouter basename={process.env.PUBLIC_URL} />
- 「 」를 사용하고
Router
"에 할 필요가 에, 「」에 액세스 할 필요가 있습니다.history.push
method를페이지를 방식으로 할 수
// history.tsx
import {createBrowserHistory} from 'history';
export default createBrowserHistory({ basename: process.env.PUBLIC_URL });
<!-- Where your router is, for me, App.tsx -->
<Router history={history}>
...
</Router>
- 요소 내부의 상대 링크 사용
<!-- "./assets/quotes.png" is also ok, but "/assets/quotes.png" is not -->
<img src="assets/quotes.png" alt="" />
background-image
파일로의 파일을 사용하는 이 수 ) : sssssjx/tsx 파일css "는 jsx/tsx 파일 사용 시 필요 .
/*remove that*/
background-image: url('/assets/background-form.jpg');
<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
...
넌 끝났어야 했어.
추가 정보
사용하는 것을 선호합니다.PUBLIC_URL
homepage
package.json
gitlab의 .gitlab을 env로 때문입니다."CHANGE: "CHANGE:
- https://create-create-contrace-app.dev/dev/deployment/#building-for-contrace-
- https://create-create-contrace-app.dev/contrace/advanced-configuration/
- https://github.com/facebook/create-react-app/issues/998
PUBLIC_URL
로 하다homepage
, , , , 입니다.PUBLIC_URL
도메인 이름을 지정하는 경우는, 도메인 이름도 취득합니다." " 만을 homepage
,PUBLIC_URL
homepage
.
는 알 수), index.html base를 .process.env.PUBLIC_URL
모든 링크에 접속할 수 있습니다.요소를 리액트라우터를 하지 않은 경우 해 주십시오.basename
소품, 당신은 경고를 받을 것입니다.
Sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass sass 。 ,, 한, 에, 에, 에, ,, your, your, your, your, your, your, your, your, your, your, your, your, your, your, your에 대한 올바른 상대 경로로는 컴파일되지 .../public/assets
「」의 로, 「」의ModuleScopePlugin
제한사항, src 폴더 내에서 이미지를 이동하면 제한을 피할 수 있습니다.저는 아직 시도하지 않았습니다.
개발 모드(npm 시작)에서는 상대 경로를 테스트할 방법이 없는 것 같습니다.코멘트를 참조하다
Finnaly, 이 stackoverflow 링크에 관련된 문제가 있습니다.
create-react-app v2 및 react-router v4의 경우 다음 콤보를 사용하여 "/app" 아래에 프로덕션(스테이징, uat 등) 앱을 제공했습니다.
패키지.json:
"homepage": "/app"
그런 다음 앱 진입점에서 다음을 수행합니다.
<BrowserRouter basename={process.env.PUBLIC_URL}>
{/* other components */}
</BrowserRouter>
로컬 개발 환경과 도입 환경 모두에서 모든 것이 "그냥" 작동합니다.HTH!
하다에는 꼭 넣어야 요.package.json
이걸 위해서.
패키지에 키 "홈페이지" "하위 폴더/"를 추가합니다.json 모든 정적 파일이 "하위 폴더"에서 로드됩니다.
해야 할 하거나 "./"가 있는 행."homepage": "xxxxxxxxxx"
"homepage": "./"
공식 문서에서
기본적으로 Create React App은 앱이 서버 루트에서 호스팅된다고 가정하여 빌드를 생성합니다.이것을 무효로 하려면 , 패키지에 홈페이지를 지정합니다.예를 들어 다음과 같습니다.
"http://mywebsite.com/relativepath",
주의: 를 사용하고 있는 경우react-router@^4
, , , , , , 을 할 수 .<Link>
합니다.<Router>
.
상대 URL을 얻으려면 다음과 같이 앱을 빌드할 수 있습니다.
PUBLIC_URL="." npm run build
꾸러미로 만들다json은 다음과 같습니다.
"filename" : "filename://localhost:3000/filenameer",
퍼블릭 서버나 로컬 서버에서도 정상적으로 동작합니다.물론 하위 폴더는 사용자의 폴더여야 합니다.
react-router
및 그 친척 basename
하위 디렉토리에서 앱을 서비스할 수 있는 매개 변수입니다.
basename
URL 을 사용합니다.앱이 서버의 하위 디렉토리에서 제공되는 경우 하위 디렉토리로 설정할 수 있습니다.올바른 형식의 기본 이름에는 선행 슬래시가 있어야 하지만 후행 슬래시는 없어야 합니다.
예:
<BrowserRouter basename="/calendar"/>
★★★★★★★★★★★★★★★★★.<Link to="/today"/>
제공하다<a href="/calendar/today">
참조: https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string
이 경우, Ambroise의 답변에 기재된 대로 모든 작업을 수행했지만, 실제 가동 중에 오류나 경고 없이 빈 페이지가 콘솔에 표시되었습니다.이것은 Browser Router의 문제로 판명되었습니다.Browser Router의 기본 이름을 다음과 같이 설정함으로써 동작하게 되었습니다.
<BrowserRouter basename="/our_subfolder/" />
리액트 루트베이스 패스를 사용하여 웹 팩Configuration에서 퍼블릭패스를 지정할 수 있습니다.
퍼블릭 패스 링크:https://webpack.js.org/guides/public-path/
퍼블릭 패스는 유효하게 하기 위해서 선행 슬래시와 후행 슬래시 양쪽이 됩니다.
언급URL : https://stackoverflow.com/questions/49429906/how-should-i-configure-create-react-app-to-serve-app-from-subdirectory
'IT' 카테고리의 다른 글
PHP 실행 경로에서 오류를 반환합니다.에이잭스? (0) | 2023.02.14 |
---|---|
관리 페이지에서 페이지에 사용되는 Wordpress 템플릿 확인 (0) | 2023.02.10 |
ORA-01843은 유효한 달이 아닙니다.비교일 (0) | 2023.02.10 |
Oracle에서 테이블, 뷰 및 동의어에 대한 모든 인덱스와 해당 열을 찾는 방법 (0) | 2023.02.10 |
Json 결과가 객체인지 어레이인지 확인합니다. (0) | 2023.02.10 |