ビルドとデプロイ

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

このページでは、アプリケーションを作成して本番環境に展開するために必要な手順について説明します。

目次

prpl-server (推奨)

prpl-serverは、各ブラウザに対して最適に配信するために振り分け機能を提供するノードサーバーです。 polymer.jsonの設定では、以下の応答をサポートします:

prpl-serverのためのビルド

ビルドを実行するには:

npm run build

これで server/build/ディレクトリが生成されます:

server/
├── build/
|   └── es5-bundled/
|   └── es6-bundled/
|   └── esm-bundled/
|   └── polymer.json
├── app.yaml
├── package-lock.json
└── package.json

prpl-serverのプレビュー

prpl-serverをローカルで使用してビルドをプレビューするには:

npm run serve

prpl-serverのデプロイ

構築後、 server/の中には、本番環境でアプリケーションを実行するために必要なすべてのファイルと設定が含まれています。 提供されている server/package.jsonは、サーバーの依存関係と、Node.jsをサポートするほぼすべてのホスティングサービスで使用できるstartコマンドを指定されています。

App Engine

スタンダード環境

server/app.yamlのコンテンツはGoogle App Engine Node.js スタンダード環境にデプロイできるように事前設定されています。 gcloudツールを使用して server/の内容をデプロイします(例: gcloud app deploy server/app.yaml)。

フレキシブル環境

Google App Engine Node.js フレキシブル環境にデプロイするには、 server/app.yamlを下記で置き換えます:

runtime: nodejs
env: flex
automatic_scaling:
  min_num_instances: 1

gcloudツールを使用してserver/の内容をデプロイします (例: gcloud app deploy server/app.yaml)。

Firebase Hosting + Firebase Functions

_Firebase Hosting_だけでは、ユーザエージェント文字列のサーバサイド処理が必要なため、 prpl-serverビルドのホスティングには不十分です。代わりに、サーバ側の処理に Firebase Functionsを使わなければなりません。 このgistには、これを実施するための詳細な手順が記載されています。

静的ホスティング

ブラウザ環境別に分けた配信が不要で、すべてのブラウザに同じビルドを提供したい場合は、静的なサーバーに展開するだけで済みます。

静的ホスティングのためのビルド

本番サイトを構築するには、:

npm run build:static

これにより、3つの異なるビルド出力が作成されます:

build/
├── es5-bundled/
├── es6-bundled/
├── esm-bundled/
└── ...

静的ホスティングのプレビュー

ローカルでプレビューするには:

npm run serve:static

デフォルトの設定は es5-bundledビルドを使います。レガシーブラウザをサポートする必要がない場合は、package.jsonの serve:staticスクリプトを es6-bundledまたは esm-bundledを使うように修正することで、より現代的なビルドを使用することができます。すべてのページナビゲーションリクエストが index.htmlの内容を提供していることを確認してください。

静的ホスティングのデプロイ

デフォルトでは、スタティックホスティングサーバーはシングルページアプリケーション(SPA)で動作するように設定されていません。特に、SPAが完全なファイルパス名に対応しないルートを使用するという問題があります。たとえば、 pwa-starter-kitの2番目のビューのURLはhttp://localhost:8081/view2ですが、ブラウザが使用できるファイルには対応していません。各静的ホスティングサーバーには、これを回避するための異なるアプローチを持っています:

App Engine

Google App Engine SDKをダウンロードし、ご使用のプラットフォームの手順に従ってインストールしてください。ここでは、Python SDKを使用しています。

App Engineにログインし、プロジェクトダッシュボードから新規プロジェクトを作ります。 プロジェクトに関連付けられているプロジェクトIDをメモしておきます。

App Engine設定ファイル(app.yaml)を次のように作成します:

runtime: python27
api_version: 1
threadsafe: yes

handlers:

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

- url: /node_modules
  static_dir: build/es5-bundled/node_modules
  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

skip_files:
- build/es6-bundled/
- build/esm-bundled/
- images/
- node_modules/
- server/
- src/
- test/

プロジェクトをデプロイするには:

gcloud app deploy --project <project_ID>

Firebase Hosting

Firebaseは、世界中に配信できる簡単なHTTP2対応静的ホスティング、リアルタイムデータベース、サーバー機能、エッジキャッシングを提供しています。

Firebase CLIをインストール:

npm install -g firebase-tools

Firebaseにログインします。Firebaseコンソールで新規プロジェクトを作成し、プロジェクトに関連付けられているプロジェクトIDをメモしておきます。

Firebaseにログインし、作成したプロジェクトを作業ディレクトリ用のアクティブなFirebaseプロジェクトとして設定します:

firebase login
firebase use <project_ID>

Firebase設定ファイル( firebase.json)を以下のように作成します:

{
  "hosting": {
    "public": "build/es5-bundled/",
    "rewrites": [
      {
        "source": "**/!(*.*)",
        "destination": "/index.html"
      }
    ],
     "headers": [
      {
        "source":"/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

プロジェクトをデプロイするには:

firebase deploy

Netlify

Netlify継続的デプロイがビルトインされ、ビルドコマンドを自動的に実行し、Gitリポジトリにプッシュするたびに結果をデプロイします。

次の書き換えルールを使って _redirectsファイルを作成します:

/*    /index.html   200

netlifyに移動し、新しいプロジェクトのGitホスティング先を設定します。Basic build settingsでは、ビルドコマンドとして npm run build:staticを、パブリッシュディレクトリとして build/es5-bundledを置きます。

Deploy siteをクリックします。

Service Worker

Service Workerがindex.htmlでロードされ、登録されます。しかし、開発中(デバッグを簡単にするため)は Service Workerは実際には存在せず、空ファイルのみが存在します。

Service Workerの設定はビルド時、つまり npm run buildまたはnpm run build:staticを実行することによって自動的に作成されます。ビルドディレクトリのこれらのファイルは、polymer.jsonの設定ファイルに基づいて生成されます:

build/
├── es5-bundled/
|   └── service-worker.js
├── es6-bundled/
|   └── service-worker.js
├── esm-bundled/
|   └── service-worker.js
└── ...

デフォルトでは、 /srcディレクトリ内のすべてのソースファイルは、sw-precache-config.jsで指定された通りにプリキャッシュされます。この動作を変更したい場合は、sw-precache-configドキュメントを参照してください。