Setup CloudFront

.gitignore

@@ -2,7 +2,9 @@
 /vendor/
 /web/vendor/
 /node_modules/
-/web/dist/
+/web/assets/css/
+/web/assets/fonts/
+/web/assets/js/
 /res/config/parameters.php
 /backups/
 /docker-compose.override.yml

Makefile

@@ -59,5 +59,5 @@ deploy: cache deploy-static-site
  		--capabilities CAPABILITY_IAM
 
 deploy-static-site:
-	# http://assets.externals.io.s3-website.eu-west-1.amazonaws.com/
-	aws s3 sync web/dist s3://assets.externals.io --delete --acl public-read
+	# http://assets.externals.io.s3-website-eu-west-1.amazonaws.com/
+	aws s3 sync web/assets s3://assets.externals.io --delete --acl public-read

gulpfile.js

@@ -16,26 +16,26 @@ gulp.task('js', function() {
     ])
     .pipe(concat('js/main.min.js'))
     .pipe(uglify())
-    .pipe(gulp.dest('./web/dist'));
+    .pipe(gulp.dest('./web/assets'));
 });
 
 gulp.task('css', function() {
     return gulp.src('./res/assets/style.less')
     .pipe(less())
     .pipe(concat('css/main.min.css'))
     .pipe(cleanCSS())
-    .pipe(gulp.dest('./web/dist'));
+    .pipe(gulp.dest('./web/assets'));
 });
 
 gulp.task('fonts', function () {
     return gulp.src([
         './node_modules/font-awesome/fonts/*.*',
-    ]).pipe(gulp.dest('./web/dist/fonts'));
+    ]).pipe(gulp.dest('./web/assets/fonts'));
 });
 
 gulp.task('clean', function() {
     return gulp.src([
-        './web/dist',
+        './web/assets',
     ],
     {read: false})
     .pipe(clean());

res/bootstrap.php

@@ -36,7 +36,7 @@ protected function configureContainerBuilder(ContainerBuilder $containerBuilder)
             $containerBuilder->enableDefinitionCache();
         }
         if ($this->getEnvironment() !== 'dev') {
-            $containerBuilder->enableCompilation(__DIR__ . '/../var/cache/' . $this->getEnvironment());
+//            $containerBuilder->enableCompilation(__DIR__ . '/../var/cache/' . $this->getEnvironment());
         }
     }
 };

res/config/config.php

@@ -42,7 +42,7 @@
 
     })),
 
-    'assets.url' => 'https://assets.externals.io',
+    'assets.url' => '',
 
     'db.url' => env('DB_URL'),
     Connection::class => function (ContainerInterface $c) {

res/config/env/dev.php

@@ -13,7 +13,7 @@
 
     'debug' => true,
 
-    'assets.url' => '/dist',
+    'assets.url' => '',
 
     'twig.options' => [
         'debug' => get('debug'),

res/views/home.html.twig

@@ -18,7 +18,7 @@
     {# Search #}
     <div id="search-form">
         <p class="algolia">
-            Search with <a href="https://www.algolia.com/" target="_blank"><img src="{{ assetsUrl }}/images/search-by-algolia.svg" alt="Algolia"></a>
+            Search with <a href="https://www.algolia.com/" target="_blank"><img src="/assets/images/search-by-algolia.svg" alt="Algolia"></a>
         </p>
         <input id="search-input" type="text" class="form-control input-lg" placeholder="Search...">
     </div>

res/views/layout.html.twig

@@ -17,16 +17,16 @@
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
 
-    <link rel="stylesheet" href="{{ assetsUrl }}/css/main.min.css?v={{ version }}">
+    <link rel="stylesheet" href="/assets/css/main.min.css?v={{ version }}">
 
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetsUrl }}/images/apple-touch-icon.png">
-    <link rel="icon" type="image/png" href="{{ assetsUrl }}/images/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="{{ assetsUrl }}/images/favicon-16x16.png" sizes="16x16" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="/assets/images/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/assets/images/favicon-16x16.png" sizes="16x16" />
 
     <meta name="og:title" content="{{ block('pageTitle') }}">
     <meta name="og:type" content="website">
     <meta name="og:url" content="https://externals.io/">
-    <meta name="og:image" content="{{ assetsUrl }}/images/apple-touch-icon.png">
+    <meta name="og:image" content="/assets/images/apple-touch-icon.png">
     <meta name="og:description" content="#externals - Opening PHP's #internals to the outside">
 
     <meta name="twitter:card" content="summary">
@@ -74,7 +74,7 @@
             <p class="platform_sh_widget">
                 Hosting sponsored by
                 <a title="platform.sh" href="http://platform.sh/?utm_campaign=sponsored_sites&utm_source=externals_io&utm_medium=referral">
-                    <img class="platformsh-logo" src="{{ assetsUrl }}/images/platform.svg" alt="platform.sh logo" style="padding: 0 3px 0 3px;height: 1.2em; vertical-align: text-top;"/></a>
+                    <img class="platformsh-logo" src="/assets/images/platform.svg" alt="platform.sh logo" style="padding: 0 3px 0 3px;height: 1.2em; vertical-align: text-top;"/></a>
                 (<a href="http://platform.sh/?utm_campaign=sponsored_sites&utm_source=externals_io&utm_medium=referral">Continuous Deployment Cloud Hosting</a>). Search sponsored by <a href="https://www.algolia.com">Algolia</a>.
             </p>
             <p>
@@ -85,7 +85,7 @@
     </footer>
 
     {% block scripts %}
-        <script src="{{ assetsUrl }}/js/main.min.js?v={{ version }}"></script>
+        <script src="/assets/js/main.min.js?v={{ version }}"></script>
 
         {% if not debug %}
             {# Google Analytics #}

res/views/maintenance.html.twig

@@ -8,13 +8,13 @@
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
 
-    <link rel="stylesheet" href="{{ assetsUrl }}/css/main.min.css?v={{ version }}">
+    <link rel="stylesheet" href="/assets/css/main.min.css?v={{ version }}">
 </head>
 <body>
     <div class="container text-center">
         <h1 style="margin-top: 100px">Maintenance in progress</h1>
         <br>
-        <img src="{{ assetsUrl }}/images/hammer.jpg" alt="HAMMERING IN PROGRESS">
+        <img src="/assets/images/hammer.jpg" alt="HAMMERING IN PROGRESS">
     </div>
 </body>
 </html>

template.yaml

@@ -62,6 +62,68 @@ Resources:
             Policies:
                 - AWSLambdaVPCAccessExecutionRole # Allows the lambda to access the VPC
 
+    # We use CloudFront in front of API Gateway to be able to redirect HTTP to HTTPS
+    # because API Gateway does not listen at all to HTTP requests.
+    WebsiteCDN:
+        Type: AWS::CloudFront::Distribution
+        Properties:
+            DistributionConfig:
+                Enabled: true
+                # Cheapest option by default (https://docs.aws.amazon.com/cloudfront/latest/APIReference/API_DistributionConfig.html)
+                PriceClass: PriceClass_100
+                # Origins are where CloudFront fetches content
+                Origins:
+                    # The website (AWS Lambda)
+                    -   Id: Website
+                        DomainName: !Sub '${ServerlessRestApi}.execute-api.${AWS::Region}.amazonaws.com'
+                        OriginPath: '/Prod'
+                        CustomOriginConfig:
+                            OriginProtocolPolicy: 'https-only' # API Gateway only supports HTTPS
+                    # The assets (S3)
+                    -   Id: Assets
+                        # Watch out, use s3-website URL (https://stackoverflow.com/questions/15309113/amazon-cloudfront-doesnt-respect-my-s3-website-buckets-index-html-rules#15528757)
+                        DomainName: !Sub 'assets.externals.io.s3-website-${AWS::Region}.amazonaws.com'
+                        CustomOriginConfig:
+                            OriginProtocolPolicy: 'http-only' # S3 websites only support HTTP
+                # The default behavior is to send everything to AWS Lambda
+                DefaultCacheBehavior:
+                    AllowedMethods: [GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE]
+                    TargetOriginId: Website # the PHP application
+                    # Disable caching for the PHP application
+                    DefaultTTL: 0
+                    MinTTL: 0
+                    MaxTTL: 0
+                    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-cloudfront-distribution-forwardedvalues.html
+                    ForwardedValues:
+                        QueryString: true
+                        # We must *not* forward the `Host` header else it messes up API Gateway
+                        Headers:
+                            - 'Accept'
+                            - 'Accept-Language'
+                            - 'Origin'
+                            - 'Referer'
+                    ViewerProtocolPolicy: redirect-to-https
+                CacheBehaviors:
+                    # Assets will be served under the `/assets/` prefix
+                    -   PathPattern: 'assets/*'
+                        TargetOriginId: Assets # the static files on S3
+                        AllowedMethods: [GET, HEAD]
+                        ForwardedValues:
+                            # No need for all that with assets
+                            QueryString: 'false'
+                            Cookies:
+                                Forward: none
+                        ViewerProtocolPolicy: redirect-to-https
+                        Compress: true # Serve files with gzip for browsers that support it (https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html)
+                # Custom domain name
+                Aliases:
+                    - v2.externals.io
+                ViewerCertificate:
+                    # ARN of the certificate created in ACM
+                    AcmCertificateArn: arn:aws:acm:us-east-1:416566615250:certificate/807df63b-c1be-464b-8b8e-a1d3d2d661bb
+                    # See https://docs.aws.amazon.com/fr_fr/cloudfront/latest/APIReference/API_ViewerCertificate.html
+                    SslSupportMethod: 'sni-only'
+
 # Outputs show up in the CloudFormation dashboard
 Outputs:
     DemoHttpApi: