
在佔新作改版時，我們會希望可以先讓一部分使用者先做測試而不是將使用者一次更新。在AWS透過ELB接收網路流量到後面的Container的流量設定該怎麼做呢？
另外我們還希望可以做到如同AWS的新舊版本可以讓使用者自由的切換，這個該又如何處理這樣的需求呢？

## 什麼是金絲雀部署？

金絲雀部署的劉來是在礦工下礦坑時會先讓金絲雀飛進礦坑中，倘若金絲雀沒有了叫聲，表示礦坑底下的瓦斯濃度或是其他氣體濃度太高，礦工下礦坑就會有生命危險。
金絲雀部署也有其他名稱如：礦工部署與灰度部署

## 系統架構配置

當使用者進入系統時，有90%的流量進入了`Old Version`中另外有10%的流量進入`New Version`中

![AWS system architecture](aws-dynamic-site-canary-deployment/system-architecture.png)

## Load balancer的設定

在ELB中的設定呢分成兩個區塊，首先在主要的Rule設定上的`Forward to`中設定兩個target group，權重設定分配比例按照9:1的設定，Group-level stickiness要設定多久後要將重新做分配，就可以自動的建立金絲雀部署了

![第一個TG設定](aws-dynamic-site-canary-deployment/main-tg-setting.png)

但想要想可以自求的切換版本那只單純設定一條rule是不夠的！原因是因為Next.js的靜態檔案ex: js, css 靜態檔案的路徑是`_next/static/{BUILD_ID}`，所以要針對這樣的路徑多設定兩個不同的rule來做指向
所以ELB的設定要多一個Path的條件，match了build id 才能導向該Container，這樣每次部署只要更新相對應的路徑就可以了！

還需要再多一個設定，那就是切換舊版後需要一個條件讓使用者可以導向舊版的網站，所以這邊可以使用Query string或是Header的值來做判斷導向哪一個Target group中

> 以前實作時，Next.js產生靜態檔案的路徑是`_next/{BUILD_ID}`


在佔新作改版時，我們會希望可以先讓一部分使用者先做測試而不是將使用者一次更新。在AWS透過ELB接收網路流量到後面的Container的流量設定該怎麼做呢？ 另外我們還希望可以做到如同AWS的新舊版本可以讓使用者自由的切換，這個該又如何處理這樣的需求呢？

非靜態網站使用AWS做金絲雀部署


## 前情提要

新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正，
在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題，
Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的，
再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

## Next.js Layout最佳配置

在Next.js的Layout最佳配置應該是把Layout的component放在`_app.tsx`中，在轉換頁面時就不會再出現前情提要的相關問題了。

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
		    <Layout>
			    <Component {...pageProps} />
			</Layout>
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <>
            {/*index content*/}
		</>
};
```


### 在得到結論前的一些排查點

在一開始我們的`_app.tsx`與`index.tsx`或其他page都是這樣的設計，在Layout中有`Header`與`Footer`兩個component以及負責所有頁面上的版面配置，
其中Header這個component中去取得GQL資料，但因為他是屬於React FunctionComponent的範疇，故無法使用getInitialProps這類的function

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
			<Component {...pageProps} />
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <Layout>
            {/*index content*/}
		</Layout>
};
```

1. 在方案一的我是透過React Memo的方式Cache Layout起來下次使用Layout 這個component時就不會再重新渲染，但結果是仍然每次重新渲染Layout
1. 在_app.tsx中取得相關的Layout配置所需要的圖檔與文字，透過props的方式傳入給Layout中並讓Header在Server side 渲染，
但因為progress image的使用所以Logo仍然會有閃一下的情況

然後在官網上看到了這麼一段....
最後我把Layout放置到`_app.tsx`中，就可以如我們預期的一開始出現了progress image的Logo再出現真正的Logo，在每次轉頁時也沒有重新渲染相關的Layout component

我想主要的幾個原因是，_app.tsx的執行時間以及在轉頁渲染的最小單位是整個Next page不是採用差異的方式重新渲染。

> Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
>
> - Persisting layout between page changes
> - Keeping state when navigating pages
> - Custom error handling using componentDidCatch
> - Inject additional data into pages
> - Add global CSS
>
> [Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)

### 相關連結

[Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)


新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正， 在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題， Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的， 再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

非靜態網站使用AWS做金絲雀部署

Next.js 的Layout最佳配置