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

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

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

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

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

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

前提條件

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

React APP示例

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

該應用程序僅從以下API獲取數據：

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

參數：

·series_id：序列ID。GDPCA代表“實際GDP”。

·frequency：數據匯總，a代表年度。

·observation_start：觀察期的開始。

·observation_end：觀察期的結束。

·file_type：數據格式。默認*xml*。

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

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

即使拋開密鑰泄漏的風險，在跨域請求保護下從外部調用FRED API，也會收到錯誤。

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

讓我們使用Nginx

我是NGINX的忠實擁護者，因為它帶來了簡單性。Nginx擁有準備生產級Web服務器所需的全部功能，比如HTTP2、壓縮、TLS和許多其他的。最重要的是，我們可以通過定義幾行配置來實現。像下面的代碼片段:

...

http{

...

server{

...

location/api{

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

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

}

}

}

上面這4行是我隱藏API鍵和抑制CORS錯誤所需要的全部關鍵代碼。也就是從現在開始，所有對API的HTTP請求都將被代理到FRED api，而且只有我們的應用程序才能使用該API。所有外部請求都將面臨CORS錯誤。

這就是我們的端點的樣子：

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

我們既不需要傳遞api_key參數也不需要傳遞file_type參數來檢索數據。也沒有人可以從URL中讀取訪問密鑰，因為它是安全的。

Docker喜歡Nginx

在云中運行NGINX最方便的方法就是使用Docker。

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

FROM nginx

COPY container/

COPY build/usr/share/nginx/html

現在，只需要三個步驟就可以運行FRED APP：

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

·構建Docker映像。將創(chuàng)建一個可運行的Docker映像。

·發(fā)布Docker鏡像到某個存儲庫或在本地機器上運行它。

接下來，讓我們嘗試在我們的機器上運行它。

$yarn install

$yarn build

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

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

8081是一個端口號。這意味著該應用程序將在以下URL:http://localhost:8081下可用。

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

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

請注意日志中的兩個200，因為它們代表HTTP狀態(tài)OK。如果你在API請求旁邊看到的是一個400，這意味著你的API密鑰有問題。

總結

如果你的項目還沒開始，那你可能還沒部署過APP。但未雨綢繆是件好事，因為遲早有一天你會用到的。

原標題：How To Deploy React on AWS using NGINX