JavaScriptメモ

案件で必要になったのでHeadless CMSの Strapiを利用するためのメモ

続きを読む

ES2018で追加された機能
従来は指定順で取得しなくてはいけなかったマッチグループに名前ををつけて任意の名前で取得できる

const word = "helllllo"
const result1 = word.match(/he(l+)o/)
const result2 = word.match(/he(?l+)o/)
console.log(result1[1]) // 'lllll'
console.log(result2.groups)// {myGroup: 'lllll'}

https://js-next.hatenablog.com/entry/2018/09/06/212724

ネストされたオブジェクトの分割代入ができる

const nested = {
  foo : {
    bar : "aaa"
  },
  baz: ["bbb"]
}

const {foo:{ bar }} =  nested
const {baz:[ arr ]} =  nested

console.log(bar) // "aaa"
console.log(arr) // "bbb"
console.log(foo)// undefined)
console.log(baz)// undefined

TypeScript の構造部分型のため以下のようにFooBarBaz型の構造部分であるFooBarに値を代入しても型エラーにならない

type FooBar = {
  foo:string;
  bar:number;
}
 
type FooBarBaz = {
  foo:string;
  bar:number;
  baz:boolean;
}
 
const obj: FooBarBaz = {
  foo:"1",
  bar:1,
  baz:true
}
 
const obj2: FooBar = obj //型エラーにならない

https://numb86-tech.hatenablog.com/entry/2020/02/02/100816

docker compose up イメージ＆コンテナ作成＆起動
docker compose up -d デタッチド・モード: バックグラウンドでコンテナを実行し、新しいコンテナ名を表示
docker compose down コンテナを停止し、 up で作成したコンテナ・ネットワーク・ボリューム・イメージを削除
docker compose down -v Compose ファイルの `volumes` セクションの名前付きボリュームを削除また、コンテナがアタッチしたアノニマス・ボリュームも削除

Create React Appでは基本的には自身が所属する下層にReact Appを生成します。

fooというディレクトリにいる場合に以下のコマンドを入力すると /foo/myApp/にアプリケーションがインストールされます。

create-react-app myApp
cd myApp

下層ではなくfooに属するアプリケーションを作成したい場合は以下のコマンドを実行します。

create-react-app .

GitHubでバージョン確認してローカルの環境が古ければアップデート

$ sam --version
# SAM CLI, version 1.15.0

$ brew upgrade aws-sam-cli

$ sam --version
SAM CLI, version 1.30.0

結論を書くとpresigned_urlを発行するlambda FunctionにS3に対するput操作の権限を与えなくちゃいけない

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject"
      ],
      "Resource": [
        "arn:aws:s3:::[bucket名]/*"
      ]
    }
  ]
}

などのjsonを用意して

aws iam put-role-policy --role-name [xxx] --policy-name [xxx] --policy-document file://xxxx.json

などのコマンドで権限を追加してあげる

json.dumpsでJSON文字列に変換して表示する

def lambda_handler(event):
    return {
        'statusCode' : '200',
        'body': json.dumps(event)
    }

S3

バケットの作成
aws s3 mb s3://[backet-name]

バケットをWebサイトとして公開
aws s3 website s3://[backet-name] --index-document index.html

ローカルのxxxディレクトリの内容をs3にアップ
aws s3 sync ~/xxx/ s3://[backet-name]


バケットに用意したpolicy.jsonのpolicyを適用
aws s3api put-bucket-policy --bucket [backet-name] --policy file://policy.json

{
    "Version":"2012-10-17",
    "Statement":[
        {
        "Effect":"Allow",
        "Principal": "*",
        "Action":["s3:GetObject"],
        "Resource":"arn:aws:s3:::[backet-name]/*"
        }
    ]
}

DynamoDB

DynamoDBでテーブルの作成
aws dynamodb create-table \
--table-name photos \
--attribute-definitions \
AttributeName=photo_id,AttributeType=S \
--key-schema \
AttributeName=photo_id,KeyType=HASH \
--provisioned-throughput \
ReadCapacityUnits=10,WriteCapacityUnits=5\


Option

指定したユーザーでコマンドを実行
aws [command] -profile [user-name]

template.yamlのGlobalsにCORS設定を追加

Globals:
  Function:
    Timeout: 3
  Api:
    Cors:
      AllowMethods: "'*'"
      AllowHeaders: "'*'"
      AllowOrigin: "'*'"

REST APIのheadersにAccess-Control-Allowを設定する

return {
    "statusCode": 200,
    "headers": {
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "GET,OPTIONS",
        "Access-Control-Allow-Origin": "*"
    },
    "body": JSON.stringify(dbOutput)
};

AWS Lambda[米国東部（バージニア北部]の管理画面から新たにLambda関数を作ります。

関数名は適当にして、ランタイムはnode.js 14.x 、デフォルトの実行ロールの変更は「AWS ポリシーテンプレートから新しいロールを作成」で適当なrole名をつけて、ポリシーテンプレートから「基本的なLambda@Edgeのアクセス権限（CloudFrontトリガーの場合」を選択します。



index.jsには以下の関数を設定しておきます。

exports.handler = (event, context, callback) => {

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

    // Configure authentication
    const authUser = 'user';
    const authPass = 'pass';

    // 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);
    }

    // Continue request processing if authentication passed
    callback(null, request);
};

エディタ上の「deploy」を押して保存をしたら、画面右上の「アクション」から「Lambda@Edgeへのデプロイ」を選択。

CloudFront トリガーのディストリビューションにはBasic認証をかけたいCloudFrontを指定。
CloudFrontイベントはビューアーリクエストを指定。
Lambda@Edge へのデプロイを確認にチェックを入れます



これでデプロイすればBasic認証が設定されています。(キャッシュが有効な場合にはBasic認証が表示されないのでブラウザのプライベートモード等で確認した方がよいです、

CloudFrontのBehavior画面でもLambda@Edgeが適用されているが確認できます。

AWS CloudFront 経由でS3にアクセスで色々と試していると「We have failed to update your Amazon S3 Bucket permissions. You will have to manually add the update your permissions.」というエラーがでることがあった(原因はわかないけど



S3バケットのバケットポリシーを見に行くと以下のようになってたので

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "XXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cf2-test/*"
        }
    ]
}

CloudFrontからのアクセスを許可するようにPrincipalを変更したらちゃんとアクセスできるようになりました。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cf2-test/*"
        }
    ]
}

まずはAWS S3の画面からバケットを作成、バケット名に適当な名前を指定してリージョンは「ap-northeast-1(東京)」をします。

次にCloudFront管理画面から、「Create Distribution」から新規のDistributionを作成。

Select a delivery method ではWebしか選択できなくなったので何も考えずに「Get Started」をクリック。

Origin Domain Nameで取得したいS3バケットを指定
Restrict Bucket AccessはYesにしてOrigin Access Identity は Create New Identity を選択しておきます。
Grant Read Permissions on Bucket では　Yes Update Bucket Policyを選択します。




加えて画面下部のDefault Root Objectは「index.html」を指定しておきます。

これで画面最下部の「Create Distribution」を押せば新規のDistributionを作成されます。

一覧画面のStatusが「Deployed」になればDistributionの作成完了です。

これでCloudfrontのDomainName+S3のファイル名でファイルにアクセスできるようになります。

PCを機種変したので最初(Hello world)から復習。

まずは環境構築から(参考)

- Dockerのインストール
- Homebrewのインストール

## AWS SAM CLI のインストール

brew tap aws/tap
brew install aws-sam-cli
sam --version # インストールの確認

### プロジェクトの作成

sam init # ウィザードに沿ってインストール
cd sam-app
sam build
sam local start-api

これでローカルでAPIサーバーが立ち上がったので以下のURLにアクセスするとHello worldのJSONが表示される

http://127.0.0.1:3000/hello

GitHub ActionsでAWS S3にファイルをアップするには

- AWS S3にアップ可能な権限のあるIAMユーザーを作成して
- GitHub Actions経由で AWS CLIを用いてAWS S3にアップする

という流れをとる

## AWS S3にアップ可能な権限のあるIAMユーザーを作成

IAMに移動してまずはAWS S3にアクセス可能なポリシーを作成します


### IAMポリシーを作成

IAMポリシーに移動したらポリシーの作成をクリック。



ポリシーの作成画面でJSONを選択して以下のJSONを入力

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::[バケット名]",
                "arn:aws:s3:::[バケット名]/*"
            ]
        }
    ]
}

適当な名前を付けてポリシーを作成します。



### IAMユーザーを作成

IAMユーザーに移動したらユーザーの追加をクリック。



ユーザー名を入力して、アクセスの種類はプログラムによるアクセスを選択




アクセス権の設定では既存のポリシーを直接アタッチを選択して先程作成したIAMポリシーにチェックを入れます。

タグはは無視してすすめるとS3ユーザーが作成されて、アクセスキーIDとシークレットアクセスキーを確認できます。

### GitHub Secretsの設定

まずはsettingのSecretsにAWSの情報を登録します。`S3_ACCESS_KEY_ID` や　`S3_SECRET_ACCESS_KEY` 、 `S3_BUCKET` などはこちらで登録してしまいコミットするコードにには含めないでおきましょう。



### GitHub Actionsの設定

.github/workflows/deploy.ymlというファイルを以下の内容で作成します

name: deploy to s3

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: |
          npm install
          npm run build
      - uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.S3_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1
      - name: Copy Files to s3
        run: |
          aws s3 sync ./build s3://${{ secrets.S3_BUCKET }}

これは masterブランチにpushがあった場合にCIで一度npm run buildを実行して buildディレクトリの内容をS3にアップするというものです。

これでGitHub ActionsでAWS S3にファイルをアップすることができます

追記
CloudFrontのDistributionsのBehaviorsのFunction associationsにVersion月のFunction ARNが設定されているのでここをアップデートすればいけました。Edge locationまでのデプロイに結構時間がかかるけど

AWS S3にSPAをアップしてみる その2 Basic認証編で作成した関数のID/ PASSを更新しようとしたところうまくいかず単純にデイプロすれば反映されると思ったが反映されずトリガーとして新たためて設定する必要があるらしい。

Lambda@Edge 用の Lambda 関数の編集 - Amazon CloudFront

AWS S3にSPAをアップしてみる その1ではAWS S3にSPAをアップしてみましたが、次は作成中のサイトなどを Basic認証をつけて公開してみたいと思います

CloudFrontのディストリビューションを作成

CloudFront Distributions のページから「Create Distivution」ボタンを押下してディストリビューションを作成します。

Select a delivery method for your content.

と聞かれるのでWebを選択して「Get Started」

Origin Domain Nameにはspa-sample-x.s3.amazonaws.comといった具合にS3のURLを
Restrict Bucket AccessをYesに
Grant Read Permissions on BucketをNoに
Viewer Protocol PolicyをHTTPS Onlyに
Allowed HTTP MethodsをGET, HEAD, OPTIONS, PUT, POST, PATCH, DELET

ache and origin request settingsをUse legacy cache settingsにして
Object CachingをCustomizeにしてすべての「TTLを0に

Default Root Objectをindex.htmlに
ErrorPagesで403に 0 / 200を割り当てておきましょう

AWS CloudFront とLambda@Edge でBasic認証を設定

ステップバイステップでAWS S3にSPAをアップしてみます。

初回は手動でアップ。

AWS S3の画面からバケットを作成

バケット名は「spa-sample-x」としておきましょう。
リージョンは「ap-northeast-1(東京)」

ブロックパブリックアクセスのバケット設定で「パブリックアクセスをすべて ブロック」のチェクを外して、表示された「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトがパブリックになる可能性があります。」という警告の「現在の設定により、このバケットとバケット内のオブジェクトがパブリックになる可能性があることを承認します。」にチェックを入れて「バケットを作成」をクリックします。

S3バケットの一覧に戻るので作成したS3バケットをクリックしてプロパティを選択して画面の最後らへんにある「静的ウェブサイトホスティング」を編集して有効に。

インデックスドキュメントに「index.html」、エラードキュメントに「error.html」を指定して変更の保存をクリック。プロパティにURLが表示されるようになりました。

最後にアクセス許可のバケットポリシーを設定する必要があります。以下のバケットポリシーを適用しましょう。

{
  "Version":"2012-10-17",
  "Statement":[{
     "Sid":"PublicReadForGetBucketObjects",
      "Effect":"Allow",
     "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::spa-sample-x/*"
      ]
    }
  ]
}

ビルドしたSPAファイル一式をS3にアップすれば表示されたURLで確認できます。


ルーティングのあるパターンで見てみましょう。

Reactとreact-router-domでかんたんなルーティングサンプルを作成して、ビルドしてS3にアップ。

import { BrowserRouter, Route, Switch,Link } from 'react-router-dom';

const Index = () => (
  <div>
    <p>index</p>
    <Link to="/two">two</Link>
  </div>
)

const Two = () => (
  <div>
    <p>two</p>
    <Link to="/">index</Link>
  </div>
)

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Index}/>
        <Route exact path='/two' component={Two}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

順調にどうさしていますが、http://spa-sample-x.s3-website-ap-northeast-1.amazonaws.com/twoでリロードすると404になってしまいます。

「静的ウェブサイトホスティング」を編集してエラードキュメントを「index.html」に変更すればリロードできるようになります。

localでAWS SAMのAPIを確認するには以下のコマンドでAPIサーバーを立ち上げます。

sam local start-api

AWS SAMを雛形拡張しているのでメモ

Resources:
  HelloWorldFunction:
    Type: AWS::Serverless::Function
      CodeUri: hello-world/
      Handler: app.lambdaHandler
      Runtime: nodejs12.x
      Events:
        HelloWorld:
          Type: Api 
          Properties:
            Path: /hello
            Method: get

雛形のAPIエンドポイントは http://127.0.0.1:3000/hello のみだけど http://127.0.0.1:3000/hello2を追加する。
Propertiesに記述をついしていくだけで大丈夫

Resources:
  HelloWorldFunction:
    Type: AWS::Serverless::Function
      CodeUri: hello-world/
      Handler: app.lambdaHandler
      Runtime: nodejs12.x
      Events:
        HelloWorld:
          Type: Api
          Properties:
            - Path: /hello
              Method: get
            - Path: /hello2
              Method: get

lambda内ではevent.pathでURLを取得できるのでそちらで分岐すればok

exports.lambdaHandler = async (event, context) => {
    try {
        // const ret = await axios(url);
        console.log(event.path)
        response = {
            'statusCode': 200,
            'body': JSON.stringify({
                message: event.path === '/hello' ? 'hello world': 'hello world2',
                // location: ret.data.trim()
            })
        }
    } catch (err) {
        console.log(err);
        return err;
    }
    return response
};

変更後はsam build してからsam local start-apiでローカルのAPIエンドポイントを追加できる