Step 4. デプロイ - Polymer Project

本ステップでは、これまで作成したアプリケーションをWebにデプロイしていきます。

デプロイビルド

polymer buildとコマンドを入力を行い、Polymerアプリケーションをビルドし製品版となるファイルを作成します。

異なる機能を持つブラウザ毎に、それぞれ異なるアプリケーションビルドを提供することができます。Polymer Starter Kitは、3つのビルドを作成するように構成されています：

service workerがバンドルされたminifyビルド。オールドブラウザとの互換性を考慮しEC5でのコンパイル。
service workerがバンドルされたminifyビルド。ES6コードはそのまま提供。ES6対応ブラウザ向けビルド。
service workerがバンドルされないminifyビルド。ES6コードはそのまま提供。 HTTP/2 push対応ブラウザ向けビルド。

本手順では、バンドルされたコンパイル済ビルド（es5-bundled）をデプロイし、最大限の互換性を確保します。それ以外のビルドをサーバーへデプロイする場合は、より複雑なセットアップが必要となります。

ビルド設定は、プロジェクトルートフォルダに存在する設定ファイルpolymer.json内のbuildsオブジェクトで行われています：

polymer.json

...
"builds": [
  {
    "preset": "es5-bundled"
  },
  {
    "preset": "es6-bundled"
  },
  {
    "preset": "es6-unbundled"
  }
]
...

ビルドはbuild/フォルダのサブフォルダへ、次のように出力されます：

build/
  es5-bundled/
  es6-bundled/
  es6-unbundled/

カスタムビルドを設定するには、コマンドラインオプションを使用するか、polymer.jsonを編集します。使用可能なオプションと、最適化の全項目については、polymer help buildコマンドを実行してください。また、次のドキュメントも参照してみてください。polymer.json specification、building your Polymer application for production。

サーバーにデプロイ

Polymerのアプリケーションは、どのWebサーバーにもデプロイできます。

本テンプレートでは、<app-location>エレメントを使用してURLベースのルーティングを有効にします。そのためには、サーバーが、エントリーポイントであるindex.htmlを全てのルートに対して提供する必要があります。

下のセクションのいずれかを実行すると、このアプリケーションをGoogle AppEngineまたはFirebase Static Hostingにデプロイすることができます。これは、Polymerアプリケーションをデプロイするための無料でセキュアな方法です。他のホスティングプロバイダにおいても同様の手順でのデプロイとなります。

AppEngine によるデプロイ

Google App Engine SDKをダウンロードし、ご使用のプラットフォームの手順に従ってインストールします。本チュートリアルでは、Python SDKを使用します。
AppEngine アカウントに登録します。
プロジェクトダッシュボードを開き、新しいプロジェクトを作成します。
- [プロジェクトの作成]ボタンをクリックします。
- プロジェクト名を入力します。
- [作成]ボタンをクリックします。
App Engineは、プロジェクトの名前に基づいてプロジェクトIDを提供します。このIDを書き留めておきます。
cdコマンドを使って、アプリのメインフォルダ（たとえば、my-app/）に移動します。

次の内容のapp.yamlファイルを作成します：

runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /bower_components
  static_dir: build/es5-bundled/bower_components
  secure: always

- url: /images
  static_dir: build/es5-bundled/images
  secure: always

- url: /src
  static_dir: build/es5-bundled/src
  secure: always

- url: /manifest.json
  static_files: build/es5-bundled/manifest.json
  upload: build/es5-bundled/manifest.json
  secure: always

- url: /service-worker.js
  static_files: build/es5-bundled/service-worker.js
  upload: build/es5-bundled/service-worker.js
  secure: always

- url: /.*
  static_files: build/es5-bundled/index.html
  upload: build/es5-bundled/index.html
  secure: always

プロジェクトIDを、App Engineによってアプリケーションに与えられたIDに設定します。以下は一例です：
```
gcloud config set project my-app-164409
```
アプリケーションを作成します：
```
gcloud app create
```
アプリケーションをデプロイする地域を選択する必要がありますが、これは変更できません。
アプリケーションをデプロイします：
```
gcloud app deploy
```
アプリケーションは、指定されたURLにてオンラインで利用できるようになります。以下はURLの一例です：
```
https://my-app-164409.appspot.com/new-view
```
以下のコマンドを入力すると、アプリケーションのURLが指定されブラウザが起動します：
```
gcloud app browse
```

Firebase によるデプロイ

以下の手順は、Firebase hosting quick start guide に基づいています。

Firebase アカウントに登録します。
https://www.firebase.com/account へ遷移し、新しいアプリケーションを作成します（訳注：[プロジェクトを追加]から新規プロジェクトを作成します）。アプリケーションに関連付けられているプロジェクトIDを書き留めます。
Firebaseコマンドラインツールをインストールします。
```
npm install -g firebase-tools
```
cdコマンドを使って、プロジェクトフォルダに移動します。
Firebaseアプリケーションを初期化します。
```
firebase login
firebase init
```
Firebaseは、アプリケーションに関連付けられているプロジェクトを尋ねてきます。既に作成済のプロジェクトから一つを選択します。
Firebaseはアプリケーションのパブリックフォルダ名を尋ねてきます。build/es5-bundled/と入力しenterキーを押します。
firebaseの設定を編集し、URLルーティング情報を追加します。最終的なfirebase.jsonファイルは、次のようになります：
```
{
  "hosting": {
    "public": "build/es5-bundled/",
    "rewrites": [
      {
        "source": "**/!(*.*)",
        "destination": "/index.html"
      }
    ]
  }
}
```
この設定によって、Firebaseは、ファイル拡張子で終わらないURLに対して、index.htmlを表示するようになります。
プロジェクトをデプロイします。
```
firebase deploy
```
サイトのURLが出力画面に表示されます。firebase open hosting:siteコマンドを実行して、デフォルトブラウザにてサイトを表示することもできます。