+ React를 사용하여 Azure Static Web Apps로 재고 관리 앱 빌드, 1부

이것은 #30DaysOfSWA의 일부입니다.

In this series, I'll take you from the very beginning on generating a React app and deploying it within 5 minutes. In the upcoming parts, I'll keep building on the same app, and add things like backend and other things.

대본

귀하는 새로운 재고 관리 시스템의 프로토타이핑을 검토하고 있습니다. 테스트하고 싶은 것이 두 가지 있습니다.

React, 클라이언트와 같은 경험을 원하고 많은 회사에서 React를 사용하고 있다고 들었습니다.

Azure Static Web Apps Azure에는 정적 파일을 저장할 수 있을 뿐만 아니라 백엔드 및 인증을 추가할 수 있는 서비스가 있습니다.

평가할 시간입니다.

반응 앱 만들기

프런트엔드 앱을 구축하려면 빠르게 시작하고 실행해야 합니다. 읽기 시작하고 시작하는 방법이 많다는 것을 깨닫습니다.

그냥 CDN, 이것은 당신이 그것을 시도하고 싶을 때 작동합니다. 계속해서 구축할 수 있는 무언가를 원합니다.

Create React App은 확실히 좋은 선택이며 공식 React 문서에도 언급되어 있습니다.

초대합니다. https://vitejs.dev/ , 정말 유망해 보입니다

Webpack도 탁월한 선택이며 예를 들어 https://levelup.gitconnected.com/how-to-setup-a-react-application-with-webpack-f781b5c4a4ab

Snowpack, 동료가 이것으로 욕하는 것을 들었으므로 확인하기로 결정했습니다. https://www.snowpack.dev/tutorials/react

Snowpack을 보고 시작하기 위한 명령이 거의 없는 것 같아 시도해 보기로 결정합니다.

Snowpack을 사용하여 프로젝트 생성

Snowpack으로 프로젝트를 생성하려면 코드 한 줄이면 됩니다.

아래 명령을 실행하여 Snowpack 프로젝트를 생성합니다.

npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal

파일 세트를 얻었습니다. 이 시점에서 Snowpack 프로젝트가 있지만 실제로 React 앱은 아닙니다.

그래도 작동하는지 봅시다:

아래 명령을 실행하여 Snowpack 생성 앱을 시작합니다.

   cd react-snowpack
   npm run start

브라우저에서 http://localhost:8080/ 에 "Welcome to Snowpack"이 표시되어야 합니다.

반응 추가

다음으로 React에 대한 지원을 추가하는 데 필요한 종속성을 추가해 보겠습니다.

실행npm install을 실행하여 React를 설치합니다.

npm install react react-dom --save

mv를 실행하여 index.js의 이름을 index.jsx로 바꿉니다.

mv index.js index.jsx

이제 React 앱을 부트스트랩할 파일이 있습니다.

index.jsx에서 아래 코드를 추가합니다.

import React from 'react';
import ReactDOM from 'react-dom';

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App'

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

App.jsx를 생성하고 다음 코드를 제공합니다.

import React from 'react';

function App() {
  return (<div>App</div>)
}

export default App

index.html을 수정하고 다음 요소를 지정하십시오.

 <div id="root"></div>

이 시점에서 작동하는 React 앱이 있습니다. npm start 를 사용하여 로컬에서 실행해 보십시오.

배포 계획

Azure Static Web App을 사용하려면 먼저 다음을 수행해야 합니다.

GitHub 저장소를 생성합니다.

로컬 저장소를 만들고 GitHub 저장소와 동기화합니다.

커밋을 추가합니다.

저장소 만들기

GitHub로 이동하여 리포지토리를 만들고 원하는 이름을 지정합니다. 아래 예에서는 snowpack-demo라는 이름을 지정했습니다.

콘솔에서 아래 명령을 실행합니다.

  echo "# snowpack-demo" >> README.md
  git init
  git add.
  git commit -m "first commit"
  git branch -M main
  git remote add origin https://github.com/softchris/snowpack-demo.git
  git push -u origin main

이제 앱이 GitHub 저장소로 푸시됩니다. 다음으로 Azure에 배포해 보겠습니다.

SWA

Ensure you have downloaded the Azure Static Web Apps extension for Visual Studio code, and also ensure you have an Azure account.

Visual Studio Code의 왼쪽 메뉴에서 Azure 로고를 선택합니다.

정적 웹 앱 섹션에서 + 아이콘을 선택합니다.

일련의 단계를 따르십시오.

구독 선택

앱 이름 제공

앱 위치/(앱이 하위 디렉토리 app에 있는 경우/app를 입력해야 함)

템플릿, React를 선택합니다.

앱이 빌드되는 폴더 지정

이제 앱이 배포 중이므로 "GitHub에서 작업 열기"라는 메시지 팝업을 클릭하거나 GitHub의 저장소 및 작업 탭으로 이동할 수 있습니다. 1~2분 후, Visual Studio Code에 배포 URL이 표시되면 선택합니다.

축하합니다. 앱을 Azure에 배포했습니다. 내 앱은 다음과 같습니다.

https://happy-wave-036ec970f.1.azurestaticapps.net/

무엇 향후 계획

이제 막 시작했습니다. 이것은 파트 1이었습니다. 다음 파트에서는 ​​더 나은 UI를 제공하고 라우팅을 지원하여 앱을 개선할 것입니다. 이 모든 과정에서 Azure Static Web App이 우리를 지원할 것입니다.