久久中文字幕亚洲精品最新,三级国产精品一区二区,在线播放一区二区

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

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

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

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

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

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

前提條件

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

React APP 示例

我用create-react-app創(chuàng)建了一個簡單的網(wǎng)絡(luò)應(yīng)用程序。該應(yīng)用程序唯一的功能是顯示一個代表美國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ù)傳遞對我們來說不是問題，但泄漏API密鑰的風(fēng)險卻是個問題。

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

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

讓我們使用Nginx

我是NGINX的忠實(shí)擁護(hù)者，因?yàn)樗鼛砹撕唵涡浴ginx擁有準(zhǔn)備生產(chǎn)級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錯誤所需要的全部關(guān)鍵代碼。也就是從現(xiàn)在開始，所有對API的HTTP請求都將被代理到FRED api，而且只有我們的應(yīng)用程序才能使用該API。所有外部請求都將面臨CORS錯誤。

這就是我們的端點(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)樗前踩摹?/p>

Docker喜歡Nginx

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

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

FROM nginx
COPY container /
COPY build /usr/share/nginx/html

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

構(gòu)建React應(yīng)用程序。這個過程生成包含靜態(tài)文件的build/目錄。
構(gòu)建Docker映像。將創(chuàng)建一個可運(yùn)行的Docker映像。
發(fā)布Docker鏡像到某個存儲庫或在本地機(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是一個端口號。這意味著該應(yīng)用程序?qū)⒃谝韵耈RL: http://localhost:8081下可用。

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

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" "-"