如何使用Nginx在AWS上部署React？
譯文【51CTO.com快譯】在每個項目的生命周期中，都需要在生產(chǎn)環(huán)境上發(fā)布新功能，即使新版本更新并不那么明顯。
大多數(shù)Web應用程序都使用某些API來完成更新，但是它們通常托管在不同的服務器上。這種情況下，作為開發(fā)人員就需要解決跨源資源共享(CORS)問題。所以通常的做法是建立一個后端。
不過，優(yōu)秀的開發(fā)人員應該保持應用程序的簡單性，并去除所有多余的部分。在本文中，我將展示如何準備React應用程序，以便將它們部署到生產(chǎn)環(huán)境中。
我可以做一個微不足道的React示例應用，但它的幫助意義不是很大。因此，我決定將我的應用程序與聯(lián)邦儲備銀行提供的一個API連接。API需要一個訪問鍵來檢索數(shù)據(jù)，并且端點受到了跨域請求的保護，所以沒有外部web應用程序能夠直接使用數(shù)據(jù)。
這里需要注意的是，如果您的應用程序依賴服務器端呈現(xiàn)，那本次教程并不是正確的部署策略，雖然你可以得到一些思路上的啟發(fā)，但仍需要后端的支持。
前提條件
在按照本文操作之前，掌握一些創(chuàng)建React應用程序和Docker的基本知識是至關重要的。
React APP 示例
我用create-react-app創(chuàng)建了一個簡單的網(wǎng)絡應用程序。該應用程序唯一的功能是顯示一個代表美國GDP的折線圖。
該應用程序僅從以下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代表“實際GDP”。
- frequency：數(shù)據(jù)匯總，a代表年度。
- observation_start：觀察期的開始。
- observation_end：觀察期的結束。
- file_type：數(shù)據(jù)格式。默認*xml*。
- api_key：從此API檢索任何數(shù)據(jù)所需的訪問密鑰。
生活并不總是完美的，API設計也不理想。它要求開發(fā)人員將訪問鍵和預期的數(shù)據(jù)輸出作為URL參數(shù)傳遞。將輸出作為參數(shù)傳遞對我們來說不是問題，但泄漏API密鑰的風險卻是個問題。
即使拋開密鑰泄漏的風險，在跨域請求保護下從外部調(diào)用FRED API，也會收到錯誤。
許多開發(fā)人員會建議構建中間件(后端)來代理API請求并過濾敏感數(shù)據(jù)。在某種程度上，這是一個有效的方法。但我更喜歡以一種更YAGNI的方式構建我的應用程序，不過，我們本次的示例將不需要構建。
讓我們使用Nginx
我是NGINX的忠實擁護者，因為它帶來了簡單性。Nginx擁有準備生產(chǎn)級Web服務器所需的全部功能，比如HTTP2、壓縮、TLS和許多其他的。最重要的是，我們可以通過定義幾行配置來實現(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錯誤所需要的全部關鍵代碼。也就是從現(xiàn)在開始，所有對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參數(shù)也不需要傳遞file_type參數(shù)來檢索數(shù)據(jù)。也沒有人可以從URL中讀取訪問密鑰，因為它是安全的。
Docker喜歡Nginx
在云中運行NGINX最方便的方法就是使用Docker。
接下來我們只需要創(chuàng)建一個包含以下內(nèi)容的Dockerfile：
FROM nginx
COPY container /
COPY build /usr/share/nginx/html
現(xiàn)在，只需要三個步驟就可以運行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是一個端口號。這意味著該應用程序?qū)⒃谝韵耈RL: 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。但未雨綢繆是件好事，因為遲早有一天你會用到的。
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
