[PWA] 앱 배포하기

 

이번 글에서는 PWA로 앱을 개발하여 배포까지 하는 전체 제작 과정을 올려보도록 하겠습니다.

 

1. 프로젝트 설치 및 세팅

서비스 워커의 작동여부를 테스트하려면 serve 라는 노드 패키지를 설치해야합니다.

정적인 HTML을 브라우저에서 실행하면 서브스 워커를 테스트 할 수가 없습니다. 그래서 미니 웹 서버가 필요한데 serve가 딱 그 용도에 적합합니다.

 

그리고 구글 파이어베이스의 웹 호스팅으로 웹에 배포할 것 이므로 firebase-tools 패키지도 설치해야합니다.

VSCode에서 터미널 창을 열고 다음 명령어를 실행합니다.

npm install -g serve
npm install -g firebase-tools

명령어 -g 옵션은 노드 패키지를 시스템 전역에 설치한다는 뜻으로 아무곳에서나 명령어를 실행하여도 관계없이 설치됩니다.

 

VSCode 터미널 창에서 아래의 명령어를 입력하여 뷰 프로젝트를 생성합니다.

vue create 프로젝트명

 

프로젝트 옵션은 아래와 같습니다.

두번쨰 옵션질문에서 Babel을 선택해 ES6+로 작성한 자바스크립트가 모든 브라우저에서 실행될 수 있게하고, PWA도 함께 선택해 그자리에서 바로 PWA를 제작할 수 있게 합니다.  

 

뷰티파이 플러그인 또한 추가합니다.(default)

vue add vuetify

노드 패키지를 설치하고 개발자 모드로 실행합니다.

npm install
npm run serve

앱을 개발자 모드로 실행하면 빠르고 간편하게 실행 결과만 확인 가능합니다. 하지만 개발자 모드에서는 서비스 워커가 동작하지 않습니다.  

 

뷰 프레임워크를 이용해 코딩을 한 코드들은 자바스크립트가 아니므로 바로 브라우저에서 실행되지 않습니다.

실행하는데 필요한 모든 파일 (html,css,js,img 등)을 정적 파일 (static file)로 만드는 빌드 과정을 거쳐야만 브라우저가 읽을수 있는 자바스크립트 파일로 만들어지기 떄문입니다. 

 

즉, 웹 애플리케이션을 개발한 후 사용자에게 배포하려면 빌드 과정을 거쳐야합니다. 

 

빌드 명령어는 다음과 같습니다.

npm run build

위 명령어를 실행하며 앱을 빌드하면 다음 그림처럼 프로젝트 폴더안에 dist 라는 폴더가 생성됩니다.

 

이어서 빌드 완료한 앱을 실행해보겠습니다. 다음 명령어는 dist폴더의 index.html 파일을 실행합니다.

serve dist

ctrl 키를 누르고 http://localhost:5000을 클릭하여 실행합니다.

 

이제 서비스 워커의 동작을 확인해보겠습니다. 크롬브라우저에서 F12를 눌러 개발자 도구를 엽니다.

상단의 toggle device toolbar 아이콘을 클릭하여 모바일 화면으로 확인합니다.

Application 탭에서 왼쪽메뉴 중 Service Workers를 클릭합니다.

화면에 보이는 항목중 Status를 확인해보면 activiated and is running 이라는 문구와 함께 초록색 동그라미가 확인된다면 서비스 워커가 잘 동작하고 있다는 뜻입니다

 

만약 다른 서비스 워커를 실행 중이라면, 개발자 도구에 이전 내용이 나타나서 제대로 확인 할 수 없습니다. 이떄는 반드시 Clear storage 메뉴에서 Clear site data를 클릭하여 기존 서비스 워커와 캐시를 삭제합니다. 

삭제 후 브라우저를 새로고침하면 정상동작하는 서비스 워커를 확인할 수 있습니다. 

 

테스트를 마쳤다면 VScode의 터미널 창에서 ctrl+c 를 눌러 테스트 서버를 종료하고 웹브라우저를 닫습니다. 

 

 

프로젝트의 dist/manifest.json 파일을 열어 다음처럼 수정합니다.

{
    "name": "vue_project",
    "short_name": "vue_project",
    "theme_color": "#ffffff",
    "icons": [
        {
            "src": "./img/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./img/icons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "./img/icons/android-chrome-maskable-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "./img/icons/android-chrome-maskable-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
    "start_url": "./index.html",
    "display": "standalone",
    "orientation":"portrait",
    "background_color": "#ffffff"
}

name과 short_name은 각자 앱의 특성을 나타내는 제목과 설명을 입력합니다.

 

display는 statndalone을 선택해 기기에서 사용할 수 있는 최대 화면을 설정했습니다. 그리고 orientation은 세로로 볼 수 있는 portrait로 실행합니다.

 

theme_color는 상태 표시줄의 색상을 결정합니다.

background_color는 스플래시 스크린의 배경 색상을 결정합니다.

 

2. 워크박스로 오프라인 관리하기

기본적인 세팅은 모두 완료하였습니다. 다음은 서비스 워커를 이용한 오프라인 캐시 관리입니다. 뷰 프로젝트를 생성할 때 PWA 를 선택했으므로 이미 워크박스가 기본으로 탑재되어있습니다. 

* 워크박스란? 구글에서 제공하는 워크박스는 웹앱의 오프라인 기능을 지원하는 자바스크립트 라이브러리입니다.

워크박스는 PWA의 장점인 오프라인 퍼스트의 경험을 쉽게 구현하도록 오픈소스 모듈로 지원합니다. Vue-CLI 3부터 PWA지원이 강화되어 워크박스라는 체계적인 오프라인 기능을 지원합니다.

 

서비스의 오프라인 관리는 신경쓸 것이 많아 까다롭습니다. 그러나 워크박스를 사용하면 반복되는 것은 자동화하고 상황에 따라 캐시를 손쉽게 사용할 수 있도록 다양한 기능을 제공하므로 편라합니다. 구글또한 워크박스를 사용하고 있습니다. 

 

캐시가 필요한 경우는 4가지입니다. 오프라인 캐시 필수 개념입니다.

 

- HTML, JS,CSS 파일 (*html, *.js, *.css)

- 이미지 파일 (*.png, *.jpg,*.svg )

- 글꼴, 아이콘 파일 (구글폰트, 구글 머터리얼 디자인 아이콘)

- HTML 요청 (URL)

 

워크박스는 다음과 같이 캐시를 상황별로 다르게 관리합니다. 캐시할 파일에 따라 방법을 다르게 적용해 낭비되는 일이 없도록 캐시를 효율적으로 운영합니다.

캐시전략	방법	용도	대상
Cache First	캐시 먼저 사용-> 캐시에 없을때 온라인 사용	캐시가 유용한 폰트나 이미지처럼 바뀔 가능성이 작을떄	폰트, 이미지
Stale while revalidate	캐시 먼저 사용-> 캐시 내용이 변경되면 온라인에 접속해 변경된 것으로 교체	캐시가 유용하지만, 사용자가 가끔씩 변경할 때	아바타 이미지, CSS, JS
Network First	온라인에 먼저 접속해 사용 -> 오프라인일 때 캐시 사용	인터넷 기사처럼 항상 최신 내용이 중요할 떄	HTTP 요청 URL

 

Vue-CLI를 사용한 PWA 템플릿은 내부적으로 워크박스를 사용하므로, 자동으로 생성된 서비스 워커를 통해서 *png, *.js, *.css 파일의 기본 캐시를 제공합니다. 

 

크롬브라우저의 개발자 도구에서 Console 탭에 들어가면 워크박스가 캐시한 내용을 표시해 주므로 어떤 내용이 캐시되어있는지 확인 할 수 있습니다.

 

캐시된 파일 이름별로 더 자세한 내용을 보고싶으면 Application 탭을 클릭하여 캐시저장소 Cache Storage 를 확인합니다.

Network 탭에 들어가면 외부 네트워크 접속을 통해 캐시된 파일도 확인 할 수 있습니다.

 

Network 탭에서 Offline 모드로 바꾸고 새로고침 했을 때 빨간색 파일 (status failed)은 캐시되지 않은 파일입니다. 

Vue-CLI의 PWA 템플릿은 워크박스를 기본으로 사용하며, 다음과 같은 캐시를 자동으로 제공합니다.

 

파일종류	내용	경로
index.html, robots.txt	첫 시작 HTML,웹 크롤러 설정	/dist
*.css, *.js	CSS,JS 파일 캐시	/dist/css, /dist/js
*.png	이미지 캐시파일	/dist/img
index.html 에서 사용한 외부연결	구글폰트, 구글 머터리얼 디자인 아이콘	fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgWxM.woff'

3. 앱 실행 화면 만들기

Vue-CLI 로 뷰 프로젝트를 생성할 때 자동으로 생성되는 index.html, App.vue 파일을 수정해 앱을 완성해 보겠습니다.

 

뷰 프로젝트 생성시 자동으로 생성된 index.html 파일을 다음과 같이 수정합니다.

<!DOCTYPE html>
<!-- html언어를 한글로 설정 (번역하시겠습니까? 질문 안뜨도록 미리 설정) -->
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
    <title>vue_project</title>
    <!-- 상태 표시줄 테마 색상을 흰색으로 변경(매니페스트에서 설정한 값이 적용되지 않는 기기는 여기서 색상 지정) -->
    <meta name="theme-color" content="#ffffff">
    <!-- 메터리얼 디자인 아이콘 추가 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel=stylesheet>
...생략

App.vue 파일을 아래와 같이 수정합니다. 참고 (vuetifyjs.com/en/getting-started/installation/#usage-with-cdn)

<template>
  <v-app>
    <v-content>
      <!-- fill-height는 브라우저 높이를 100%, 수직으로 가운데 정렬시킴 fluid 좌우여백 제거 -->
      <v-container fluid fill-height >
        <v-row>
          <!-- text-center는 수평 가운데 정렬 -->
          <v-col cols="12" class="text-center">
            <!-- 타이포 스타일은 title, 글자색은 흰색으로 설정  -->
            <h1 class="title white--text">반가워요!</h1>
            <p class="caption">by VueJS</p>
            <img src="./assets/logo.png" alt="" />
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>
<script>
  export default {
    name: 'App',
    //vue가 초기화 될떄
    created () {
      // 배경색을 다크모드로 함
      this.$vuetify.theme.dark = true;
    }
  }
</script>

4. HTTPS로 firebase hosting에 PWA 배포

PWA를 HTTPS에 배포하여 원격에 있는 사용자가 실전에서 사용할 수 있도록 서비스해보겠습니다.

트래픽 걱정없이 용량을 무료로 대용량 지원하는 파이어베이스를 사용하여 PWA를 배포합니다.

 

firebase는 실전에 사용할 수 있는 고품질 모바일 앱과 웹앱을 쉽고 빠르게 개발할 수 있도록 서버단에 필요한 다양한 기능을 클라우드 서비스로 지원하는 통합 플랫폼입니다. 

 

파이어베이스는 실시간 데이터베이스, 오픈 인증, 스토리지, 호스팅, 푸시 알림 서비스, 광고 , 분석 등을 제공합니다.

즉, 앱 개발에서 개발자에게 가장 부담스러운 백엔드 처리를 도와주는 서비스 입니다.

firebase.google.com/pricing?hl=ko

Firebase Pricing

피이어베이스 호스팅 용량을 최대 10GB 까지 기한 제약 없이 무료로 사용 가능할 수 있습니다. 특히 HTTP2 프로토콜을 제공하므로 PWA를 개발할 때 테스트 용도로도 좋습니다. 호스팅 용량 10GB, 트래픽 한달 10GB까지 무료이므로 용량과 트래픽 걱정 없이 넉넉하게 사용할 수 있습니다.

 

firebase에 접속하여 계정을 만든 후 로그인을 합니다.

firebase.google.com/?hl=ko

Firebase

우측 상단 콘솔로 이동 버튼 을 클릭합니다.

 

콘솔로 이동하여 프로젝트 추가 버튼을 클릭하여 프로젝트를 생성합니다.

프로젝트 이름을 입력 합니다.

구글 애널리틱 계정 생성후 계정선택 -> 대한민국선택 -> 약관동의 한 후 프로젝트 만들기 버튼을 눌러 프로젝트를 생성합니다.

파이어베이스에 로그인을 하기 위하여 

VSCode에 터미널 창에 와서 아래의 명령어를 입력합니다.

npm install firebase vuefire@next
firebase login

firebase CLI가 오픈 인증을 사용해도 되냐는 질문에 Y를 입력하고 Enter를 누릅니다.

웹 브라우저가 팝업되면 구글 계정에 로그인 후 허용을 클릭합니다.

VSCode 터미널에 

+  Success! Logged in as  구글계정

라는 메시지가 뜬다면 성공적으로 로그인 완료된 것입니다.

 

다음으로 파이어베이스를 다음의 명령어로 초기화합니다.

firebase init

? Are you ready to proceed? Yes

? Which Firebase CLI features do you want to set up for this folder? Hosting

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: 파이어베이스에서 생성한 프로젝트

 What do you want to use as your public directory? dist

? Configure as a single-page app (rewrite all urls to /index.html)? N

 

앱을 빌드하고 파이어베이스 서버에 업로드하기 전에 반드시 다음 작업도 모두 주닙를 마쳐야 합니다.

만약 노드 패키지를 설치하지 않았다면 npm install 을 터미널에 입력하고 만약 소스를 변경하였다면 npm run serve 도 이어서 입력합니다.

npm run build 명령어로 최종 배포용으로 빌드하고

serve dist 명령어로 결과를 확인합니다.

 

마지막으로 firebase deploy를 입력하면 앞에서 지정한 모든 내용이 호스팅 서버에 자동으로 업로드됩니다. 만약 코드를 수정해야한다면 앞의 절차를 모두 다시 할 필요는 없습니다. 

npm run build로 dist 폴더를 새로 작성하고, firebase deploy로 파이어베이스에 배포하는 두 단계만 작업하면 됩니다.

firebase deploy

Hosting URL 에 표시된 URL을 컨트롤을 누르고 클릭하여 브라우저로 확인합니다. 

 

수정사항이 있을경우 firebase deploy 명령만 다시 실행하면 됩니다. 개인 도메인이 있다면 파이어베이스의 Hosting 메뉴에서 커스텀 도메인을 추가버튼을 눌러 다른 URL로도 연결가능합니다.

전통 방식의 호스팅 서비스의 FTP를 사용하지 않고 node.js와 파이어베이스 CLI를 사용하여 배포해봤습니다.

 

마지막으로 크롬 확장기능 라이트하우스를 통해 PWA 성능 테스트를 해보겠습니다.

 

라우트하우스는 웹앱 성능을 분석하는 오픈소스 자동화 도구입니다. 웹사이트의 일반 성능과 PWA의 기능을 평가한 후 최고의 성능을 내려면 무엇을 더 보완해야하는지 알려줍니다.

 

라이트 하우스는 현재 접속한 사이트를 그 자리에서 평가할 수 있어 매우 유용합니다. 이것을 개발 단계부터 사용해서 PWA 테스트의 지표로 활용하면 좋습니다.

chrome.google.com/webstore/search/lighthouse?hl=ko

Chrome 웹 스토어

lighthouse 검색 후 크롬에 추가합니다.

 

추가가 완료되면 주소창 오른쪽에 아이콘이 생깁니다. 성능을 평가하고 싶은 웹사이트에 접속한 상태에서 이 아이콘을 클릭한 후 Generate report를 클릭하면 잠시 후 결과 보고서를 보여줍니다.

 

수고하셨습니다.