diff --git a/docs/README.md b/docs/README.md index 63b2583c5..0ffb725a2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -5,4 +5,5 @@ * [Use PSK with Chrome Dev Editor](chrome-dev-editor.md) * [Deploy to Github Pages](deploy-to-github-pages.md) * [Deploy to Firebase using Pretty URLs](deploy-to-firebase-pretty-urls.md) +* [Deploy to Google App Engine](deploy-to-google-app-engine.md) * [Use PSK for Mobile Chrome Apps](mobile-chrome-apps.md) diff --git a/docs/deploy-to-google-app-engine.md b/docs/deploy-to-google-app-engine.md new file mode 100644 index 000000000..a4f4512ce --- /dev/null +++ b/docs/deploy-to-google-app-engine.md @@ -0,0 +1,115 @@ +# Deploy to Google App Engine + +Google App Engine is a great way to host your Polymer application using Google infrastructure. + +[You can sign up for a Google Cloud Platform free account](https://cloud.google.com/). + +There are multiple ways to host web app on GCP, but my favorite one is using GAE. + +The scripts below are based on the [Using Static Files guide](https://cloud.google.com/appengine/docs/python/gettingstartedpython27/staticfiles) and [Polymer Gmail by @ebidel](https://github.com/ebidel/polymer-gmail) repository. + +1. Install the gcloud command line tools + + curl https://sdk.cloud.google.com | bash + + Detailed instructions can be found [here](https://cloud.google.com/sdk/) + +1. Inititalize gcloud + + gcloud init + + In this step you will be asked to login to your GCP account and set default settings, such as project, zone & region, etc. + +1. Create a new GCP project using the [Developers Console](https://console.developers.google.com/home/dashboard) + +1. Add app.yaml to your project root folder + + runtime: python27 + api_version: 1 + threadsafe: yes + + handlers: + + - url: /bower_components + static_dir: bower_components + secure: always + + - url: /images + static_dir: images + secure: always + + - url: /(.*).(html|js|json|css) + static_files: \1.\2 + upload: (.*)\.(html|js|json|css) + secure: always + + - url: / + static_files: index.html + upload: index\.html + http_headers: + Link: '; rel=preload; as=script, ; rel=preload; as=document, ; rel=preload; as=style' + # Access-Control-Allow-Origin: "*" + secure: always + + skip_files: + - ^(.*/)?app\.yaml + - ^(.*/)?app\.yml + - ^(.*/)?index\.yaml + - ^(.*/)?index\.yml + - ^(.*/)?bower\.json + - ^(.*/)?#.*# + - ^(.*/)?.*~ + - ^(.*/)?.*\.py[co] + - ^(.*/)?.*/RCS/.* + - ^(.*/)?\..* + - ^(.*/)?.*\.bak$ + - ^(.*/)?node_modules/.* + - ^(.*/).md|markdown + - ^(.*/)LICENSE + + This is the configuration file for the GCP project. + It sets a python runtime environment and static file handlers. + The configuration utilizes GAE HTTP/2 capabilities in order to minimize load time for HTTP/2 compatible browsers. + +1. Add a bash script to build & deploy the application + + #!/usr/bin/env bash + + GAE_PROJECT=psk + DEPLOY_VERSION=$1 + + if [ -z "$DEPLOY_VERSION" ] + then + TAG=`git describe` + # GAE doesn't allow periods + DEPLOY_VERSION=${TAG//.} + fi + + # Build it. + echo "Building $DEPLOY_VERSION" + gulp + cp app.yaml dist/app.yaml + + echo "Deploying $DEPLOY_VERSION" + gcloud preview app deploy dist/app.yaml --project $GAE_PROJECT --promote --version $DEPLOY_VERSION + + You have to set `GAE_PROJECT` variable to your GAE project id. + A deploy version can be provided as a parameter for the script, if not provided the latest git tag will be used. + +1. Add execution permission to the script + + chmod +x deploy.sh + +1. Run the deploy script + + Without version argument in order to use the latest git tag + + ./deploy.sh + + Or with a version argument (according to GAE version [limitations](https://cloud.google.com/appengine/docs/python/config/appconfig?hl=en)) + + ./deploy.sh v100 + + The URL to your live site is listed in the output. + +Enjoy!