Zenn
📝

AWS で静的ページをデプロイする

2022/03/14に公開
AWS
Lambda
S3
CloudFront
tech

こんにちは、株式会社palan の xR事業部 でエンジニアをやっている 笹井 です。

今回は AWS で静的ページをデプロイする方法について紹介します。

概要

この記事でできること

この記事でできないこと

  • 専用ドメインを設定する

作業

事前準備

名称

  • {{ project title }}-bucket
  • {{ project title }}-distribution
  • {{ project title }}-auth-function
  • {{ project title }}-auth-role

AWS

S3

  • [バケットを作成]

  • バケット名:
    {{ project title }}-bucket
  • AWSリージョン:
    バージニア北部

  • [バケットを作成]

CloudFront

  • [ディストリビューションを作成]

  • オリジンドメイン:
    先ほど作成したS3バケット

  • S3バケットアクセス:
    はい、OAI を使用します (バケットは CloudFront のみへのアクセスとなるように制限できます)
  • オリジンアクセスアイデンティティ:
    [新しいOAIを作成]
  • バケットポリシー:
    はい、バケットポリシーを自動で更新します

  • オブジェクトを自動的に圧縮:
    No
  • ビューワープロトコルポリシー:
    Redirect HTTP to HTTPS

  • Legacy cache settings:
    • ヘッダー:
      [次のヘッダーを含める]
      • ヘッダーを追加:
        [Authorization]
        [Origin]
        [Access-Control-Request-Method(カスタムを追加)]
        [Access-Control-Request-Headers(カスタムを追加)]

  • デフォルトルートオブジェクト - オプション:
    index.html
  • 説明 - オプション:
    {{ project title }}-distribution
  • [ディストリビューションを作成]

Lambda

  • 右上が[バージニア北部]であるか確認
  • [関数の作成]

  • 関数名:
    {{ project title }}-auth-function
  • ランタイム:
    [Node.js 12.x]

  • デフォルトの実行ロールの変更:
    • AWS ポリシーテンプレートから新しいロールを作成:
      • ロール名:
        {{ project title }}-auth-role
      • ポリシーテンプレート - オプション:
        基本的な Lambda@Edge のアクセス権限 (CloudFront トリガーの場合)
  • [関数の作成]

  • index.js にてをコピペ
    • BASIC認証あり
      "use strict";
exports.handler = (event, context, callback) => {

    // Get request and request headers
    const request = event.Records[0].cf.request;
    const headers = request.headers;

    // MEMO: BASIC認証を有効化する
    // Configure authentication
    const authUser = "hogeUser";
    const authPass = "hogePass";

    // Construct the Basic Auth string
    const authString = "Basic " + new Buffer(authUser + ":" + authPass).toString("base64");

    // Require Basic authentication
    if (typeof headers.authorization == "undefined" || headers.authorization[0].value != authString) {
        const body = "Unauthorized";
        const response = {
            status: "401",
            statusDescription: "Unauthorized",
            body: body,
            headers: {
                "www-authenticate": [{key: "WWW-Authenticate", value:"Basic"}]
            },
        };
        callback(null, response);
    }

    // MEMO: サブディレクトリを有効化する
    const olduri = request.uri;
    const newuri = olduri.replace(/\/$/, "\/index.html");
    request.uri = newuri;

    // Continue request processing if authentication passed
    callback(null, request);
};
    • BASIC認証なし
      "use strict";
exports.handler = (event, context, callback) => {
  // Get request and request headers
  const request = event.Records[0].cf.request;
  const headers = request.headers;

  // MEMO: サブディレクトリを有効化する
  const olduri = request.uri;
  const newuri = olduri.replace(/\/$/, "/index.html");
  request.uri = newuri;

  // Continue request processing if authentication passed
  callback(null, request);
};
  • authUser と authPass を任意のものに変更
  • [Deploy]

  • [アクション]
    • [Lambda@Edge へのデプロイ]
      • ディストリビューション:
        先ほど作成したCloudFrontディストリビューション
      • CloudFrontイベント:
        ビューアーリクエスト
      • デプロイ時に...:
        チェック
      • [デプロイ]

S3

  • 希望のファイルをアップ

補足

なんでリージョンをバージニア北部にしているの？

  • リージョンを揃えないと Lambda で設定したBASIC認証やサブディレクトリの有効化が即時反映されないからです！

Discussion