以下、AWSへの問い合わせ内容です。
API Gateway の HTTP API におけるルートは、REST API の場合におけるリソースパスと HTTP メソッドに相当致します。
そのため、すでにご認識を頂いておりますように、HTTP API の Lambda 統合では、入力イベントに含まれる routeKey や rawPath を通じて REST API の入力イベントにおける resource や path と同様の値を取得頂けます。

• HTTP API のルートの使用 – Amazon API Gateway
  https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/http-api-develop-routes.html
  （抜粋）
  「ルートは、HTTP メソッドとリソースパスという 2 つの部分で構成されます (例: GET /pets)。」

なお、routeKey や rawPath といった名称より、当該の HTTP API における Lambda 統合では、デフォルト設定であるペイロード形式バージョン 2.0 を選択頂いているものとお見受けをしておりますが、入力イベントに含まれるこれらの要素名は Lambda 統合で選択頂くペイロード形式バージョンに応じて異なります。
また、routeKey につきましては、REST API の場合における resource と同様に、API 上のルート設定に応じて、API クライアントからの具体的なリクエストパスではなく $default や {proxy+} といった複数のリクエストパスに合致し得る値が保持される場合がございます点にご注意をお願い申し上げます。

The post REST-APIとHTTP-APIのイベントペイロード名称 first appeared on アスキー(asQii).

下記のCORSエラーがクライアントコンソールで発生します。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource

オリジンはS3です。

1 オリジンのレスポンスヘッダーポリシーにSimpleCORSを設定してもエラー発生
2 linkの中にcrossorigin=”anonymous”を設定してもエラー発生

一方、edgeの場合は上記1,2に関係なくエラーは発生しません。

これはブラウザに起因するもので対応できないのか、　わかる方教えてください。

The post PWAをChromeで実行するときmanifest.jsonのダウンロードエラー（未解決） first appeared on アスキー(asQii).

　AppSyncのウィザードで作成する場合、モデルフィールドの設定においてタイプがIDとあります。実際タイプをIDにしてDynamoDBのパーティションキーに設定するとクエリで取得できます。この場合でもDynamoDBのパーティションキーは「項目名(String)」と表示されています。
　DynamoDBコンソールから作成(デフォルト設定、カスタマイズ設定でも同じ)した場合、パーティションキーのタイプには数値、バイナリ、文字列しかなく、文字列で作成すると同様に「項目名(String)」となります。しかし、この場合クエリからは以下のようなエラーとなります。
　The provided key element does not match the schema (Service: DynamoDb, Status Code: 400, Request ID:〜)
IDとStringの違いと思うのですが、ウィザードでは可能なDynamoDBのタイプIDを、直接DynamoDB作成で指定する方法がわかりませんでした。ウィザードで作成したテーブルで運用できているので、以下をサポートへ質問しました。
————————————————————————–
AppSyncのウィザードで作成する場合、モデルフィールドの設定においてタイプがIDとあります。タイプをIDにしてDynamoDBのパーティションキーに設定してもDynamoDBのパーティションキーは「項目名(String)」と表示されています。違いは何でしょうか？
————————————————————————–

回答
　AppSync ではオブジェクトタイプのフィールドのスカラー型として、ドキュメント [1] の型を定義しております。その中でも ID 型はオブジェクトの一意な識別子を表しております。
[1]AWS AppSync のスカラー型 – AWS AppSync
　https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/scalars.html
　まとめると「IDはオブジェクトの一意な識別子。このスカラーは、String のようにシリアル化されますが、人間が読めることは意図していない、DynamoDB ではパーティションキーとソートキーは文字列、数値、またはバイナリとして定義される必要がある。そのため、AppSync における ID 型は DynamoDB では String 型として格納されている。」

[2] データ型 – Amazon DynamoDB でサポートされるデータ型と命名規則 – Amazon DynamoDB
　https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/HowItWorks.NamingRulesDataTypes.html#HowItWorks.DataTypes

　まとめると「テーブルまたはセカンダリインデックスを作成するときは、各プライマリキー属性 (パーティションキーとソートキー) の名前とデータ型を指定する必要があり、各プライマリキー属性は、文字列、数値、またはバイナリとして定義する必要がある。」

　ちょっと消化不良なのですが、特に問題は起こっていないので良しとしました。

The post AppSyncのウィザードから作成したDynamoDBのIDフィールド first appeared on アスキー(asQii).

　WordPressでファビコンを使う場合、メニューから「設定 ー 一般 ーサイトアイコン」に画像を設定すればファビコンが表示されます。ここにSVG画像を設定すると次の問題が発生しました。
　１　サイトアイコンは512×512サイズが良いとあるが、SVGはエラーになる。
　２　設定時の画像の切り抜きもできない(画像データではなくベクターデータなので当たり前？)。
　３　iPad/iPhoneへリンクをホーム画面に追加する時、アイコンではなくサイトのタイトル1文字になる。
３が最も影響大なので、結局SVGをPNGに変換して使うことになってしまいました。ブログのアイキャッチ(SVGロゴ)はSVGファイルです。

　※ SVGでもファビコンは表示されます。apple-touch-icon.pngという名前で表示できるようなこともネット記事で見かけますが、いずれにしても画像ファイルにする必要がありそうです。

The post iPad/iPhoneのホーム画面に追加のアイコン　SVG画像 first appeared on アスキー(asQii).

Google Search Consoleの設定

• 以前に取得していたのでドメインプロパティとURLプレフィクスプロパティを追加
• URLプロパティを選択して所有権の確認→HTMLタグのcontent=の部分のキーを取得

All in one SEOの設定

• 一般設定のウェブマスターツール – Google Search Console – Google認証コードに先ほどのキーを入力
• Google Search Consoleにチェックマークがつく緑の枠とマークがついたら認証完了、ウェブマスターツール – Googleアナリティクスは使わない。
• 一般設定のパンくずリストを有効化、高度な設定のTruSEO スコアとコンテンツ・見出し分析・投稿タイプ列をチェック、自動更新は全て
• 検索の外観 – 全体設定
  　全体設定　サイトのタイトル＝サイトのタイトル、メタディスクリプション＝キャッチフレーズ
  　コンテンツタイプ　検索結果に表示、投稿・固定ページともにタイトルとコンテンツの抜粋
  　タクソノミー　カテゴリは検索結果に表示・タイトル・説明、タグは検索結果に表示しない
• サイトマップ　有効化、投稿・固定ページ・カテゴリのみチェックを残す。高度な設定から画像を除外する。

The post WordPressで公開〜SEO対策 first appeared on アスキー(asQii).

　無料で公開したいところです、そうなるとWordPress.comか無料のレンタルサーバーになります。どちらも今ひとつ使う気になれませんでした。一応AWSの使い手でもあるのでLightsailを選択、Localで作成→エクスポート→Lightsailにインポートの手順で実行します。WordPressの作成、Lightsailの起動については色々な方が書かれているので省略して、ポイントのみ記述します。

1 開発ツールはLocal、テーマはX-T9を使い、いったんLocalでX-T9のデモサイトを基に改造

2 LightsailをLinux 3.5$で東京 Aゾーンに作成

• ネットワーキングタブで静的IPのアタッチ(*静的IPのアタッチはコストに含まれています)
• 接続タブでSSH接続し、下記を実行
  cat bitnami_application_passwordでパスワードを表示
  cat bitnami_credentialsでユーザーとパスワードを表示
• サイトの表示(http://静的IP/)、管理者サイトの表示(http://静的IP/wp-login.php) * wp-adminでも良い

3 Localに作成したサイトをAll-in-One WP Migrationでエクスポートし、Lightsailにインポート

• Lightsailのアップロードはデフォルトで80Mなのでpost_max_sizeとupload_max_filesizeを256Mに変更
  sudo vi /opt/bitnami/php/etc/php.ini
• 変更後再起動
  sudo /opt/bitnami/ctlscript.sh restart

4 ナビゲーションの説明の英語を表示
　sudo vi /opt/bitnami/wordpress/wp-includes/blocks/navigation-link/style.min.css
　以下のdisplay:noneを変更
　.wp-block-navigation-item__description{display:block}

5 ドメインの設定

• LightsailなのでRoute53にしたいところだが、すでに保有しているGoogle Domainsで設定https://domains.google.com/
• DNSのカスタムレコードにLightsailのアドレスを設定

6 Lightsailをhttpsに変更(デフォルトはhttp)

• bncert-toolを使う
  sudo /opt/bitnami/bncert-tool
  ドメイン(f3i.biz)を指定
• www.f3i.bizを追加して下記を設定したらうまくいかなかったので、とりあえずf3i.bizのみ
  Enable HTTP to HTTPS redirection [Y/n]: y
  Enable non-www to www redirection [Y/n]: n
  Enable www to non-www redirection [y/N]: n
• 同意してメルアド入力
• 構成が開始されてSuccessでOK

7 Lightsailにインポートした際にリンクが書き換えられるので対象のURLを変更

• ナビゲーション
• 問い合わせボタン
• ロゴの画像リンク
• ドメインを含む絶対パス(https://f3i.biz/〜)で指定する

8 問い合わせ(Contact from7)

• AWSなのでSESを使いたいところだが、Gmailを使う
• Contact form 7に加えてWP Mail SMTPプラグインの設定を行う必要がある
  WP Mail SMTPの設定
  メーラー : Google/gmail 送信元アドレス : f3infini@tafu1964
  承認済みリダイレクト URI　https://connect.wpmailsmtp.com/google/
  保存
• エラー対応
  スパム対応としてAkismet Anti-Spamを最新に更新して有効化する。
  Get Personal Planを選択しAPIキーを発行、Wordpressのプラグインに戻り手動でAPIキーを設定

9 Googleの設定(https://sossy-blog.com/useful/559/#rtoc-5)

• Google Cloud Platformでf3infini@gmail.comでログイン
• プロジェクトを作成、組織なし
• プロジェクトを選択し、Gmail APIを有効化する
• 認証情報を作成
• 使用するAPI : GmailAPI
• ユーザーデータ
• アプリ情報のアプリ名 : xxx
• ユーザーサポートメール : xxx@gmail.comを選択
• アプリのロゴなし
• デベロッパーの連絡先情報はxxx@gmail.com
• スコープは何もせず次へ
• oAuthはウェブアプリケーション, xxxxx
• 承認すみのJavaScript https://f3i.biz
• 承認済みリダイレクト URI　https://connect.wpmailsmtp.com/google/
• 作成を実行
• 作成されたクライアントID xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
• クライアントシークレット : xxxxxxxxxxxxxxxxxxx
• OAuth同意画面を公開、OAuth同意画面メニューからアプリを公開すると本番環境になる

10 WP Mail SMTPで必要な項目の設定

• クライアントIDとクライアントシークレットを設定
• 保存すると許可するメッセージが表示されるのでxxx@gmail.comでログイン
• 詳細を押すとwpmailsmtp.com（安全ではないページ）に移動が出るので選択
• 許可を求めるので続行
• WP Mail SMTPに戻るので保存
• WP Mail SMTPのツールでテスト（xxx@gmail.com）

11 reCAPTCHAのインストール

• https://www.google.com/recaptcha/about/
• v3 Admin Consoleを選択
• Googleコンソールにログイン
• ラベルにxxx、ドメインにf3i.biz、規約に同意して送信
• サイトキー : xxxxxxxxxxxxxxx、シークレットキー / xxxxxxxxxxxxxxxxxxxxxxxxxx
• WordPressのお問い合わせ「インテグレーション」からreCAPTCHA(v3)のインテグレーションのセットアップを実行
• サイトキーとシークレットキーを入力し変更を保存
• 「reCAPTCHAはこのサイト上で有効化されています」が表示

12 以下のプラグインは削除

• Hello Dolly
• Jetpack
• Simple Lightbox 
• TaxoPress
• VK Dynamic If Block
• VK Link Target Controller
• All in One SEOをインストールすると自動でインストールされた以下は削除
  OptinMonster、Google Analytics for WordPress by MonsterInsights

The post WordPressでの公開 first appeared on アスキー(asQii).

　AWS上でシステムが完結すれば良いのですが、オンプレのシステムにアクセスする必要がある時、APIGateway – Lambda – VPC – ALB/NLB – ダイレクトコネクト – プライベートネットワークのような形になろうかと思います。

　オンプレのWebシステムがシンプルなWebサービスやマイクロサービスであれば特に問題ありませんが、通常の画面を返すようなWebサイトだと、html上のリンクがオンプレ上のアドレスや相対パスになっていたり、リダイレクトを指示しているケースがあります。その場合、当然ですが、アクセス元のブラウザに正しく表示されません。更にヘッダー等でトークン等を認証している場合もあります。

　基本的には「インターネット→API Gateway（※greedy パス変数を設定）→ (VPC Link) → VPC内  Network LoadBalancer → (Direct Connect) → オンプレWeb サイト」の流れになるでしょう。

　自分がコントロールしているシステムであれば対応もさほど難しくは無いのですが、色んなパッケージ製品やERP、他社でSIされたシステムが対象となると「サポート対象外です」とか言われて、情報提供してくれません。Chromeで取得したHARファイルから拾うしかなく大変でした。

　最終的には①greedyパス変数②受信リクエスト(ヘッダー、パス)とレスポンスコードのマッピング③特定の条件下のクエリパラメータをパスの書き換えで変換するの方法でクリアすることが出来ました。

　少し③について説明します。HTTP APIのパラメータマッピングではすべての受信リクエストに対して変換が適用されるので、特定条件の場合のみパラメータを追加したいというような対応が出来ません(当時はそのようにAWSから回答頂きました。機能要望としてはあげてもらいましたので、今は可能になったかも？)。

クエリパラメータであることから、パラメータを含めたパスの書き換えで行ってみたところ、問題なく特定の条件下でパラメータの追加の有無が可能になりオンプレシステムにも連動できました。パラメータのマッピングをパスのマッピングで/aaa?prm01=val01&prm02=val02のように上書きするって感じです。念の為AWSにも確認しましたが、問題ありませんと回答頂きました。

　その他以下のことがわかりました。

1. VPCリンクを使用するとき、NLB DNS 名の設定がある。デフォルトではhttpはOKだが、httpsにする場合はNLB 側で TLSのリスナー設定が必要(内部ネットワークなのでhttpで不都合はない)。
2. VPCLinkと接続されたNLB 、VPCピアリングを経由する構成においても、別 VPC 内に配置されたリソースよりレスポンスを受け取ることは可能。

The post APIGateway(HTTP API)からオンプレシステムへの連携 first appeared on アスキー(asQii).

対応
　Android スマートフォンや iPhone (iOS) は AppStream 2.0 のクライアントオペレーティングシステムとしてサポートされていない。スマートフォンからアクセスした際にブラウザにて PC 版のサイトを表示するオプションを有効にすることで、接続が可能となる場合がある(サポート外)。AWSでは機能要望として担当部署までフィードバックすると

WorkLinkが提供されなくなったので、スマホ用のセキュアリモートアクセス環境を考えました。AppStreamはコストが高口なるので、結局ワークに紹介しましたモバイルアクセスプラットフォームを作りました。

The post AppStreamのクライアント first appeared on アスキー(asQii).

対応
　AWSの技術チームから直接連絡(この時点ではオフレコ)があった。なんとサービス終了予定のためコンソールのメニューから外しているらしい。今後はAppStreamに移行していくとのこと。これからの予定だったため実害はなかったが、クラウドサービスはやはりこういった事があるのであまりマイナーなサービスは使わない方が良い。

The post WorkLink　東京停止 first appeared on アスキー(asQii).