Vite React TypeScript PWA 만들기 + AWS Amplify 배포

Boo Sung Jun·2022년 8월 2일

React

목록 보기

2/3

Overview

Vite를 이용하여 React, TypeScript 환경을 세팅하고, PWA(Progressive Web Application)를 만드는 방법을 알아보자.
그리고 완성된 PWA를 AWS Amplify 서비스를 이용하여 배포한다.

Vite + React + TypeScript + PWA 세팅

1. yarn을 이용한 vite + react + typescript 환경 세팅

터미널에서 프로젝트를 설치할 디렉토리로 이동 후 패키지 설치 명령어 입력

$ yarn create vite

프로젝트 이름 입력 후, 프레임워크 선택창에서 react 선택
여기에서는 프로젝트 이름을 vite-project로 설정함

yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@2.9.4" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

react-ts 선택

success Installed "create-vite@2.9.4" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: » react
? Select a variant: » - Use arrow-keys. Return to submit.
    react
>   react-ts

이제 아래와 같이 설치 완료 메시지와 함께 필요한 패키지 설치 방법과 프로젝트 실행 방법을 알려준다.

success Installed "create-vite@2.9.4" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: » react
√ Select a variant: » react-ts

Scaffolding project in C:\Programming\test\vite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Done in 69.85s.

프로젝트 디렉토리로 이동 후, 패키지를 설치한다.

 $ cd vite-project
 $ yarn

이제 아래 명령어로 프로젝트를 실행하고 브라우저에서 localhost:3000으로 이동하면 프로젝트가 정상적으로 실행되는 것을 확인할 수 있다.

$ yarn dev

2. PWA 세팅

스마트폰에서 보여줄 아이콘을 준비한다.
- 원하는 아이콘 사진을 준비하고, 크기 변환해 주는 사이트를 이용해 크기별로 준비하자
- 512x512 크기 이상의 아이콘이 적어도 하나 있어야 오류가 안난다.
- 본 프로젝트에서는 public 디렉토리 내에 icons 디렉토리를 만들어서 이곳에 저장하였다.
public 디렉토리에 manifest.json 파일 생성 후, 아래와 같이 앱 정보 작성한다.
- 아래 코드에서 icons는 위에서 추가한 아이콘 정보를 적는다.

// manifest.json

{
  "name": "MyProgressiveWebApp",
  "short_name": "MyPWA",
  "start_url": "",
  "display": "standalone",
  "background_color": "#F8F7DA",
  "theme_color": "#8C383A",
  "description": "PWA with Vite.js, React.js and TypeScript",
  "icons": [
    {
      "src": "icons/favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "icons/favicon-196x196.png",
      "type": "image/png",
      "sizes": "196x196"
    },
    {
      "src": "icons/logo-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "icons/logo-512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ]
}

루트 디렉토리에 sw.js 파일 생성 후, 아래와 같이 Service Worker 설정 코드 작성한다.

// sw.js

// install event
self.addEventListener("install", (e) => {
  console.log("[Service Worker] installed");
});

// activate event
self.addEventListener("activate", (e) => {
  console.log("[Service Worker] actived", e);
});

// fetch event
self.addEventListener("fetch", (e) => {
  console.log("[Service Worker] fetched resource " + e.request.url);
});

만들고자 하는 PWA의 기능에 따라 sw.js에 코드를 추가하자
ex) 캐시 저장, 오프라인에서 앱 사용

index.html 파일 내부에 메타 정보와 sw.js를 불러오는 스크립트 추가한다

<!-- index.html -->

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="theme-color" content="#8C383A" />
    <link rel="icon" href="icons/favicon-196x196.png" type="image/png" />
    <link rel="alternate icon" href="/favicon.ico" type="ico" sizes="16x16" />
    <link rel="apple-touch-icon" href="icons/apple-touch-icon-152x152.png" sizes="180x180" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="manifest" href="/manifest.json" />
    <title>Vite Typescript React PWA</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      if ("serviceWorker" in navigator) {
        // Register a service worker hosted at the root of the
        // site using the default scope.
        navigator.serviceWorker
          .register("/sw.js")
          .then((registration) => {
            console.log("Service worker registration succeeded:", registration);
          })
          .catch((err) => {
            console.log("Service worker registration failed:", error);
          });
      } else {
        console.log("Service workers are not supported.");
      }
    </script>
  </body>
</html>

현재까지의 디렉토리 구조는 다음과 같다
이제 PWA가 제대로 동작하는지 확인해보자
- 다시 프로젝트를 실행하고, 크롬 브라우저에서 localhost:3000으로 이동한다.
- 그리고 개발자 도구를 열고 'Lighthouse' 탭으로 이동한다.
- 'Categories' 항목 중에서 '프로그래시브 웹 앱'을 체크하고 'Analyze page load' 버튼을 누른다.