이야기

당신은 아주 좋은 응용 프로그램에 대한 생각을 가지고 있습니다. 당신과 좋은 반응 지식을 만들고 싶습니다. 그러면 당신은 무엇을 합니까?

npx create-react-app myApp
cd myApp
npm start

너는 가도 된다!로컬 환경에서 모든 것이 순조롭게 진행되고 있습니다. 멋진 사용자 인터페이스를 만드는 과정에서 어떤 것도 당신을 방해하지 않고 항상 React의 강력한 기능을 이용합니다.
시간의 추이에 따라 당신은 응용 프로그램을 완성했습니다. 물론 전 세계에 응용 프로그램을 보여주고 싶습니다.
아마도 당신은 아직 성숙한 생산 응용 프로그램과 한 분야, 모든 벨소리와 휘파람을 준비하지 못했을 것이다. 그러나 다른 사람에게만 보여주고 싶을 뿐이다.너는 그것을 온라인으로 하고 싶지만 그다지 번거롭지 않다.
그럼, 당신은 어떤 선택을 했습니까?
createreact 앱이 제공하는 응용 프로그램의 최적화 생산 버전을 만들기 위해 npm run build 을 실행할 때 터미널 창의 정보가 알려 줍니다.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

이것은 응용 프로그램을 시작하고 실행할 서버가 필요하다는 것을 의미합니다.
서버의 문제는 계산 능력이 돈을 써야 한다는 것이다. 어디에서든 무한히 무료라는 것을 발견할 수 있을 것이다. 게다가 아직 응용 프로그램에 비용을 지불할 준비가 되어 있지 않다는 것이다.이외에도 HTTP 서버를 설정하거나 도메인을 가져오는 것 자체가 도전입니다...
하지만 당신은 경험이 풍부한 베테랑입니다.React 응용 프로그램을 구축하면 응용 프로그램 실행에 필요한 모든 파일을 포함하는 폴더를 줄 수 있다는 것을 알고 있습니다.

클라우드 서비스

이것이 바로 이 수수께끼의 첫 번째 주요 부분이 해결된 곳이다...클라우드 컴퓨팅!
그러나 이것은 결코 이국적인 분위기가 아니다. 왜냐하면 내가 주로 이야기하는 것은 제공된 저장 솔루션, Azure Blob 저장과 Amazon s3 저장통이기 때문이다.
Azure와 AWS가 모두 스토리지 솔루션에 무료로 계층형 서비스를 제공하기 때문에 관리형 정적 웹 사이트를 선택할 수 있으며, 이러한 솔루션을 높은 부하/트래픽이 아닌 용례에서 사용할 경우 이러한 서비스에서 벗어날 수 없습니다.만약 네가 그들에게서 엄숙한 활동을 하려고 한다면, 반드시 그들의 정가표를 읽어야 한다.

AWS s3에서 react 응용 프로그램 만들기

현재, 나는 당신에게 s3bucket에 배치된 매우 기본적인createreact 응용 프로그램을 보여 드리겠습니다. 잠시 후, 나는 당신에게 어떻게 Azure에서 그것을 완성하는지 보여 드리겠습니다!AWS s3 버킷에 정적 사이트를 배치하는 유사한 강좌도 쉽게 찾을 수 있다.AWS s3 배포 튜토리얼을 더 원하신다면 아래에 설명합니다.
my really complex React app
기본createreact 프로그램 화면을 즉시 식별합니다.라우터와 링크가 있는 정보 페이지를 추가하여 왕복을 안내합니다.
우리의 프레젠테이션 프로그램은 리셋을 시도하거나 우리 홈페이지가 아닌 페이지에 직접 로그인할 때까지 잘 작동합니다.이것이 바로 상대적으로 심각한 응용 프로그램이 이런 방법을 사용하는 데 실패한 곳이다.
문제는 React 응용 프로그램이 색인이 하나만 있는 단일 페이지 응용 프로그램입니다.html, 이것은 js 파일을 실행하고 누가 그들의 마술을 하는지 우리의 응용 프로그램과 모든 아름다운 내용을 보충합니다.
/about
이 프로그램의 버킷을 보면 index.html 파일이 포함된'about'폴더가 없다는 것을 금방 깨닫게 될 것입니다. 그래서 우리는 당연히 404 오류를 얻었습니다.우리는 모든 데이터를 이 인덱스로 바꾸는 서버가 필요합니다.html과 안에 있는javascript는 우리의React 응용 프로그램을 시작하고 우리가 보고 싶은 내용을 찾아냅니다.

다음회사 명

이것이 바로 의 용무의 땅이다!
앞으로 무슨 일이 일어날지 모르면js네, 진지하게 찾아뵙고 연구를 해보겠습니다. 대단합니다!
다음은 못 줘요.이 일을 하는 것은 이미 충분히 공평하지만, 나는 이전에 들어보지 못한 어떤 사람을 위해 최선을 다해 총결할 것이다.
다음js는 React의 프레임워크입니다. 주로 서버 측의 실시간 렌더링을 제공합니다. 이것은 React의'확장'으로만 볼 수 있습니다. 왜냐하면 일반적인 js와 jsx만 작성하기 때문입니다. (ts/tsx도 지원합니다!)하지만 그뿐만이 아니야!다음js는 우리에게 이미 만들어진 공유기를 제공합니다. 이것은 파일 시스템을 루트로 사용하도록 강제합니다. 따라서 pages 폴더의 모든 파일은 일반적인 React 구성 요소이지만 루트이기도 합니다.
예를 들어 페이지 폴더에 구성 요소 (예: pages/about.js 를 만들면 /about 경로를 등록하여 이 파일로 이동합니다.
다음js는 또한 우리에게 추가 기능을 제공하여 서버 측의 데이터 획득을 돕는다. 이런 기능들은 곧 도움이 될 것이다.
너는 새로운 다음을 시작할 수 있다.js 프로젝트는react 프로그램을 만드는 것처럼 간단합니다.

npx create-next-app
# or
yarn create next-app

다음회사 명 프로젝트

작은 Next를 만들었습니다.나는 js 응용 프로그램 에 연결되어 칵테일을 추출하고 그것들을 열거하여 모든 칵테일의 상세한 페이지를 만들었다.이것은 이 항목의 링크입니다. 보실 수 있습니다
free cocktails API
계속하고 싶으시면 https://staticappdemo.z6.web.core.windows.net/ 를 제공해 드리겠습니다.
이어서 나는 이 점을 어떻게 하는지 설명하고 그 중의 몇 가지 함정을 지적할 것이다.그리고 Azure로 단계적으로 배치!
내 pages 폴더에 이런 구조가 있다는 것을 알게 될 것이다

+----_app.js
+----index.js
+----cocktails
|   +-- [id].js
|   +-- index.js

pages/cocktails/index.js제 /cocktails노선이고 pages/cocktails/[id].js다음 노선입니다.js가 동적 루트를 처리하는 방법입니다. 그래서 /cocktails/123abc 이 파일로 넘어갈 것입니다. 이 파일에서 123abc 을 id 로 제공할 것입니다.
다음부터.js는 우리에게 source code on github를 제공했다. 우리는 이 기능을 사용하여 구축할 때 칵테일을 얻고 모든 내용을 정적 페이지로 우리의 클라우드 저장 솔루션에 배치할 것이다.
우리가 해야 할 첫 번째 일은 다음 getStaticPaths 함수를 사용하는 것이다.js는 우리에게 우리가 구축할 때 어떤 루트를 만들어야 하는지 알려줄 수 있도록 제공했다.
저희 [id].js 파일에서 이 코드를 보실 수 있습니다.

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get cocktails
  const res = await fetch(
    "https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Alcoholic"
  );
  const parsedRes = await res.json();
  const cocktails = parsedRes.drinks.slice(0, 9);

  // Get the paths we want to pre-render based on cocktails
  const paths = cocktails.map((cocktail) => ({
    params: { id: cocktail.idDrink },
  }));

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false };
}

보시다시피 칵테일의 ID만 얻고 문서에 따라 다음 단계로 넘어가도록 비추겠습니다.js는 이것이 우리가 원하는 칵테일 노선 ID라는 것을 안다.
그 후에 너는 getStaticProps 이렇게 사용되는 것을 볼 수 있다

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the cocktail `id`.
  // If the route is like /cocktails/1, then params.id is 1
  const res = await fetch(
    `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${params.id}`
  );
  const cocktail = await res.json();

  // Pass cocktail data to the page via props
  return { props: { cocktail: cocktail.drinks[0] } };
}

우리는 id를 사용하여 단일 칵테일에 대한 상세한 정보를 얻고 이를 내부적으로 사용props에 전달한다.
다음js는 정적 HTML로 내보내려는 것을 알지 못하기 때문에 이 용례에서 원하는 것처럼 파일 구조를 만들지 않습니다.우리는 내부에 이 코드를 추가하여 신속하게 복구할 수 있다next.config.js

module.exports = {
  trailingSlash: process.env.NEXT_PUBLIC_ENV === "prod",
};

이것은 우리가 생산 구축을 할 때 사용하는 것을 알려준다trailingSlash.현재 .env.development 및 .env.production 개의 파일이 필요합니다.js는 생산이나 로컬 환경에서 사용하기 위해 응용 프로그램을 구축할 때 자동으로 식별됩니다.
응용 프로그램을 정적 HTML로 구축하기 위해 package.json 에 새 스크립트를 추가했습니다.

"build:static": "next build && next export"

실행 npm run build:static 은 out 폴더를 만들고, 우리의 모든 페이지는 자신의 id 폴더에 구축됩니다.만약 모든 것이 순조롭다면, 당신의 out 폴더는 다음과 같이 해야 합니다.
static HTML export

Azure에 배포

무료 Azure 계정을 만드는 것은 매우 쉬울 것입니다. Azure dashboard에서 맨 위의 검색 표시줄을 사용하여 Storage accounts 서비스를 찾습니다.입력 Storage accounts 하면 유사한 내용을 볼 수 있습니다

왼쪽 상단의 Create storage account 버튼 또는 Add 버튼을 클릭합니다.
새 자원 그룹을 만들어야 합니다. (이전에 그러지 않았다면) 마법사에서 이 작업을 쉽게 할 수 있습니다.이렇게 보여요.

스토리지 계정 이름을 입력하고 지리적으로 사용자(또는 사용자의 시청자)와 가장 가까운 위치를 선택합니다.

다른 모든 내용을 기본값으로 유지하고 Review + create 단추를 누르십시오.
배포에 약 1분 또는 그 이상의 시간이 소요되므로 이제 Storage accounts 대시보드에서 새 스토리지 계정을 볼 수 있어야 합니다.

새로 생성된 스토리지 계정을 클릭합니다.메뉴가 열립니다.아래로 스크롤하여 Static website 옵션을 찾습니다.를 활성화하고 index.html 로 인덱스 문서 이름을 채우고 404/index.html 으로 잘못된 문서 경로를 채웁니다.다음js는 기본 404 페이지를 제공합니다.저장 단추를 누르면 새로운 사이트 노드를 준비할 수 있습니다!그런 것 같아요.

메뉴를 Storage explorer (preview) 위로 스크롤하고 를 클릭하여 BLOB CONTAINERS 폴더를 엽니다. 그러면 $web 폴더가 표시됩니다.이것이 바로 당신이 구축한 응용 프로그램 파일의 위치입니다.

파일을 업로드하기 전에, 우리는blob 소유자로 추가해야 합니다. 그렇지 않으면 업로드가 실패합니다.이렇게 하려면 메뉴에서 Access Control (IAM) 옵션을 찾습니다.클릭Add role assignments.역할 선택Storage Blob Data Owner.Azure 계정과 연결된 전자 메일 주소의 User, group, or service principal 및 select 필드 유형에 액세스 권한을 할당합니다.그런 것 같아요.

다음으로 할 일은
완료되면 터미널에 들어가서 Azure에 로그인합니다

az login

Azure 계정에 로그인할 수 있는 새 브라우저 탭이 열립니다.
나중에 저장된 계정의 키를 찾아야 합니다.그걸 해야 돼요.

az storage account keys list --account-name 'mladenteststorage'

스토리지 계정 이름만 바꾸면 됩니다mladenteststorage.
다음과 같은 출력이 있어야 합니다.

az storage account keys list --account-name 'mladenteststorage'
[
  {
    "keyName": "key1",
    "permissions": "Full",
    "value": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  },
  {
    "keyName": "key2",
    "permissions": "Full",
    "value": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
]

"value"에서 꺼내기"key1"를 기록합니다.
마지막으로 모든 내용을blob 저장소에 업로드

az storage blob upload-batch -d '$web' -s 'C:\Users\mlst2502\...path-to-your-project\out' --account-name 'mladenteststorage' --account-key 'key-that-you-wrote-down-previously'

여기 있다!당신의 응용 프로그램은 당신의 저장 계정Static website 부분의 URL에 표시되어야 합니다!
끝까지 읽어주시면 관심 가져주셔서 감사합니다!나는 이것이 너에게 어떤 도움이 되기를 바란다. 만약 네가 이 화제에 대해 어떤 문제가 있다면, 평론 부분에서 나에게 물어보거나, install the Azure CLI for your OS에 열거된 나의 어떤 소셜네트워크서비스에서 나를 직접 찾아라.