클라이언트 측 렌더링 된 Create-React-App을 Microsoft Azure에 배포합니다

REACT 응용 프로그램을 Microsoft Azure에 배포하는 것은 간단 해 보이지만 숨겨진 복잡성이 존재합니다. 이 안내서는 클라이언트-서버 라우팅 충돌을 최소화하기 위해 Create-React-App (또는 Pushstate Routing을 사용한 유사한 프론트 엔드 프레임 워크)를 배포하는 데 중점을 둡니다.

간단한 일화는 도전 과제를 보여줍니다. 반응 프론트 엔드 및 ASP.NET 코어 백엔드가 Azure에 별도로 배포 된 이전 프로젝트에서는 페이지 새로 고침이 오해로 인해 404 개의 오류가 발생했습니다. 이로 인해 클라이언트 측 라우팅을 처리하기 위해 적절한 서버 측 구성의 필요성이 강조되었습니다.

생산 준비 반응 빌드

생산을위한 React 앱 ( npm run build 사용)을 위해 정적 자산을 포함하는 최적화 된 build 폴더가 생성됩니다. 이 폴더를 서버에 배포하면 라이브 응용 프로그램에 충분합니다. 구조는 일반적으로 다음과 비슷합니다.

 <code>→ build → static → css → css files → js → js files → media → media files → index.html → other files...</code>

React 라우터를 사용한 클라이언트 측 라우팅

반응 라우터는 HTML5 Pushstate API를 활용합니다. PushState는 전체 페이지로로드하지 않고 URL을 업데이트하여 클라이언트 측 라우팅을 가능하게합니다. 그러나 이것은 서버에 배포 할 때 과제를 제시합니다. 표준 서버는 URL 경로와 일치하는 파일을 찾을 것으로 기대합니다. 클라이언트 측 라우팅의 경우 그렇지 않습니다. 서버는 모든 경로에 대해 index.html 제공하도록 구성되어야합니다.

예를 들어 Express.js에는 다음이 구성이 필요합니다.

 app.get ( '*', (req, res) => {
  res.sendfile (path.resolve (__ dirname, 'client', 'build', 'index.html'));
});

이것은 React 앱이 서버 루트에서 호스팅된다고 가정합니다. 별도의 프론트 엔드 및 백엔드 프로젝트의 경우이 접근 방식은 문제가됩니다. 정적 앱을 배포하기 때문에 백엔드가 엄격히 필요하지 않습니다.

Azure 앱 서비스 배포

Azure에 배포하려면 :

1. Azure Portal에서 새로운 앱 서비스를 만듭니다.
2. 배치 센터로 이동하십시오. 우리는 Kudu와 함께 로컬 git을 빌드 제공 업체로 사용할 것입니다.
3. Azure는 git 원격 URL을 제공합니다. 로컬로 복제하십시오.
4. React App ( npm run build )을 구축 한 후 build 폴더에서 GIT 저장소를 초기화하고 변경 사항을 커밋 한 다음 Azure 리모컨으로 밀어 넣으십시오.

결정적으로 package.json 이 Azure 용 지원되는 Node.js 버전을 지정하십시오 ( az webapp list-runtimes 사용하여 사용 가능한 버전을 확인). "engines": {"node": "10.0"} 과 같은 선을 추가하십시오.

404 오류로 인해 페이지 새로 고침에서 초기 배포가 실패 할 수 있습니다.

Azure에서 클라이언트-서버 라우팅을 조정합니다

이를 해결하려면 web.config 파일을 build 폴더에 추가하십시오.

  xml 버전 = "1.0"?>
<configuration>
  <system.webserver>
    <rewrite>
      <rules>
        <rule name="React Routes" stopprocessing="true">
          <match url=".*"></match>
          <conditions logicalgrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"></add>
            <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"></add>
            <add input="{REQUEST_URI}" negate="true" pattern="^/(api)"></add>
          </conditions>
          <action type="Rewrite" url="/"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webserver>
</configuration>

재건 및 재배치. 응용 프로그램은 이제 올바르게 작동해야합니다. 지속적인 배포를 위해 Azure의 지속적인 통합/연속 배포 (CI/CD) 기능을 탐색하십시오.

결론

Azure는 React Applications를 배포하기위한 강력한 기능을 제공합니다. 클라이언트-서버 라우팅 상호 작용을 이해하는 것은 성공적인 배포의 핵심입니다. Kudu, Node.js 배포 및 Azure의 정적 사이트 배포의 추가 리소스는 더 깊은 이해를 위해 권장됩니다.

위 내용은 클라이언트 측 렌더링 된 Create-React-App을 Microsoft Azure에 배포합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!