WEBエンジニアの技術メモと日々

nodeサーバを構築してiOS/OSXでバックエンドAPIのレスポンスが取れなくてはまったメモです 前提として 環境は ロードバランサ　AWSのアプリケーションロードバランサ　１台 フロント（nodeサーバ）AWS EC2　１台 バックエンド（apache2.4）　１台 DB AWS　RDS　１台 こちらの構成です 発生した事象 は、iPhone/Macでページ表示の際に APIからのデータが反映したりしなかったりする ことがあるというもの 例えばTOPページの新着ニュースの表示がされたり、データが取得できずに新着ニュースが表示されなかったりといった感じの事象でした 調べてもあまりわからなかったんですがchromeの開発者ツールでエラーが出ているのを確認してググりました あまり同様の事象の人は出てこなかったんですが 一人だけドンピシャの事象を記事にしている人を発見！！ これは本当に感謝です！！ 参考にさせていただいた記事はこちら AmazonLinux2のhttpdをALB経由で公開するWeb環境で発生していた、SafariのHTTPS接続エラーを改善してみた 本当に助かりました！！ ポイントは運用が始まってしまったのでどれとどれで発生条件になるか詳細まで詰め切れてはいませんが確認ポイントは以下だと思います ALB(application load balancer)を利用している apacheやnginxでリバースプロキシを利用したリクエストである apacheであればHTTP/2のモジュールが有効になっている になります これは今回トラブったサービスで全てはまりました 参考サイトにもあるように レスポンスヘッダ情報 に Upgrade: h2,h2c が含まれているとレスポンスが正常に受け取れず表示されないという事象でした ブラウザの開発ツールで確認するとネットワークでエラーが出ているのがわかり こんなエラーが出ていました Failed to load resource: 操作を完了できませんでした。 プロトコルエ ラー 参考サイトにもあるように http2モジュールを無効 にして解決しています 参考サイトはyum update

はじめてfavicon設定した！！ お恥ずかしながらサーバサイドエンジニア歴13年にして はじめてfavicon設定 しました！ 基本的にはプログラムよりな作業を主にしているので今までは基本的にフロントコーダー任せでしたが今回は人出も少なく。。。。それにnodejsでnuxtを使ったので、htmlに記載するのではなくnuxt.config.jsに記載をしたのでメモしておくことに。。 まぁプラスに考えて自分でやる仕事を（できる仕事）どんどん増やしています まずは favicon から、こちらはHTMLに記載する場合は <link rel="shortcut icon" href="イメージのパス"> これで設定できるみたいでこれですら 初耳学 これを nuxt.config.jsに記載 するとこちら link: [ {rel: 'icon', type: 'image/x-icon', href: 'イメージパス'}, ] なんかfavicon画像もらったら一緒に180x180の画像がついてきたのでこれ何？って聞いたらスマホとかでHOME画面にブックマーク置けるらしくその画像だと。。 せっかく作ってくれたのでこちらも設置してみました！！ <link rel="apple-touch-icon-precomposed" href="イメージパス" sizes="180x180" /> んでこちらをnuxt.config.jsに記載 link: [ {rel: 'apple-touch-icon', sizes: '180x180', href: 'イメージパス'}, ] apple-touch-icon-precomposedとapple-touch-iconの違いは古いiOSで光沢をつけるらしくそれをしないようにするのがapple-touch-icon-precomposedみたいです なんだかいろいろ便利な世の中になってきているな。。