# 2021/07/12 まとめ
### 環境を合わせる。
以下は自動的に変更していくから毎回確認をする。
- Lambda@Edge 関数の更新112→114 （7/12日11時）
- OAIの更新
- 言葉の定義
テスト環境： ステージングテストのためにCDNを新しく建てており、Beheiverの設定でELBとS3を模倣して作成。本番の環境に近くなるように設定してある。
Ampify：フロントエンド側で新しく生成したCDN、クラウドフォーメーションなどで自動的にビルとと構成んがされる。
- テスト環境とAmplifyの環境差分はBeheiberの設定のみ、他の環境の差分はない。
つまり
Defult→S3
life-station/→S3
となっており、大きくいうと環境差分はこちらのDefultであるかそうでないかの違い。
## 実際に見えている挙動や結果
#### ~~Rootのページが500エラーになる問題 (原因特定済み)~~
https://develop.d3c5n5ztzz3qeb.amplifyapp.com/life-station/
https://kurashidemo.happy-bears.com/life-station/
Amplifyもテスト環境も同じ挙動をする。
結果としては500エラー
ログを見る
```
1626054092440,"2021-07-12T01:41:32.423Z f623f923-b184-4dec-bc80-c948c3c03728 ERROR Unhandled error during request: Error: Request failed with status code 500
at createError (/var/task/pages/index.js:102332:15)
at settle (/var/task/pages/index.js:124919:12)
at IncomingMessage.handleStreamEnd (/var/task/pages/index.js:211794:11)
at IncomingMessage.emit (events.js:326:22)
at endReadableNT (_stream_readable.js:1241:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
config: {
url: '/v1/contents/carousels',
method: 'get',
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'User-Agent': 'axios/0.21.1'
},
baseURL: 'https://lifestationstg.happy-bears.com/api',
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
data: undefined
},
request: ClientRequest {
_events: [Object: null prototype] {
socket: [Function],
abort: [Function],
aborted: [Function],
connect: [Function],
error: [Function],
timeout: [Function],
prefinish: [Function: requestOnPrefinish]
},
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
socket: TLSSocket {
_tlsOptions: [Object],
_secureEstablished: true,
_securePending: false,
_newSessionPending: false,
_controlReleased: true,
secureConnecting: false,
_SNICallback: null,
servername: 'lifestationstg.happy-bears.com',
alpnProtocol: false,
authorized: true,
authorizationError: null,
encrypted: true,
_events: [Object: null prototype],
_eventsCount: 10,
connecting: false,
_hadError: false,
_parent: null,
_host: 'lifestationstg.happy-bears.com',
_readableState: [ReadableState],
readable: true,
_maxListeners: undefined,
_writableState: [WritableState],
writable: false,
allowHalfOpen: false,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: undefined,
_server: null,
ssl: [TLSWrap],
_requestCert: true,
_rejectUnauthorized: true,
parser: null,
_httpMessage: [Circular],
[Symbol(res)]: [TLSWrap],
[Symbol(verified)]: true,
[Symbol(pendingSession)]: null,
[Symbol(asyncId)]: 100,
[Symbol(kHandle)]: [TLSWrap],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(connect-options)]: [Object]
},
connection: TLSSocket {
_tlsOptions: [Object],
_secureEstablished: true,
_securePending: false,
_newSessionPending: false,
_controlReleased: true,
secureConnecting: false,
_SNICallback: null,
servername: 'lifestationstg.happy-bears.com',
alpnProtocol: false,
authorized: true,
authorizationError: null,
encrypted: true,
_events: [Object: null prototype],
_eventsCount: 10,
connecting: false,
_hadError: false,
_parent: null,
_host: 'lifestationstg.happy-bears.com',
_readableState: [ReadableState],
readable: true,
_maxListeners: undefined,
_writableState: [WritableState],
writable: false,
allowHalfOpen: false,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: undefined,
_server: null,
ssl: [TLSWrap],
_requestCert: true,
_rejectUnauthorized: true,
parser: null,
_httpMessage: [Circular],
[Symbol(res)]: [TLSWrap],
[Symbol(verified)]: true,
[Symbol(pendingSession)]: null,
[Symbol(asyncId)]: 100,
[Symbol(kHandle)]: [TLSWrap],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(connect-options)]: [Object]
},
_header: 'GET /api/v1/contents/carousels HTTP/1.1\r
' +
'Accept: application/json, text/plain, */*\r
' +
'Content-Type: application/json\r
' +
'User-Agent: axios/0.21.1\r
' +
'Host: lifestationstg.happy-bears.com\r
' +
'Connection: close\r
' +
'\r
',
_keepAliveTimeout: 0,
_onPendingData: [Function: noopPendingOutput],
agent: Agent {
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
defaultPort: 443,
protocol: 'https:',
options: [Object],
requests: {},
sockets: [Object],
freeSockets: {},
keepAliveMsecs: 1000,
keepAlive: false,
maxSockets: Infinity,
maxFreeSockets: 256,
maxTotalSockets: Infinity,
totalSocketCount: 4,
scheduling: 'fifo',
maxCachedSessions: 100,
_sessionCache: [Object],
[Symbol(kCapture)]: false
},
socketPath: undefined,
method: 'GET',
insecureHTTPParser: undefined,
path: '/api/v1/contents/carousels',
_ended: true,
res: IncomingMessage {
_readableState: [ReadableState],
readable: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
socket: [TLSSocket],
connection: [TLSSocket],
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
headers: [Object],
rawHeaders: [Array],
trailers: {},
rawTrailers: [],
aborted: false,
upgrade: false,
url: '',
method: null,
statusCode: 500,
statusMessage: 'Internal Server Error',
client: [TLSSocket],
_consuming: true,
_dumped: false,
req: [Circular],
responseUrl: 'https://lifestationstg.happy-bears.com/api/v1/contents/carousels',
redirects: [],
[Symbol(kCapture)]: false
},
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'lifestationstg.happy-bears.com',
protocol: 'https:',
_redirectable: Writable {
_writableState: [WritableState],
writable: true,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_options: [Object],
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function],
_currentRequest: [Circular],
_currentUrl: 'https://lifestationstg.happy-bears.com/api/v1/contents/carousels',
[Symbol(kCapture)]: false
},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] {
accept: [Array],
'content-type': [Array],
'user-agent': [Array],
host: [Array]
}
},
response: {
status: 500,
statusText: 'Internal Server Error',
headers: {
date: 'Mon, 12 Jul 2021 01:41:32 GMT',
'content-type': 'application/json; charset=UTF-8',
'content-length': '46',
connection: 'close',
server: 'Apache/2.4.46 () Phusion_Passenger/6.0.8',
vary: 'Origin',
'x-request-id': 'aef6f035-0425-4e8d-a4b2-b8042702f90d',
'x-runtime': '0.010719',
'x-powered-by': 'Phusion Passenger(R) 6.0.8',
upgrade: 'h2,h2c',
status: '500 Internal Server Error'
},
config: {
url: '/v1/contents/carousels',
method: 'get',
headers: [Object],
baseURL: 'https://lifestationstg.happy-bears.com/api',
transformRequest: [Array],
transformResponse: [Array],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
validateStatus: [Function: validateStatus],
data: undefined
},
request: ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
socket: [TLSSocket],
connection: [TLSSocket],
_header: 'GET /api/v1/contents/carousels HTTP/1.1\r
' +
'Accept: application/json, text/plain, */*\r
' +
'Content-Type: application/json\r
' +
'User-Agent: axios/0.21.1\r
' +
'Host: lifestationstg.happy-bears.com\r
' +
'Connection: close\r
' +
'\r
',
_keepAliveTimeout: 0,
_onPendingData: [Function: noopPendingOutput],
agent: [Agent],
socketPath: undefined,
method: 'GET',
insecureHTTPParser: undefined,
path: '/api/v1/contents/carousels',
_ended: true,
res: [IncomingMessage],
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'lifestationstg.happy-bears.com',
protocol: 'https:',
_redirectable: [Writable],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
data: { status: 500, error: 'Internal Server Error' }
},
isAxiosError: true,
toJSON: [Function: toJSON]
}
```
APIサーバでのエラーがあるのでそれが原因でRootのページに関しては表示ができていない。
### 1部のレイアウトやColorが読み込めていない問題
挙動として、Amplifyの方には問題はない。
テスト環境で問題あり。
↓正常である。Amplifyの結果。
問題である。テスト環境での結果。
特定の.jsファイルや.cssファイルが読み込めていない模様。
Cloudfrontでのログを見る
```
1626054740698,"START RequestId: c830afeb-5eee-4049-a831-d93d03ccece5 Version: 114
"
1626054742623,"2021-07-12T01:52:22.609Z c830afeb-5eee-4049-a831-d93d03ccece5 INFO Loaded env from .env.production
"
1626054742624,"2021-07-12T01:52:22.624Z c830afeb-5eee-4049-a831-d93d03ccece5 INFO Loaded env from .env
"
1626054743684,"END RequestId: c830afeb-5eee-4049-a831-d93d03ccece5
```
エラーではないが環境変数周りでの何らかの記録がある。
Amplify（正常）ではこちらの記録は存在しない。
現在の手がかりはここまです。
以上がAmplifyとテスト環境周りの事実のみを記載した記録です。
## 確認と今後について
#### 認識合わせ
環境差分の認識が間違っているので認識を合わせたい。
CDNを経由しているか、CDNを経由していないかの違いではなくて、Beheiverの設定の違いである。
Beheiverがキャッチする正規表現以外の変更点はないです。
1つのBeheiverの詳細設定は同じです。
#### 問題点はどこにあるのか？？
1. CDNの設定の問題
CDNのBeheiverは基本的に正規表現でリクエストパスをキャッチして定義に応じてリクエストをS3に投げている。
今回の場合に、CDNが問題だとすると CDNのどの機能がひっかかっているのか？
2. Lambda@Edgeでの問題。
Amplify環境で成功したとしても、テスト環境ではBeheiverでの設定が違うからそれにともない変更点が生まれるのは十分に考えられることだと思っている。
（CDN側とフロントのコードでの）
事実としてLambdaのログには
```
INFO Loaded env from .env.production
```
がある。
これはStaging用の関数に本番環境の.envが読み込まれているのではないのか？？
これ以上の情報がなくて、判断ができかねている。
## 更新
cloudfrontのログが見れるように直したところ。
1部の例を抜粋
```
2021-07-12 06:28:51 NRT12-C2 4546 240b:10:c0c1:300:f8be:39cb:72d7:2cea GET d1gy0afvuk4dp.cloudfront.net /life-station/ 500 https://kurashidemo.happy-bears.com/life-station/signin/ Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_15_7)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/91.0.4472.114%20Safari/537.36 - - Error 07ZLrJ0clSezdCtPQzn55cb7zrlFB6EBRSRzG0msB3YnGGCMRkP6aw== kurashidemo.happy-bears.com https 55 6.321 - TLSv1.3 TLS_AES_128_GCM_SHA256 Error HTTP/2.0 - - 53191 6.321 OriginError text/html;%20charset=utf-8 4243 - -
```
現在は、2種類のログがある。
> ClientCommError – The response to the viewer was interrupted due to a communication problem between the server and the viewer.
> OriginError – The origin returned an incorrect response.
の2種類のエラーが存在する。
現時点での明らかなのはCloudfrontとLambda＠Edgeで何らかのエラーが出ていてそれが問題である。
### 今後の話。
- 上記のログからわかることは限られている。
- CloudfrontかLambda＠Edgeどちらで問題があるのかは現時点では分からない。
[AWS公式Lambda@Edge 関数のテストとデバッグ](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-testing-debugging.html)
こちらを進めていき順番に問題の切り分けをしていくしか方法はないと思っている。
例えば、以下のようにしていく。
Lambdaのコンソール関数でデバックをしていく場合にはフロントとの連携が発生する。
スムーズにデバックができるとは思わない。
Sign in with Wallet
Connect another wallet