Deployment | firebase hosting

Deployment steps 

1. Test code
2. Optimize code 
   • Lazy loading
3. Build app for production
   • building app doesn't mean we have to write more codes. 
   • 이미 작성되어있는 특정 script를 실행하는 것이다. 
   • => production을 위한 코드(자동으로 최적화되고 압축된 코드)를 반환한다. 
4. Upload code to server
   • 3에서 만들어진 코드 패키지를 업로드한다.  
5. Configure Server 

Optimize

what is lazy loading? 

코드를 최적화하는 방법은 여러 가지가 있다. 예를 들어, props이 변경되었을 때에만 컴포넌트를 재평가하는 React.memo도 최적화의 한 방법이 된다. Lazy loading도 이런 최적화 방법 중 하나이다. 

+) 최적화가 최고의 코드를 작성하는 것을 의미하는 것은 아니다. 

 

1. Lazy loading | 어떤 코드가 필요할 때에만 해당 코드를 load한다. 
   • 사용자가 SPA에 방문하면, 모든 JS 코드를 하나로 묶은 번들을 한 번에 다운로드한다. 
   • 이 코드 번들을 가능한 작게 만들어야 한다. 
   • => 예를 들어, 사용자가 어플리케이션의 특정 페이지에 방문했을 때에만 보여지는 컴포넌트에 대한 코드는, 처음부터 다운 받을 필요가 없다. 
2. 여러 Route를 사용하고 있을 때, Route 별로 코드를 분리해서 쉽게 lazy loading을 이용할 수 있다. 
   • 보통 App.js 에서 모든 route를 정의하고, 해당 route에서 렌더링할 컴포넌트를 import한다.
   • 즉, 모든 컴포넌트를 app에 import 하게 된다. 
   • => 최적화 없이 앱을 실행하면 모든 component 파일이 최초의 번들 코드에 포함된다. 

how to use lazy loading? 

import React, { Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
import LoginPage from './pages/login/login';
// import MainPage from './pages/main/main';

const MainPage = React.lazy(() =>  import( './pages/main/main'));

function App() {
  return (
    <Suspense fallback={<p>loading...</p>}>
      <Routes>
        <Route path="*" element={<LoginPage />} />
        <Route path="/main" element={<MainPage />} />
      </Routes>
    </Suspense>
  );
}

 

1. dynamic import | 해당 스크립트를 필요로 할 때 import 한다. => 필요할 때에 새로운 js를 요청한다. 
2. React.lazy( () =>  import( 'path' ) )
   • 인자로 함수를 전달받는다. 
   • import 함수를 실행한다. 
   • 대부분의 사용자가 방문할 페이지를 lazy loading할 필요는 없다. 
3. Suspense | fallback UI(대체 UI)
   1. route에 방문했을 때, 즉 해당 컴포넌트가 필요할 때에 코드를 다운로드 한다.
   2. 다운로드가 완료 되기 전까지는 컴포넌트를 렌더링할 수 없기 때문에 에러가 발생한다. => 대체 ui를 정의해야 한다. 

Building app for production 

// package.json 
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

 

1. npm start | app을 개발하기 위한 스크립트를 실행한다.
   • $ npm start 
   • 우리가 작성하는 코드가 브라우저에서 동작하도록 코드를 변환(not optimize)한다.
   • local server를 가동한다. 
2. npm build | app을 배포하기 위해 사용하는 스크립트를 실행한다.
   • $ npm run build 
   • 스크립트는 프로젝트 폴더에 build라는 폴더를 생성하고, 여기에 우리가 작성한 코드를 최소화/최적화한 파일을 위치시킨다. 
   • 서버를 가동하지는 않는다. 
   • 해당 스크립트를 실행할 때마다, build 폴더를 덮어쓴다.
     • 따라서 build 폴더에서 작업하는 것이 아니라, 이전처럼 src 폴더에서 작업한다. 

Upload code to real Server | firebase로 배포하기

statis website & hosting service provider

1. SPA is a static web site 
   • 리액트 어플리케이션 뿐만 아니라 모든 SPA는 static website이다. 
   • 즉, HTML, CSS, JS 파일(browser side)로만 구성되며, 서버 측의 코드(ex. node.js, PHP...)는 포함되어 있지 않다. 
2. 이러한 SPA를 배포하고 싶다면 static website hosting provider가 필요하며, firebase hosting service는 이런 provider 중 하나이다.  
   
   • SPA를 배포할 때, 서버 측 코드를 hosting 하는 서비스는 필요하지 않다. 

firebase deployment steps

firebase > hosting

 

1. firebase 콘솔에서 배포할 프로젝트를 선택하고, build 메뉴에서 hosting 서비스를 클릭 > get started 클릭한다. 
2.  $ npm install -g firebase-tools 
   • firebase hosting을 이용하려면 firebase-tools이 설치되어 있어야 한다. 
   • $ firebase tools --version 명령어를 이용하면, firebase tools이 이미 설치되어있는지 확인해 볼 수 있다.  
3. $ firebase login  | firebase 로그인, 브라우저 또는 커맨드에서 로그인할 수 있다. 
4. $ firebase init 
   • 터미널에서 해당 명령어를 이용할 때에는, 프로젝트의 가장 상위 레벨에 위치해 있어야 한다. 
   • 터미널에 해당 명령어를 입력하면, 다음과 같이 몇가지 질문에 옵션을 선택해야 한다. 
     • Which firebase CLI feature do you want to set up for this folder? | hosting 선택(스페이스 바) 후 엔터 
     • let's associate this project directory with a Firebase project | 현재 폴더를 firebase 콘솔의 프로젝트와 연결할 것인지 묻는 질문으로, Use an existing project 옵션을 선택한다. 
     • what do you want to use as your public directory? 
       • deploy할 폴더가 무엇인지를 묻는 질문으로, 기본값은 public 폴더이다. 
       • cra의 npm run build 명령어를 입력하면 production 코드가 build 폴더 내에 생성되므로, build 폴더로 직접 지정(입력)해 주어야 한다. 
     • Configure as a single-page-app(re-write all urls to index.html)? 
       • 모든 url을 index.html에 덮어 쓰겠냐는 질문으로, y/N => y 옵션을 선택한다. 
       • 사용자가 어떤 URL로 요청하는지에 상관 없이, 서버가 항상 같은 응답(html, css, js)을 하게 된다. 
       • => 이런 과정을 "configure server(서버 구성)" 단계로 분리할 수 있으며, 호스팅 서비스가 무엇인지에 따라 그 방법은 다를 수 있다. 
     • set up automatic builds and deploys with Github? | n
     • File build/index.html alreay exists. Overwrite? | n, npm run build 명령어에 의해 생성된 index.html을 그대로 이용한다.
5.  $ firebase deploy  
   
   • 4 단계에서 모든 배포 설정이 완료되면, deploy 명령어를 이용해 어플리케이션을 배포할 수 있다. 
6. $ firebase hosting:disable | hosting을 종료할 수 있다.