如何使用NGINX在AWS上部署React？

在每個(gè)項(xiàng)目的生命周期中，都需要在生產(chǎn)環(huán)境上發(fā)布新功能，即使新版本更新并不那么明顯。

大多數(shù)Web應(yīng)用程序都使用某些API來完成更新，但是它們通常托管在不同的服務(wù)器上。這種情況下，作為開發(fā)人員就需要解決跨源資源共享(CORS)問題。所以通常的做法是建立一個(gè)后端。

不過，優(yōu)秀的開發(fā)人員應(yīng)該保持應(yīng)用程序的簡單性，并去除所有多余的部分。在本文中，我將展示如何準(zhǔn)備React應(yīng)用程序，以便將它們部署到生產(chǎn)環(huán)境中。

我可以做一個(gè)微不足道的React示例應(yīng)用，但它的幫助意義不是很大。因此，我決定將我的應(yīng)用程序與聯(lián)邦儲(chǔ)備銀行提供的一個(gè)API連接。API需要一個(gè)訪問鍵來檢索數(shù)據(jù)，并且端點(diǎn)受到了跨域請(qǐng)求的保護(hù)，所以沒有外部web應(yīng)用程序能夠直接使用數(shù)據(jù)。

這里需要注意的是，如果您的應(yīng)用程序依賴服務(wù)器端呈現(xiàn)，那本次教程并不是正確的部署策略，雖然你可以得到一些思路上的啟發(fā)，但仍需要后端的支持。

前提條件

在按照本文操作之前，掌握一些創(chuàng)建React應(yīng)用程序和Docker的基本知識(shí)是至關(guān)重要的。

React APP示例

我用create-react-app創(chuàng)建了一個(gè)簡單的網(wǎng)絡(luò)應(yīng)用程序。該應(yīng)用程序唯一的功能是顯示一個(gè)代表美國GDP的折線圖。

該應(yīng)用程序僅從以下API獲取數(shù)據(jù)：

https://api.stlouisfed.org/fred/series/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456

參數(shù)：

·series_id：序列ID。GDPCA代表“實(shí)際GDP”。

·frequency：數(shù)據(jù)匯總，a代表年度。

·observation_start：觀察期的開始。

·observation_end：觀察期的結(jié)束。

·file_type：數(shù)據(jù)格式。默認(rèn)*xml*。

·api_key：從此API檢索任何數(shù)據(jù)所需的訪問密鑰。

生活并不總是完美的，API設(shè)計(jì)也不理想。它要求開發(fā)人員將訪問鍵和預(yù)期的數(shù)據(jù)輸出作為URL參數(shù)傳遞。將輸出作為參數(shù)傳遞對(duì)我們來說不是問題，但泄漏API密鑰的風(fēng)險(xiǎn)卻是個(gè)問題。

即使拋開密鑰泄漏的風(fēng)險(xiǎn)，在跨域請(qǐng)求保護(hù)下從外部調(diào)用FRED API，也會(huì)收到錯(cuò)誤。

許多開發(fā)人員會(huì)建議構(gòu)建中間件(后端)來代理API請(qǐng)求并過濾敏感數(shù)據(jù)。在某種程度上，這是一個(gè)有效的方法。但我更喜歡以一種更YAGNI的方式構(gòu)建我的應(yīng)用程序，不過，我們本次的示例將不需要構(gòu)建。

讓我們使用Nginx

我是NGINX的忠實(shí)擁護(hù)者，因?yàn)樗鼛砹撕唵涡?。Nginx擁有準(zhǔn)備生產(chǎn)級(jí)Web服務(wù)器所需的全部功能，比如HTTP2、壓縮、TLS和許多其他的。最重要的是，我們可以通過定義幾行配置來實(shí)現(xiàn)。像下面的代碼片段:

...

http{

...

server{

...

location/api{

set$args$args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;

proxy_pass https://api.stlouisfed.org/fred/series;

}

}

}

上面這4行是我隱藏API鍵和抑制CORS錯(cuò)誤所需要的全部關(guān)鍵代碼。也就是從現(xiàn)在開始，所有對(duì)API的HTTP請(qǐng)求都將被代理到FRED api，而且只有我們的應(yīng)用程序才能使用該API。所有外部請(qǐng)求都將面臨CORS錯(cuò)誤。

這就是我們的端點(diǎn)的樣子：

/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01

我們既不需要傳遞api_key參數(shù)也不需要傳遞file_type參數(shù)來檢索數(shù)據(jù)。也沒有人可以從URL中讀取訪問密鑰，因?yàn)樗前踩摹?/span>

Docker喜歡Nginx

在云中運(yùn)行NGINX最方便的方法就是使用Docker。

接下來我們只需要?jiǎng)?chuàng)建一個(gè)包含以下內(nèi)容的Dockerfile：

FROM nginx

COPY container/

COPY build/usr/share/nginx/html

現(xiàn)在，只需要三個(gè)步驟就可以運(yùn)行FRED APP：

·構(gòu)建React應(yīng)用程序。這個(gè)過程生成包含靜態(tài)文件的build/目錄。

·構(gòu)建Docker映像。將創(chuàng)建一個(gè)可運(yùn)行的Docker映像。

·發(fā)布Docker鏡像到某個(gè)存儲(chǔ)庫或在本地機(jī)器上運(yùn)行它。

接下來，讓我們嘗試在我們的機(jī)器上運(yùn)行它。

$yarn install

$yarn build

$docker build-t msokola/fred-app:latest.

$docker run-p 8081:80-it msokola/fred-app:latest

8081是一個(gè)端口號(hào)。這意味著該應(yīng)用程序?qū)⒃谝韵耈RL:http://localhost:8081下可用。

在瀏覽器中打開這個(gè)URL后，你應(yīng)該會(huì)在終端中看到這樣的日志：

0.0.0.1--[11/Mar/2021:18:57:50+0000]"GET/HTTP/1.1"200 1556"-""Mozilla/5.0(Macintosh;Intel Mac OS X 11_2_0)AppleWebKit/537.36(KHTML,like Gecko)Chrome/88.0.4324.192 Safari/537.36""-"

...

0.0.0.1--[11/Mar/2021:18:57:51+0000]"GET/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01 HTTP/1.1"200 404"http://localhost:8081/""Mozilla/5.0(Macintosh;Intel Mac OS X 11_2_0)AppleWebKit/537.36(KHTML,like Gecko)Chrome/88.0.4324.192 Safari/537.36""-"

請(qǐng)注意日志中的兩個(gè)200，因?yàn)樗鼈兇鞨TTP狀態(tài)OK。如果你在API請(qǐng)求旁邊看到的是一個(gè)400，這意味著你的API密鑰有問題。

總結(jié)

如果你的項(xiàng)目還沒開始，那你可能還沒部署過APP。但未雨綢繆是件好事，因?yàn)檫t早有一天你會(huì)用到的。

原標(biāo)題：How To Deploy React on AWS using NGINX