Colin's Blog
[javascript] Polymer를 사용한 앱 배포 자동화 방법

Polymer는 웹 컴포넌트를 구축하기 위한 Google의 오픈 소스 라이브러리입니다. Polymer를 사용하여 개발한 앱을 배포하려면 일련의 작업을 수행해야 합니다. 이번 블로그 포스트에서는 Polymer를 사용한 앱 배포를 자동화하는 방법에 대해 알아보겠습니다.

1. 프로젝트 구성

먼저, Polymer 앱을 배포하기 위해 프로젝트 구조를 설정해야 합니다. 일반적으로 프로젝트 구조는 다음과 같습니다:

app/
├── index.html
├── src/
│   ├── components/
│   │   ├── my-component/
│   │   │   ├── my-component.html
│   │   │   └── my-component.css
│   │   └── ...
│   ├── styles/
│   │   └── ...
│   ├── images/
│   │   └── ...
│   └── ...
├── bower_components/
│   └── polymer/
│       └── ...
└── ...

위 구조에서 src 디렉토리는 Polymer 컴포넌트, 스타일 및 이미지 파일을 포함하고 있습니다.

2. 앱 빌드

다음으로, Polymer 앱을 빌드해야 합니다. 이렇게 하면 HTML, CSS 및 JavaScript 파일을 하나로 병합하고 최적화하여 배포할 준비를 할 수 있습니다. Polymer 빌드 도구인 polymer-cli를 사용하여 빌드할 수 있습니다. polymer-cli를 설치하려면 다음 명령어를 입력하세요:

npm install -g polymer-cli

설치가 완료되면 다음과 같이 명령어를 실행하여 앱을 빌드할 수 있습니다:

polymer build

3. 배포 자동화

Polymer 앱을 빌드한 후에는 자동화된 방식으로 배포해야 합니다. 다양한 배포 자동화 도구를 사용할 수 있지만, 여기서는 Netlify를 사용하는 예를 보여드리겠습니다.

  1. 먼저, Netlify에 계정을 만들고 로그인합니다.

  2. 새로운 사이트를 생성하려면, “New site from Git” 버튼을 클릭하고 개인 소스 코드 저장소를 선택합니다.

  3. GitHub, GitLab, Bitbucket 중에서 저장소를 선택하고 앱 소스 코드를 연결합니다.

  4. 연결한 후에는 “Build settings” 섹션으로 이동하여 빌드 설정을 구성합니다.

  5. “Build command”에는 polymer build 명령어를 입력하고, “Publish directory”에는 build/default/ (또는 자신이 지정한 빌드 디렉토리)를 입력합니다.

  6. 설정이 완료되면 “Deploy site” 버튼을 클릭하여 앱을 배포합니다.

4. 자동 배포 설정

마지막으로, 배포를 자동화하기 위해 Git 저장소와 연결하여 변경 사항이 있을 때마다 자동으로 배포되도록 설정합니다. Netlify에서는 다음과 같은 기능을 제공합니다:

  1. Git 저장소와 연결되었을 때 Netlify는 새로운 커밋이 발생할 때마다 자동으로 빌드를 시작합니다.

  2. 이후에는 배포가 자동으로 실행됩니다.

  3. 코드가 업데이트되면 Netlify는 자동으로 빌드하고 배포합니다.

자동 배포 설정을 위해 Netlify 사이트로 돌아가서 “Deploy settings”에 들어갑니다. “Deploy” 섹션에서 “Deploy notifications” 옵션을 선택하고 지정된 이메일 주소로 알림을 받을 수 있습니다.

이제 Polymer 앱을 배포하는 데 필요한 모든 단계를 설정했습니다. 이제 코드를 변경할 때마다 자동으로 배포되는 앱을 즐길 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.