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