IT

서브디렉토리에서 앱을 처리하도록 create-react-app을 설정하려면 어떻게 해야 합니까?

itgroup 2023. 2. 10. 21:45
반응형

서브디렉토리에서 앱을 처리하도록 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>/소스


쇼트 버전

  1. 해 주세요.PUBLIC_URL.env를 합니다./subdir 변수..env.production(파일이 없는 경우 문서를 확인할 수 있습니다.)
  2. »public/index.html아래에 기본 요소를 추가합니다. 이것은 이미지와 같은 정적 파일에 대한 것입니다.
<base href="%PUBLIC_URL%/">
  1. 도도에도 .public/index.html 「」가 link가 붙는 을 확인합니다.%PUBLIC_URL% 것)manifest.json ★★★★★★★★★★★★★★★★★」favicon.icohref)
  2. 「 」를 사용하고 BrowserRouter , 을 붙일 수 .basename 품::
<BrowserRouter basename={process.env.PUBLIC_URL} />
  1. 「 」를 사용하고 Router "에 할 필요가 에, 「」에 액세스 할 필요가 있습니다.history.pushmethod를페이지를 방식으로 할 수
// 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>
  1. 요소 내부의 상대 링크 사용
<!-- "./assets/quotes.png" is also ok, but "/assets/quotes.png" is not -->
<img src="assets/quotes.png" alt="" />
  1. 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_URLhomepagepackage.jsongitlab의 .gitlab을 env로 때문입니다."CHANGE: "CHANGE:

PUBLIC_URL로 하다homepage , , , , 입니다.PUBLIC_URL도메인 이름을 지정하는 경우는, 도메인 이름도 취득합니다." " 만을 homepage,PUBLIC_URLhomepage.


는 알 수), 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>.

여기서부터 CRA의 공식 문서도 체크합니다.

상대 URL을 얻으려면 다음과 같이 앱을 빌드할 수 있습니다.

PUBLIC_URL="." npm run build

꾸러미로 만들다json은 다음과 같습니다.

"filename" : "filename://localhost:3000/filenameer",

퍼블릭 서버나 로컬 서버에서도 정상적으로 동작합니다.물론 하위 폴더는 사용자의 폴더여야 합니다.

react-router및 그 친척 basename하위 디렉토리에서 앱을 서비스할 수 있는 매개 변수입니다.

basenameURL 을 사용합니다.앱이 서버의 하위 디렉토리에서 제공되는 경우 하위 디렉토리로 설정할 수 있습니다.올바른 형식의 기본 이름에는 선행 슬래시가 있어야 하지만 후행 슬래시는 없어야 합니다.

예:

<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

반응형