feat: Etusivu palvelulle ennen palvelun avaamista (#606)

* Lisää uusi next-app väliaikaiselle etusivulle * mahdollista tyypillisen layoutin käytöstä poistaminen sivuilla * parantele sivulayoutin tyyliä, jos sisällölle tulee scrollbar * käytä väliaikaisessa appissa _documenttia, joka on pääasiallisessa next-apissa ja muokkaa Headin titlejä HASSU:sta Valtion liikenneväylien suunnitteluksi * lisää next.configiin assetPrefix, jotta tailwindcss tyylit löytyy * muokkaa kuvien urleja * ohjaa pyynnöt frontendilta /etusivu:lle jos basic auth ei ole kunnossa. Pyydä basic auth /yllapito/kirjaudu-polusta. --------- Co-authored-by: Mikko Haapamäki <mikko.haapamaki@cgi.com>
finnishtransportagency · Feb 16, 2023 · a8dce19 · a8dce19
1 parent 8ad485b
commit a8dce19
Show file tree

Hide file tree

Showing 25 changed files with 354 additions and 51 deletions.
diff --git a/backend/test/lambdaAtEdge/cfUtil.ts b/backend/test/lambdaAtEdge/cfUtil.ts
@@ -0,0 +1,5 @@
+export interface CFResponse {
+  readonly headers: Record<string, Record<string, { value: string }>[]>;
+  readonly status: number;
+  readonly statusText: string;
+}
diff --git a/backend/test/lambdaAtEdge/frontendRequest.test.ts b/backend/test/lambdaAtEdge/frontendRequest.test.ts
@@ -0,0 +1,56 @@
+import { describe } from "mocha";
+import { CFResponse } from "./cfUtil";
+
+const handler = require("../../../deployment/lib/lambda/frontendRequest").handler;
+
+const { expect } = require("chai");
+const authorizedFakeHeader = "Basic " + Buffer.from("${BASIC_USERNAME}:${BASIC_PASSWORD}").toString("base64");
+
+function runTest(uri: string, authenticated: boolean, expectedStatus: number | undefined, expectedLocation?: string) {
+  handler(
+    {
+      Records: [
+        {
+          cf: {
+            request: {
+              headers: authenticated
+                ? {
+                    authorization: [{ value: authorizedFakeHeader }],
+                  }
+                : {},
+              method: "GET",
+              uri,
+            },
+          },
+        },
+      ],
+    },
+    null,
+    (_request: unknown, response: CFResponse) => {
+      const testData = "(uri:" + uri + ", " + (authenticated ? "authenticated" : "unauthenticated") + ")";
+      expect(response.status).to.eq(expectedStatus, "testData:" + testData);
+      if (expectedLocation !== undefined) {
+        expect(response.headers["location"]?.[0].value).to.eq(
+          expectedLocation,
+          "expected redirect location to be " + expectedLocation + " testData:" + testData
+        );
+      }
+    }
+  );
+}
+
+describe("frontendRequest lambda@edge", () => {
+  it("should return correct response for different paths", async () => {
+    runTest("/", false, 302, "/etusivu/index.html");
+    runTest("/something", false, 401);
+    runTest("/yllapito/kirjaudu", false, 401);
+
+    // Basic auth kunnossa
+    runTest("/something", true, undefined);
+    runTest("/yllapito/kirjaudu", true, undefined);
+
+    // Etusivu on auki kaikille
+    runTest("/etusivu", false, undefined);
+    runTest("/etusivu/index.html", false, undefined);
+  });
+});
diff --git a/backend/test/lambdaAtEdge/tiedostotOriginResponse.test.ts b/backend/test/lambdaAtEdge/tiedostotOriginResponse.test.ts
@@ -1,12 +1,12 @@
-// @ts-nocheck
 import { describe } from "mocha";
+import { CFResponse } from "./cfUtil";
 
 const handler = require("../../../deployment/lib/lambda/tiedostotOriginResponse").handler;
 
 const { expect } = require("chai");
 
 const createEvent = (publicationTimestamp: string | null, expirationTimestamp?: string | null) => {
-  const headers = {};
+  const headers: Record<string, unknown> = {};
   if (publicationTimestamp) {
     headers["x-amz-meta-publication-timestamp"] = [
       {
@@ -42,7 +42,7 @@ const createEvent = (publicationTimestamp: string | null, expirationTimestamp?:
 
 describe("Tiedostot publication time handler", () => {
   it("should return 404 for unpublished files based on x-amz-meta-publication-timestamp", () => {
-    handler(createEvent("2222-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent("2222-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("404");
       expect(response.headers).to.eql({
         Expires: [
@@ -56,21 +56,21 @@ describe("Tiedostot publication time handler", () => {
   });
 
   it("should return 200 for published files based on x-amz-meta-publication-timestamp", () => {
-    handler(createEvent("2022-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent("2022-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("200");
       expect(response.headers).to.eql({});
     });
   });
 
   it("should return 404 for unpublished files based on x-amz-meta-expiration-timestamp", () => {
-    handler(createEvent(null, "2000-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent(null, "2000-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("404");
       expect(response.headers).to.be.undefined;
     });
   });
 
   it("should return 200 for published files based on x-amz-meta-expiration-timestamp", () => {
-    handler(createEvent(null, "2222-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent(null, "2222-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("200");
       expect(response.headers).to.eql({
         Expires: [
@@ -84,7 +84,7 @@ describe("Tiedostot publication time handler", () => {
   });
 
   it("should return 404 for unpublished files based on x-amz-meta-publication-timestamp and x-amz-meta-expiration-timestamp", () => {
-    handler(createEvent("2222-03-09T08:31:00.000Z", "2223-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent("2222-03-09T08:31:00.000Z", "2223-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("404");
       expect(response.headers).to.eql({
         Expires: [
@@ -98,7 +98,7 @@ describe("Tiedostot publication time handler", () => {
   });
 
   it("should return 200 for published files based on x-amz-meta-publication-timestamp and x-amz-meta-expiration-timestamp", () => {
-    handler(createEvent("2022-03-09T08:31:00.000Z", "2222-03-09T08:31:00.000Z"), null, (request, response) => {
+    handler(createEvent("2022-03-09T08:31:00.000Z", "2222-03-09T08:31:00.000Z"), null, (request: unknown, response: CFResponse) => {
       expect(response.status).to.eq("200");
       expect(response.headers).to.eql({
         Expires: [

diff --git a/deployment/lib/buildspec/buildspec-dev.yml b/deployment/lib/buildspec/buildspec-dev.yml
@@ -33,6 +33,7 @@ phases:
       - npm run test
       - npm run localstack:stop &
       - npm run sonar
+      - npm run export-under-construction
       - npm run deploy:database
       - npm run deploy:backend
       - npm run deploy:frontend

diff --git a/deployment/lib/buildspec/buildspec-prod.yml b/deployment/lib/buildspec/buildspec-prod.yml
@@ -22,6 +22,7 @@ phases:
   build:
     commands:
       - npm run get-next-version
+      - npm run export-under-construction
       - npm run maintenancemode set
       - npm run deploy:database
       - npm run deploy:backend

diff --git a/deployment/lib/buildspec/buildspec-test.yml b/deployment/lib/buildspec/buildspec-test.yml
@@ -34,6 +34,7 @@ phases:
       - npm run setupenvironment
       - npm run test
       - npm run localstack:stop &
+      - npm run export-under-construction
       - npm run deploy:database
       - npm run deploy:backend
       - npm run deploy:frontend

diff --git a/deployment/lib/buildspec/buildspec-training.yml b/deployment/lib/buildspec/buildspec-training.yml
@@ -32,6 +32,7 @@ phases:
       - npm run setupenvironment
       - npm run test
       - npm run localstack:stop &
+      - npm run export-under-construction
       - npm run maintenancemode set
       - npm run deploy:database
       - npm run deploy:backend

diff --git a/deployment/lib/hassu-frontend.ts b/deployment/lib/hassu-frontend.ts
@@ -113,7 +113,8 @@ export class HassuFrontendStack extends Stack {
       config,
       dmzProxyBehaviorWithLambda,
       dmzProxyBehavior,
-      edgeFunctionRole
+      edgeFunctionRole,
+      frontendRequestFunction
     );
 
     let domain: any;
@@ -187,9 +188,7 @@ export class HassuFrontendStack extends Stack {
       behaviours,
       domain,
       defaultBehavior: {
-        edgeLambdas: frontendRequestFunction
-          ? [{ functionVersion: frontendRequestFunction.currentVersion, eventType: LambdaEdgeEventType.VIEWER_REQUEST }]
-          : [],
+        edgeLambdas: [{ functionVersion: frontendRequestFunction.currentVersion, eventType: LambdaEdgeEventType.VIEWER_REQUEST }],
       },
       cloudfrontProps: { priceClass: PriceClass.PRICE_CLASS_100, logBucket, webAclId },
       invalidationPaths: ["/*"],
@@ -318,17 +317,19 @@ export class HassuFrontendStack extends Stack {
     config: Config,
     dmzProxyBehaviorWithLambda: BehaviorOptions,
     dmzProxyBehavior: BehaviorOptions,
-    edgeFunctionRole: Role
+    edgeFunctionRole: Role,
+    frontendRequestFunction: EdgeFunction
   ): Promise<Record<string, BehaviorOptions>> {
     const { keyGroups, originAccessIdentity, originAccessIdentityReportBucket } = await this.createTrustedKeyGroupsAndOAI(config);
     const props: Record<string, any> = {
       "/oauth2/*": dmzProxyBehaviorWithLambda,
       "/graphql": dmzProxyBehaviorWithLambda,
-      "/tiedostot/*": await this.createPublicBucketBehavior(env, edgeFunctionRole, originAccessIdentity),
+      "/tiedostot/*": await this.createPublicBucketBehavior(env, edgeFunctionRole, frontendRequestFunction, originAccessIdentity),
       "/yllapito/tiedostot/*": await this.createPrivateBucketBehavior(
         "yllapitoBucket",
         Config.yllapitoBucketName,
         keyGroups,
+        frontendRequestFunction,
         originAccessIdentity
       ),
       "/yllapito/graphql": dmzProxyBehaviorWithLambda,
@@ -340,6 +341,7 @@ export class HassuFrontendStack extends Stack {
         "reportBucket",
         Config.reportBucketName,
         keyGroups,
+        frontendRequestFunction,
         originAccessIdentityReportBucket
       );
     }
@@ -364,54 +366,58 @@ export class HassuFrontendStack extends Stack {
     return dmzBehavior;
   }
 
-  private async createPrivateBucketBehavior(
-    name: string,
-    bucketName: string,
-    keyGroups: KeyGroup[],
+  private async createPublicBucketBehavior(
+    env: string,
+    role: Role,
+    frontendRequestFunction: EdgeFunction,
     originAccessIdentity?: IOriginAccessIdentity
   ): Promise<BehaviorOptions> {
+    const tiedostotOriginResponseFunction = this.createTiedostotOriginResponseFunction(env, role);
     return {
       origin: new S3Origin(
-        Bucket.fromBucketAttributes(this, name + "Origin", {
+        Bucket.fromBucketAttributes(this, "tiedostotBucketOrigin", {
           region: "eu-west-1",
-          bucketName,
+          bucketName: Config.publicBucketName,
         }),
         {
           originAccessIdentity,
         }
       ),
       compress: true,
-      cachePolicy: CachePolicy.CACHING_DISABLED,
+      cachePolicy: CachePolicy.CACHING_OPTIMIZED,
       originRequestPolicy: OriginRequestPolicy.CORS_S3_ORIGIN,
-      trustedKeyGroups: keyGroups,
+      edgeLambdas: [
+        { functionVersion: frontendRequestFunction.currentVersion, eventType: LambdaEdgeEventType.VIEWER_REQUEST },
+        {
+          functionVersion: tiedostotOriginResponseFunction.currentVersion,
+          eventType: LambdaEdgeEventType.ORIGIN_RESPONSE,
+        },
+      ],
     };
   }
 
-  private async createPublicBucketBehavior(
-    env: string,
-    role: Role,
+  private async createPrivateBucketBehavior(
+    name: string,
+    bucketName: string,
+    keyGroups: KeyGroup[],
+    frontendRequestFunction: EdgeFunction,
     originAccessIdentity?: IOriginAccessIdentity
   ): Promise<BehaviorOptions> {
-    const tiedostotOriginResponseFunction = this.createTiedostotOriginResponseFunction(env, role);
     return {
       origin: new S3Origin(
-        Bucket.fromBucketAttributes(this, "tiedostotBucketOrigin", {
+        Bucket.fromBucketAttributes(this, name + "Origin", {
           region: "eu-west-1",
-          bucketName: Config.publicBucketName,
+          bucketName,
         }),
         {
           originAccessIdentity,
         }
       ),
       compress: true,
-      cachePolicy: CachePolicy.CACHING_OPTIMIZED,
+      cachePolicy: CachePolicy.CACHING_DISABLED,
       originRequestPolicy: OriginRequestPolicy.CORS_S3_ORIGIN,
-      edgeLambdas: [
-        {
-          functionVersion: tiedostotOriginResponseFunction.currentVersion,
-          eventType: LambdaEdgeEventType.ORIGIN_RESPONSE,
-        },
-      ],
+      trustedKeyGroups: keyGroups,
+      edgeLambdas: [{ functionVersion: frontendRequestFunction.currentVersion, eventType: LambdaEdgeEventType.VIEWER_REQUEST }],
     };
   }
 

diff --git a/deployment/lib/lambda/frontendRequest.js b/deployment/lib/lambda/frontendRequest.js
@@ -16,18 +16,44 @@ exports.handler = (event, context, callback) => {
     // Continue request processing if authentication passed
     callback(null, request);
   } else {
-    callback(null, {
-      status: 401,
-      statusDescription: "Unauthorized",
-      headers: {
-        "www-authenticate": [
-          {
-            key: "www-authenticate",
-            value: "Basic",
-          },
-        ],
-      },
-    });
+    if (request.uri === "/" || request.uri === "") {
+      // Ohjaa juuresta /etusivu:lle
+      callback(null, {
+        status: 302,
+        statusDescription: "Found",
+        headers: {
+          location: [
+            {
+              key: "Location",
+              value: "/etusivu/index.html",
+            },
+          ],
+        },
+      });
+    } else if (
+      request.uri.startsWith("/etusivu") ||
+      request.uri.startsWith("/oauth2") ||
+      request.uri.startsWith("/fonts") ||
+      request.uri === "/favicon.ico"
+    ) {
+      // Etusivu ennen palvelun avaamista yleisölle on suojaamaton.
+      // /oauth2 pitää olla avoin, jotta kirjautuminen toimii
+      callback(null, request);
+    } else {
+      // Pyydä kaikkialla muualla Basic Authentication-tunnukset
+      callback(null, {
+        status: 401,
+        statusDescription: "Unauthorized",
+        headers: {
+          "www-authenticate": [
+            {
+              key: "www-authenticate",
+              value: "Basic",
+            },
+          ],
+        },
+      });
+    }
   }
 };
 

diff --git a/package.json b/package.json
@@ -154,6 +154,8 @@
     "dev": "VERSION=`git rev-parse --abbrev-ref HEAD` next dev",
     "build": "next build",
     "start": "next start",
+    "export-under-construction": "next build ./under-construction && next export -o public/etusivu ./under-construction",
+    "dev-under-construction": "next dev ./under-construction",
     "cypress": "cypress",
     "generate:velhoapi": "MSYS_NO_PATHCONV=1 cross-env docker run --rm --env-file .env.test -e VELHO_AUTH_URL -e VELHO_API_URL -e VELHO_USERNAME -e VELHO_PASSWORD -e VELHO_ACCESS_TOKEN=\"$(ts-node --project=tsconfig.cdk.json -r dotenv/config ./tools/velho/authenticate.ts dotenv_config_path=.env.test)\" -v $INIT_CWD:/work ${ACCOUNT_ID:=283563576583}.dkr.ecr.eu-west-1.amazonaws.com/hassu-build-image:$(cat .buildimageversion) /work/tools/velho/gradlew -p /work/tools/velho --info",
     "postgenerate:velhoapi": "ts-node --project=tsconfig.cdk.json ./tools/velho/processMetaData.ts ./backend/src/velho/metadata.json ./common/generated/velhometadata.json ./common/generated/ely.json",

diff --git a/public/.gitignore b/public/.gitignore
@@ -0,0 +1 @@
+etusivu
diff --git a/public/rata_ja_tie_background.jpeg b/public/rata_ja_tie_background.jpeg
diff --git a/src/components/layout/ConditionalWrapper.tsx b/src/components/layout/ConditionalWrapper.tsx
@@ -0,0 +1,14 @@
+import React, { FC, ReactNode, ComponentProps } from "react";
+
+type ConditionalWrapperProps<T extends FC> = {
+  condition: boolean;
+  wrapper: T;
+  children?: ReactNode;
+  wrapperProps?: Omit<ComponentProps<T>, "children">;
+};
+
+function ConditionalWrapper<T extends FC>({ condition, wrapper, children, wrapperProps }: ConditionalWrapperProps<T>) {
+  return <>{condition ? wrapper({ children, ...wrapperProps }) : children}</>;
+}
+
+export default ConditionalWrapper;