Self-hosted AMP framework example

This repository includes AMP & PWAMP examples of using a self-hosted AMP framework:

• standard-amp.html - Standard AMP page using framework from https://cdn.ampproject.org
• standard-amp-optimized.html - Optimized AMP page using framework from https://cdn.ampproject.org
• self-hosted-amp.html - Standard AMP page using framework from https://ampdemo.cmphys.com/amp-rt
• self-hosted-amp-optimized.html - Optimized AMP page using framework from https://ampdemo.cmphys.com/amp-rt

A guide to hosting the AMP framework is available from github.com/ampproject/amphtml/blob/main/docs/spec/amp-framework-hosting.md. Support for this feature exists in amphtml as of April 2020 and amp-toolbox 2.1.0+. Validation of these AMP pages is under discussion in ampproject/amphtml issue #27546.

How the framework was built and hosted

The instruction below are meant to demonstrate how the AMP pages in this repository take advantage of a self-hosted AMP framework. This is just a single example of how this goal can be accomplished. Be sure to review Hosting the AMP framework by the AMPHTML project for complete instructions and other options.

1. Fetch and prepare a stable tag from ampproject/amphtml

   $ cd ~/source/amphtml
   $ git fetch upstream
   $ git checkout 2110011758000
   $ npm install
   $ amp clean

2. Push tag to your own fork (e.g. github.com/mdmower/amphtml)

   $ git push origin 2110011758000

3. Create build-system/global-configs/custom-config.json

   {
     "cdnUrl": "https://ampdemo.cmphys.com/amp-rt",
     "geoApiUrl": "https://ampdemo.cmphys.com/geoip"
   }

4. Create build-system/global-configs/custom-flavors-config.json

   [
     {
       "flavorType": "self-host-prod",
       "name": "Self-hosted production release",
       "environment": "AMP",
       "rtvPrefixes": ["01"],
       "command": "amp dist --noconfig --sourcemap_url='https://raw.githubusercontent.com/mdmower/amphtml/{version}'"
     }
   ]

5. Build the AMP framework

   $ amp release --flavor="self-host-prod"

   The built framework can be found in directory release/org-cdn/rtv/012110011758000/.

6. Push the built framework to your server and make it available from https://ampdemo.cmphys.com/amp-rt/rtv/012110011758000 and https://ampdemo.cmphys.com/amp-rt (in that order)

   # Sample commands provided for illustration; your instructions will vary depending on hosting setup.
   $ rsync -av --delete release/org-cdn/rtv/012110011758000/ user@server.com:~/amp-rt/
   $ ssh user@server.com
   server.com$ sudo rsync --chown=www-data:www-data -av --delete ~/amp-rt/ /var/www/html/amp-rt/rtv/012110011758000/
   server.com$ sudo rsync --chown=www-data:www-data -av --delete --exclude="rtv" ~/amp-rt/ /var/www/html/amp-rt/

7. Create https://ampdemo.cmphys.com/amp-rt/rtv/metadata JSON file

   {
     "ampRuntimeVersion": "012110011758000",
     "ampCssUrl": "https://ampdemo.cmphys.com/amp-rt/rtv/012110011758000/v0.css"
   }

8. Setup GeoIP Web API on server for AMP-GEO API fallback at https://ampdemo.cmphys.com/geoip.

9. Point AMP pages at custom framework host

   • Basic: Replace all occurrences of https://cdn.ampproject.org with https://ampdemo.cmphys.com/amp-rt in AMPHTML document

     $ sed 's|https://cdn.ampproject.org|https://ampdemo.cmphys.com/amp-rt|g' standard-amp.html > self-hosted-amp.html

   • Optimized: Install and run amp-toolbox optimizer

     $ npm install @ampproject/toolbox-cli
     $ npx amp optimize --host="https://ampdemo.cmphys.com/amp-rt" --rtv="012110011758000" --geoapi="https://ampdemo.cmphys.com/geoip" standard-amp.html > self-hosted-amp-optimized.html

     Note that --geoapi is optional if you build the framework yourself (as in this example) because you can define the same variable at build time using build-system/global-configs/custom-config.json. It is necessary if you download the framework, though.