戰(zhàn)指南：Heroku、AWS S3、子目錄與 Elastic Beanstalk 全流程)
React Boilerplate 部署實(shí)戰(zhàn)指南Heroku、AWS S3、子目錄與 Elastic Beanstalk 全流程【免費(fèi)下載鏈接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.項(xiàng)目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate本篇部署指南以 React Boilerplatedocs/general/deployment.md為核心骨架系統(tǒng)講解將生產(chǎn)構(gòu)建產(chǎn)物發(fā)布到 Heroku、AWS S3、現(xiàn)有服務(wù)器子目錄以及 AWS Elastic Beanstalk 的完整流程。文章不僅復(fù)現(xiàn)每一步可復(fù)制的命令與配置文件還結(jié)合倉(cāng)庫(kù)源碼webpack 構(gòu)建配置、Express 生產(chǎn)中間件、npm scripts說(shuō)明每條指令背后的運(yùn)行原理幫助讀者在理解構(gòu)建-托管鏈路的基礎(chǔ)上獨(dú)立完成任意一種生產(chǎn)部署。部署前的準(zhǔn)備理解構(gòu)建產(chǎn)物與生產(chǎn)啟動(dòng)命令在進(jìn)入各平臺(tái)部署之前需要先理解 React Boilerplate 生產(chǎn)環(huán)境的兩條核心鏈路生產(chǎn)構(gòu)建與生產(chǎn)啟動(dòng)它們是所有部署方案共同依賴的基礎(chǔ)。生產(chǎn)構(gòu)建由 package.json 中的build腳本驅(qū)動(dòng)build: cross-env NODE_ENVproduction webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout該命令會(huì)調(diào)用 internals/webpack/webpack.prod.babel.js以 internals/webpack/webpack.base.babel.js 為公共配置進(jìn)行生產(chǎn)打包。產(chǎn)物默認(rèn)輸出到倉(cāng)庫(kù)根目錄下的./build文件夾build:clean腳本會(huì)先清理舊產(chǎn)物并額外產(chǎn)出 gzip 壓縮包與離線緩存相關(guān)的 Service Worker 文件offline-plugin與compression-webpack-plugin詳見(jiàn) webpack.prod.babel.js。生產(chǎn)啟動(dòng)由start:prod腳本驅(qū)動(dòng)start:prod: cross-env NODE_ENVproduction node server它啟動(dòng) server/index.js 中的 Express 服務(wù)。在NODE_ENVproduction時(shí)server/middlewares/frontendMiddleware.js 會(huì)加載addProdMiddlewaresserver/middlewares/addProdMiddlewares.js其核心邏輯包括使用compression()對(duì)響應(yīng)做 gzip 壓縮通過(guò)express.static(outputPath)以publicPath默認(rèn)/對(duì)外提供./build目錄下的靜態(tài)資源對(duì)任意未被靜態(tài)資源匹配的路由回退返回index.html保證前端路由react-router在刷新頁(yè)面時(shí)也能正確加載。默認(rèn)監(jiān)聽(tīng)端口由 server/port.js 決定優(yōu)先取命令行--port參數(shù)其次取環(huán)境變量PORT最后回退到3000。理解了這兩條鏈路下面各平臺(tái)的部署步驟就一目了然平臺(tái)只負(fù)責(zé)托管構(gòu)建產(chǎn)物或運(yùn)行生產(chǎn)服務(wù)。Heroku三步完成部署Heroku 是一個(gè)托管 PaaS 平臺(tái)它直接運(yùn)行 Node.js 服務(wù)進(jìn)程因此部署 React Boilerplate 的核心是讓 Heroku 執(zhí)行start:prod而非默認(rèn)的start。第 1 步創(chuàng)建 Procfile在項(xiàng)目根目錄創(chuàng)建名為Procfile的文件寫(xiě)入web: npm run start:prod原因Heroku 默認(rèn)以npm run start作為 Node.js 應(yīng)用的啟動(dòng)命令而start腳本運(yùn)行的是開(kāi)發(fā)模式cross-env NODE_ENVdevelopment node server。必須通過(guò) Procfile 覆蓋默認(rèn)啟動(dòng)命令讓 Heroku 以NODE_ENVproduction啟動(dòng)生產(chǎn)服務(wù)。第 2 步安裝 Node.js buildpack為你的 Heroku 應(yīng)用設(shè)置 Node.js buildpackheroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs#v133 -a [your app name]其中#v133是 buildpack 版本標(biāo)簽請(qǐng)務(wù)必替換為當(dāng)時(shí)最新的 buildpack 版本以官方 releases 頁(yè)發(fā)布的最新版本為準(zhǔn)。buildpack 負(fù)責(zé)在 Heroku 上安裝 Node.js 與 npm 依賴npm install然后執(zhí)行Procfile中聲明的命令。第 3 步標(biāo)準(zhǔn) Git 推送流程git add . git commit -m Made some epic changes as per usual git push heroku mastergit push heroku master會(huì)觸發(fā) Heroku 構(gòu)建拉取代碼 → 安裝依賴 → 運(yùn)行 buildpack 鉤子。由于start:prod在啟動(dòng)時(shí)才執(zhí)行node server而生產(chǎn)靜態(tài)資源依賴npm run build生成的./build目錄——如果構(gòu)建目錄未提交到倉(cāng)庫(kù)建議在package.json中補(bǔ)充postinstall鉤子如postinstall: npm run build讓平臺(tái)在安裝依賴后自動(dòng)構(gòu)建或確保./build產(chǎn)物已納入版本控制。這一點(diǎn)在不同平臺(tái)的構(gòu)建行為上略有差異需要結(jié)合自身 CI/CD 策略確認(rèn)。AWS S3七步完成靜態(tài)托管S3 只負(fù)責(zé)托管靜態(tài)文件不運(yùn)行 Node.js 進(jìn)程。因此 S3 方案的核心是在本地構(gòu)建出./build目錄再把它作為靜態(tài)網(wǎng)站整體上傳。第 1 步本地構(gòu)建npm install npm run build執(zhí)行后會(huì)在項(xiàng)目根目錄生成./build文件夾。注意 webpack.base.babel.js 中的默認(rèn)輸出配置output: Object.assign( { // Compile into js/build.js path: path.resolve(process.cwd(), build), publicPath: /, }, options.output, ),即產(chǎn)物輸出到./build資源引用路徑以站點(diǎn)根目錄/為基準(zhǔn)。publicPath為/意味著所有 JS/CSS 資源都以絕對(duì)路徑引用因此必須配合根路徑訪問(wèn)直接通過(guò) S3 靜態(tài)網(wǎng)站端點(diǎn)訪問(wèn)或綁定自定義域名才能正確加載資源——這也正是下文子目錄部署需要顯式修改publicPath的原因。第 2 步創(chuàng)建 S3 Bucket登錄 AWS 控制臺(tái)在Services下拉菜單中選擇S3進(jìn)入 S3 服務(wù)。第 3 步創(chuàng)建存儲(chǔ)桶點(diǎn)擊Create Bucket填寫(xiě)B(tài)ucket Name全局唯一與Region區(qū)域美國(guó)地區(qū)官方文檔推薦US Standard即us-east-1。點(diǎn)擊Create完成創(chuàng)建。第 4 步開(kāi)放公共讀權(quán)限選中剛創(chuàng)建的 Bucket在右側(cè)Properties選項(xiàng)卡下打開(kāi)Permissions手風(fēng)琴。點(diǎn)擊Add more permissions將Grantee設(shè)為Everyone或任何需要訪問(wèn)網(wǎng)站的主體授予View Permissions讀權(quán)限點(diǎn)擊Save。只有公開(kāi)可讀靜態(tài)網(wǎng)站端點(diǎn)才能向匿名訪客提供頁(yè)面內(nèi)容。第 5 步開(kāi)啟靜態(tài)網(wǎng)站托管打開(kāi)Static Website Hosting手風(fēng)琴這里會(huì)顯示網(wǎng)站的 URLendpoint形如example.s3-website-us-east-1.amazonaws.com。點(diǎn)擊Enable website hosting在Index document與Error document兩個(gè)輸入框中都填寫(xiě)index.html點(diǎn)擊Save。說(shuō)明SPA 應(yīng)用沒(méi)有真正的404 頁(yè)面Error document同樣指向index.html是為了讓前端路由如/about在直接訪問(wèn)或刷新時(shí)能回退到應(yīng)用入口由 react-router 接管后續(xù)渲染——這與生產(chǎn)中間件中app.get(*, ...)回退返回index.html的原理一致addProdMiddlewares.js。第 6 步上傳構(gòu)建產(chǎn)物并設(shè)為公開(kāi)在 Bucket 列表左側(cè)點(diǎn)擊該 Bucket 進(jìn)入點(diǎn)擊Upload選擇./build文件夾內(nèi)的所有文件點(diǎn)擊Start Upload。上傳完成后全選文件右鍵或點(diǎn)擊Actions按鈕選擇Make Public將全部對(duì)象設(shè)為公開(kāi)可讀。第 7 步驗(yàn)證訪問(wèn)點(diǎn)擊Properties選項(xiàng)卡打開(kāi)Static Website Hosting點(diǎn)擊其中的Endpoint鏈接。應(yīng)用即應(yīng)運(yùn)行在該 URL 上。注意S3 靜態(tài)網(wǎng)站端點(diǎn)不支持 HTTP 強(qiáng)制跳轉(zhuǎn) HTTPS如需 HTTPS 與自定義域名可配合 CloudFront CDN 分發(fā)為 Bucket 配置源站并在 Route 53 中綁定域名與證書(shū)。此為 S3 托管的最佳實(shí)踐補(bǔ)充官方文檔亦推薦此路線。部署到已有服務(wù)器的子目錄如果你想把應(yīng)用部署在已有服務(wù)器Apache / NGINX的一個(gè)子路徑下例如用戶通過(guò)https://host/web-app訪問(wèn)應(yīng)用則需要讓前端構(gòu)建與路由同時(shí)感知該子路徑。文檔說(shuō)明這一方案已在 APACHE 與 NGINX 服務(wù)器上驗(yàn)證通過(guò)。整個(gè)改動(dòng)分為四步。第 1 步讓 webpack 注入環(huán)境變量修改 internals/webpack/webpack.base.babel.js在文件頂部引入兩個(gè)可被環(huán)境變量覆蓋的常量 const BUILD_FOLDER_PATH process.env.BUILD_FOLDER_PATH || build; const PUBLIC_PATH process.env.PUBLIC_PATH || /;然后將output配置中的默認(rèn)值替換為上述常量- path: path.resolve(process.cwd(), build), - publicPath: /, path: path.resolve(process.cwd(), BUILD_FOLDER_PATH), publicPath: PUBLIC_PATH,最后在文件底部的EnvironmentPlugin中注入默認(rèn)值webpack.base.babel.js 中現(xiàn)有插件為NODE_ENV在此追加# inside EnvironmentPlugin PUBLIC_PATH: /,原理webpack.EnvironmentPlugin會(huì)把process.env.PUBLIC_PATH的值在編譯期注入到前端代碼中NODE_ENV即是現(xiàn)有用法webpack.base.babel.js。這樣構(gòu)建時(shí)若設(shè)置了PUBLIC_PATH/web-app/所有資源引用的絕對(duì)路徑前綴就會(huì)自動(dòng)變?yōu)?web-app/同時(shí)process.env.PUBLIC_PATH在瀏覽器端代碼里也能被正確替換。第 2 步為路由 history 添加 basename修改 app/utils/history.js將createBrowserHistory的調(diào)用改為傳入 basename- const history createHistory(); const basename process.env.PUBLIC_PATH; const history createHistory({ basename });倉(cāng)庫(kù)中 app/utils/history.js 當(dāng)前實(shí)現(xiàn)為import { createBrowserHistory } from history; const history createBrowserHistory(); export default history;原理瀏覽器 History API 沒(méi)有子目錄概念路由路徑/web-app/about中的/web-app只是前綴。history庫(kù)的basename選項(xiàng)會(huì)在匹配路由時(shí)剝離該前綴使應(yīng)用內(nèi)部仍然只感知/about同時(shí)PUBLIC_PATH由 webpack 在構(gòu)建期替換為真實(shí)值如/web-app/從而讓 history 與靜態(tài)資源前綴保持一致。第 3 步構(gòu)建到指定子目錄PUBLIC_PATH/web-app/ BUILD_FOLDER_PATHbuild/web-app npm run build執(zhí)行后生產(chǎn)構(gòu)建產(chǎn)物會(huì)輸出到./build/web-app目錄且所有資源引用與路由 basename 都以/web-app/為前綴。注意PUBLIC_PATH末尾的斜杠是必須的/web-app/而非/web-app否則拼接出的資源路徑會(huì)出錯(cuò)。第 4 步上傳到服務(wù)器 web-root將生成的web-app文件夾整體上傳/放置到服務(wù)器的 web-root 目錄下最終端點(diǎn)即為https://host/web-app服務(wù)器側(cè)要求Apache / NGINX 需允許對(duì)該子目錄的目錄訪問(wèn)如 Apache 的AllowOverride與靜態(tài)文件訪問(wèn)配置。由于 SPA 路由回退仍需index.html建議同時(shí)配置子目錄下的重寫(xiě)規(guī)則如 Apache 的RewriteRule或 NGINX 的try_files ... /index.html避免直接訪問(wèn)/web-app/about時(shí)返回 404。AWS Elastic BeanstalkElastic Beanstalk 方案的核心思路與 Heroku 類似——平臺(tái)運(yùn)行 Node.js 進(jìn)程因此關(guān)鍵在于讓平臺(tái)以生產(chǎn)模式啟動(dòng)。完整背景可參考倉(cāng)庫(kù)維護(hù)者整理的 issue #2566原文鏈接見(jiàn) deployment.md。前置條件創(chuàng)建 AWS 賬號(hào)并登錄 AWS 控制臺(tái)安裝 EB CLI官方文檔提供 CLI-only 安裝方式配置 AWS EB Profile若使用持續(xù)部署工具可為 CD 工具單獨(dú)創(chuàng)建一個(gè)用戶通過(guò) CLI 或 Web 控制臺(tái)創(chuàng)建 Elastic Beanstalk 的 Application 與 Environment配置 EB CLI正確配置后本地應(yīng)存在.elasticbeanstalk/config.yml文件。配置步驟第 1 步在 package.json 中添加 AWS EB 啟動(dòng)腳本aws-eb:prod: npm run build npm run start:prod該腳本先在平臺(tái)實(shí)例上執(zhí)行生產(chǎn)構(gòu)建再以生產(chǎn)模式啟動(dòng)服務(wù)。第 2 步創(chuàng)建.ebextensions/aws.config文件# 詳見(jiàn) react-boilerplate issue #2566 option_settings: aws:elasticbeanstalk:container:nodejs: NodeCommand: npm run aws-eb:prod aws:elasticbeanstalk:application:environment: NPM_USE_PRODUCTION: false說(shuō)明NodeCommand覆蓋 EB 平臺(tái)默認(rèn)的 Node 啟動(dòng)命令指向aws-eb:prodNPM_USE_PRODUCTION: false讓平臺(tái)安裝全部依賴含 devDependencies因?yàn)樯a(chǎn)構(gòu)建webpack、babel 等都在構(gòu)建期運(yùn)行需要 devDependencies 中的構(gòu)建工具鏈。多環(huán)境注意如果存在多個(gè)環(huán)境如 staging / production建議移除.ebextensions中的NodeCommand條目改為在每個(gè)環(huán)境的 Web 控制臺(tái)手動(dòng)配置Configuration Software Node command以避免各環(huán)境共用同一命令配置。第 3 步創(chuàng)建.npmrc文件# 詳見(jiàn) react-boilerplate issue #2566 unsafe-permtrue說(shuō)明部分 npm 生命周期腳本如 postinstall在以 root 用戶運(yùn)行時(shí)可能因權(quán)限問(wèn)題被跳過(guò)unsafe-permtrue允許 npm 以當(dāng)前用戶而非降權(quán)后的 nobody執(zhí)行腳本確保依賴安裝階段的生命周期鉤子正常執(zhí)行。第 4 步提交改動(dòng)并通過(guò) EB CLI 部署git add -A git commit -m Configure Elastic Beanstalk deployment eb deploy {target environment name}eb deploy會(huì)打包當(dāng)前目錄代碼并上傳到指定環(huán)境平臺(tái)按.ebextensions配置執(zhí)行構(gòu)建與啟動(dòng)。部署方案對(duì)比與選擇建議平臺(tái)運(yùn)行方式核心改動(dòng)適用場(chǎng)景Heroku運(yùn)行 Node 服務(wù)start:prod添加Procfile、設(shè)置 buildpack需要服務(wù)端能力API、SSR、快速起步的 PaaS 托管AWS S3純靜態(tài)托管構(gòu)建./build并上傳、開(kāi)啟靜態(tài)網(wǎng)站托管純前端 SPA、低成本靜態(tài)托管可配合 CloudFront已有服務(wù)器子目錄由 Apache/NGINX 托管靜態(tài)文件修改 webpackpublicPath/BUILD_FOLDER_PATHhistory 加basename已有服務(wù)器、需要掛在既有域名子路徑下AWS Elastic Beanstalk運(yùn)行 Node 服務(wù)aws-eb:prod添加 npm script、.ebextensions、.npmrc需要 AWS 生態(tài)內(nèi)可彈性伸縮的 Node 托管無(wú)論選擇哪種方案底層都依賴兩條鏈路npm run build產(chǎn)出的./build靜態(tài)資源含 gzip 壓縮包與離線緩存文件以及npm run start:prod啟動(dòng)的 Express 生產(chǎn)服務(wù)server/index.js addProdMiddlewares.js。理解這一點(diǎn)后遇到任何部署問(wèn)題都可以回到構(gòu)建產(chǎn)物與生產(chǎn)中間件兩個(gè)層面排查。延伸閱讀部署與服務(wù)器配置的相關(guān)背景可參考 docs/general/README.md其中列出 Deployment 為目前 Heroku AWS 相關(guān)的部署指南以及 docs/general/server-configs.md常用的開(kāi)發(fā)/測(cè)試命令一覽見(jiàn) docs/general/commands.md?！久赓M(fèi)下載鏈接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.項(xiàng)目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 React Boilerplate 部署實(shí)戰(zhàn)指南：Heroku、AWS S3、子目錄與 Elastic Beanstalk 全流程
React Boilerplate 部署實(shí)戰(zhàn)指南Heroku、AWS S3、子目錄與 Elastic Beanstalk 全流程【免費(fèi)下載鏈接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.項(xiàng)目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate本篇部署指南以 React Boilerplatedocs/general/deployment.md為核心骨架系統(tǒng)講解將生產(chǎn)構(gòu)建產(chǎn)物發(fā)布到 Heroku、AWS S3、現(xiàn)有服務(wù)器子目錄以及 AWS Elastic Beanstalk 的完整流程。文章不僅復(fù)現(xiàn)每一步可復(fù)制的命令與配置文件還結(jié)合倉(cāng)庫(kù)源碼webpack 構(gòu)建配置、Express 生產(chǎn)中間件、npm scripts說(shuō)明每條指令背后的運(yùn)行原理幫助讀者在理解構(gòu)建-托管鏈路的基礎(chǔ)上獨(dú)立完成任意一種生產(chǎn)部署。部署前的準(zhǔn)備理解構(gòu)建產(chǎn)物與生產(chǎn)啟動(dòng)命令在進(jìn)入各平臺(tái)部署之前需要先理解 React Boilerplate 生產(chǎn)環(huán)境的兩條核心鏈路生產(chǎn)構(gòu)建與生產(chǎn)啟動(dòng)它們是所有部署方案共同依賴的基礎(chǔ)。生產(chǎn)構(gòu)建由 package.json 中的build腳本驅(qū)動(dòng)build: cross-env NODE_ENVproduction webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout該命令會(huì)調(diào)用 internals/webpack/webpack.prod.babel.js以 internals/webpack/webpack.base.babel.js 為公共配置進(jìn)行生產(chǎn)打包。產(chǎn)物默認(rèn)輸出到倉(cāng)庫(kù)根目錄下的./build文件夾build:clean腳本會(huì)先清理舊產(chǎn)物并額外產(chǎn)出 gzip 壓縮包與離線緩存相關(guān)的 Service Worker 文件offline-plugin與compression-webpack-plugin詳見(jiàn) webpack.prod.babel.js。生產(chǎn)啟動(dòng)由start:prod腳本驅(qū)動(dòng)start:prod: cross-env NODE_ENVproduction node server它啟動(dòng) server/index.js 中的 Express 服務(wù)。在NODE_ENVproduction時(shí)server/middlewares/frontendMiddleware.js 會(huì)加載addProdMiddlewaresserver/middlewares/addProdMiddlewares.js其核心邏輯包括使用compression()對(duì)響應(yīng)做 gzip 壓縮通過(guò)express.static(outputPath)以publicPath默認(rèn)/對(duì)外提供./build目錄下的靜態(tài)資源對(duì)任意未被靜態(tài)資源匹配的路由回退返回index.html保證前端路由react-router在刷新頁(yè)面時(shí)也能正確加載。默認(rèn)監(jiān)聽(tīng)端口由 server/port.js 決定優(yōu)先取命令行--port參數(shù)其次取環(huán)境變量PORT最后回退到3000。理解了這兩條鏈路下面各平臺(tái)的部署步驟就一目了然平臺(tái)只負(fù)責(zé)托管構(gòu)建產(chǎn)物或運(yùn)行生產(chǎn)服務(wù)。Heroku三步完成部署Heroku 是一個(gè)托管 PaaS 平臺(tái)它直接運(yùn)行 Node.js 服務(wù)進(jìn)程因此部署 React Boilerplate 的核心是讓 Heroku 執(zhí)行start:prod而非默認(rèn)的start。第 1 步創(chuàng)建 Procfile在項(xiàng)目根目錄創(chuàng)建名為Procfile的文件寫(xiě)入web: npm run start:prod原因Heroku 默認(rèn)以npm run start作為 Node.js 應(yīng)用的啟動(dòng)命令而start腳本運(yùn)行的是開(kāi)發(fā)模式cross-env NODE_ENVdevelopment node server。必須通過(guò) Procfile 覆蓋默認(rèn)啟動(dòng)命令讓 Heroku 以NODE_ENVproduction啟動(dòng)生產(chǎn)服務(wù)。第 2 步安裝 Node.js buildpack為你的 Heroku 應(yīng)用設(shè)置 Node.js buildpackheroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs#v133 -a [your app name]其中#v133是 buildpack 版本標(biāo)簽請(qǐng)務(wù)必替換為當(dāng)時(shí)最新的 buildpack 版本以官方 releases 頁(yè)發(fā)布的最新版本為準(zhǔn)。buildpack 負(fù)責(zé)在 Heroku 上安裝 Node.js 與 npm 依賴npm install然后執(zhí)行Procfile中聲明的命令。第 3 步標(biāo)準(zhǔn) Git 推送流程git add . git commit -m Made some epic changes as per usual git push heroku mastergit push heroku master會(huì)觸發(fā) Heroku 構(gòu)建拉取代碼 → 安裝依賴 → 運(yùn)行 buildpack 鉤子。由于start:prod在啟動(dòng)時(shí)才執(zhí)行node server而生產(chǎn)靜態(tài)資源依賴npm run build生成的./build目錄——如果構(gòu)建目錄未提交到倉(cāng)庫(kù)建議在package.json中補(bǔ)充postinstall鉤子如postinstall: npm run build讓平臺(tái)在安裝依賴后自動(dòng)構(gòu)建或確保./build產(chǎn)物已納入版本控制。這一點(diǎn)在不同平臺(tái)的構(gòu)建行為上略有差異需要結(jié)合自身 CI/CD 策略確認(rèn)。AWS S3七步完成靜態(tài)托管S3 只負(fù)責(zé)托管靜態(tài)文件不運(yùn)行 Node.js 進(jìn)程。因此 S3 方案的核心是在本地構(gòu)建出./build目錄再把它作為靜態(tài)網(wǎng)站整體上傳。第 1 步本地構(gòu)建npm install npm run build執(zhí)行后會(huì)在項(xiàng)目根目錄生成./build文件夾。注意 webpack.base.babel.js 中的默認(rèn)輸出配置output: Object.assign( { // Compile into js/build.js path: path.resolve(process.cwd(), build), publicPath: /, }, options.output, ),即產(chǎn)物輸出到./build資源引用路徑以站點(diǎn)根目錄/為基準(zhǔn)。publicPath為/意味著所有 JS/CSS 資源都以絕對(duì)路徑引用因此必須配合根路徑訪問(wèn)直接通過(guò) S3 靜態(tài)網(wǎng)站端點(diǎn)訪問(wèn)或綁定自定義域名才能正確加載資源——這也正是下文子目錄部署需要顯式修改publicPath的原因。第 2 步創(chuàng)建 S3 Bucket登錄 AWS 控制臺(tái)在Services下拉菜單中選擇S3進(jìn)入 S3 服務(wù)。第 3 步創(chuàng)建存儲(chǔ)桶點(diǎn)擊Create Bucket填寫(xiě)B(tài)ucket Name全局唯一與Region區(qū)域美國(guó)地區(qū)官方文檔推薦US Standard即us-east-1。點(diǎn)擊Create完成創(chuàng)建。第 4 步開(kāi)放公共讀權(quán)限選中剛創(chuàng)建的 Bucket在右側(cè)Properties選項(xiàng)卡下打開(kāi)Permissions手風(fēng)琴。點(diǎn)擊Add more permissions將Grantee設(shè)為Everyone或任何需要訪問(wèn)網(wǎng)站的主體授予View Permissions讀權(quán)限點(diǎn)擊Save。只有公開(kāi)可讀靜態(tài)網(wǎng)站端點(diǎn)才能向匿名訪客提供頁(yè)面內(nèi)容。第 5 步開(kāi)啟靜態(tài)網(wǎng)站托管打開(kāi)Static Website Hosting手風(fēng)琴這里會(huì)顯示網(wǎng)站的 URLendpoint形如example.s3-website-us-east-1.amazonaws.com。點(diǎn)擊Enable website hosting在Index document與Error document兩個(gè)輸入框中都填寫(xiě)index.html點(diǎn)擊Save。說(shuō)明SPA 應(yīng)用沒(méi)有真正的404 頁(yè)面Error document同樣指向index.html是為了讓前端路由如/about在直接訪問(wèn)或刷新時(shí)能回退到應(yīng)用入口由 react-router 接管后續(xù)渲染——這與生產(chǎn)中間件中app.get(*, ...)回退返回index.html的原理一致addProdMiddlewares.js。第 6 步上傳構(gòu)建產(chǎn)物并設(shè)為公開(kāi)在 Bucket 列表左側(cè)點(diǎn)擊該 Bucket 進(jìn)入點(diǎn)擊Upload選擇./build文件夾內(nèi)的所有文件點(diǎn)擊Start Upload。上傳完成后全選文件右鍵或點(diǎn)擊Actions按鈕選擇Make Public將全部對(duì)象設(shè)為公開(kāi)可讀。第 7 步驗(yàn)證訪問(wèn)點(diǎn)擊Properties選項(xiàng)卡打開(kāi)Static Website Hosting點(diǎn)擊其中的Endpoint鏈接。應(yīng)用即應(yīng)運(yùn)行在該 URL 上。注意S3 靜態(tài)網(wǎng)站端點(diǎn)不支持 HTTP 強(qiáng)制跳轉(zhuǎn) HTTPS如需 HTTPS 與自定義域名可配合 CloudFront CDN 分發(fā)為 Bucket 配置源站并在 Route 53 中綁定域名與證書(shū)。此為 S3 托管的最佳實(shí)踐補(bǔ)充官方文檔亦推薦此路線。部署到已有服務(wù)器的子目錄如果你想把應(yīng)用部署在已有服務(wù)器Apache / NGINX的一個(gè)子路徑下例如用戶通過(guò)https://host/web-app訪問(wèn)應(yīng)用則需要讓前端構(gòu)建與路由同時(shí)感知該子路徑。文檔說(shuō)明這一方案已在 APACHE 與 NGINX 服務(wù)器上驗(yàn)證通過(guò)。整個(gè)改動(dòng)分為四步。第 1 步讓 webpack 注入環(huán)境變量修改 internals/webpack/webpack.base.babel.js在文件頂部引入兩個(gè)可被環(huán)境變量覆蓋的常量 const BUILD_FOLDER_PATH process.env.BUILD_FOLDER_PATH || build; const PUBLIC_PATH process.env.PUBLIC_PATH || /;然后將output配置中的默認(rèn)值替換為上述常量- path: path.resolve(process.cwd(), build), - publicPath: /, path: path.resolve(process.cwd(), BUILD_FOLDER_PATH), publicPath: PUBLIC_PATH,最后在文件底部的EnvironmentPlugin中注入默認(rèn)值webpack.base.babel.js 中現(xiàn)有插件為NODE_ENV在此追加# inside EnvironmentPlugin PUBLIC_PATH: /,原理webpack.EnvironmentPlugin會(huì)把process.env.PUBLIC_PATH的值在編譯期注入到前端代碼中NODE_ENV即是現(xiàn)有用法webpack.base.babel.js。這樣構(gòu)建時(shí)若設(shè)置了PUBLIC_PATH/web-app/所有資源引用的絕對(duì)路徑前綴就會(huì)自動(dòng)變?yōu)?web-app/同時(shí)process.env.PUBLIC_PATH在瀏覽器端代碼里也能被正確替換。第 2 步為路由 history 添加 basename修改 app/utils/history.js將createBrowserHistory的調(diào)用改為傳入 basename- const history createHistory(); const basename process.env.PUBLIC_PATH; const history createHistory({ basename });倉(cāng)庫(kù)中 app/utils/history.js 當(dāng)前實(shí)現(xiàn)為import { createBrowserHistory } from history; const history createBrowserHistory(); export default history;原理瀏覽器 History API 沒(méi)有子目錄概念路由路徑/web-app/about中的/web-app只是前綴。history庫(kù)的basename選項(xiàng)會(huì)在匹配路由時(shí)剝離該前綴使應(yīng)用內(nèi)部仍然只感知/about同時(shí)PUBLIC_PATH由 webpack 在構(gòu)建期替換為真實(shí)值如/web-app/從而讓 history 與靜態(tài)資源前綴保持一致。第 3 步構(gòu)建到指定子目錄PUBLIC_PATH/web-app/ BUILD_FOLDER_PATHbuild/web-app npm run build執(zhí)行后生產(chǎn)構(gòu)建產(chǎn)物會(huì)輸出到./build/web-app目錄且所有資源引用與路由 basename 都以/web-app/為前綴。注意PUBLIC_PATH末尾的斜杠是必須的/web-app/而非/web-app否則拼接出的資源路徑會(huì)出錯(cuò)。第 4 步上傳到服務(wù)器 web-root將生成的web-app文件夾整體上傳/放置到服務(wù)器的 web-root 目錄下最終端點(diǎn)即為https://host/web-app服務(wù)器側(cè)要求Apache / NGINX 需允許對(duì)該子目錄的目錄訪問(wèn)如 Apache 的AllowOverride與靜態(tài)文件訪問(wèn)配置。由于 SPA 路由回退仍需index.html建議同時(shí)配置子目錄下的重寫(xiě)規(guī)則如 Apache 的RewriteRule或 NGINX 的try_files ... /index.html避免直接訪問(wèn)/web-app/about時(shí)返回 404。AWS Elastic BeanstalkElastic Beanstalk 方案的核心思路與 Heroku 類似——平臺(tái)運(yùn)行 Node.js 進(jìn)程因此關(guān)鍵在于讓平臺(tái)以生產(chǎn)模式啟動(dòng)。完整背景可參考倉(cāng)庫(kù)維護(hù)者整理的 issue #2566原文鏈接見(jiàn) deployment.md。前置條件創(chuàng)建 AWS 賬號(hào)并登錄 AWS 控制臺(tái)安裝 EB CLI官方文檔提供 CLI-only 安裝方式配置 AWS EB Profile若使用持續(xù)部署工具可為 CD 工具單獨(dú)創(chuàng)建一個(gè)用戶通過(guò) CLI 或 Web 控制臺(tái)創(chuàng)建 Elastic Beanstalk 的 Application 與 Environment配置 EB CLI正確配置后本地應(yīng)存在.elasticbeanstalk/config.yml文件。配置步驟第 1 步在 package.json 中添加 AWS EB 啟動(dòng)腳本aws-eb:prod: npm run build npm run start:prod該腳本先在平臺(tái)實(shí)例上執(zhí)行生產(chǎn)構(gòu)建再以生產(chǎn)模式啟動(dòng)服務(wù)。第 2 步創(chuàng)建.ebextensions/aws.config文件# 詳見(jiàn) react-boilerplate issue #2566 option_settings: aws:elasticbeanstalk:container:nodejs: NodeCommand: npm run aws-eb:prod aws:elasticbeanstalk:application:environment: NPM_USE_PRODUCTION: false說(shuō)明NodeCommand覆蓋 EB 平臺(tái)默認(rèn)的 Node 啟動(dòng)命令指向aws-eb:prodNPM_USE_PRODUCTION: false讓平臺(tái)安裝全部依賴含 devDependencies因?yàn)樯a(chǎn)構(gòu)建webpack、babel 等都在構(gòu)建期運(yùn)行需要 devDependencies 中的構(gòu)建工具鏈。多環(huán)境注意如果存在多個(gè)環(huán)境如 staging / production建議移除.ebextensions中的NodeCommand條目改為在每個(gè)環(huán)境的 Web 控制臺(tái)手動(dòng)配置Configuration Software Node command以避免各環(huán)境共用同一命令配置。第 3 步創(chuàng)建.npmrc文件# 詳見(jiàn) react-boilerplate issue #2566 unsafe-permtrue說(shuō)明部分 npm 生命周期腳本如 postinstall在以 root 用戶運(yùn)行時(shí)可能因權(quán)限問(wèn)題被跳過(guò)unsafe-permtrue允許 npm 以當(dāng)前用戶而非降權(quán)后的 nobody執(zhí)行腳本確保依賴安裝階段的生命周期鉤子正常執(zhí)行。第 4 步提交改動(dòng)并通過(guò) EB CLI 部署git add -A git commit -m Configure Elastic Beanstalk deployment eb deploy {target environment name}eb deploy會(huì)打包當(dāng)前目錄代碼并上傳到指定環(huán)境平臺(tái)按.ebextensions配置執(zhí)行構(gòu)建與啟動(dòng)。部署方案對(duì)比與選擇建議平臺(tái)運(yùn)行方式核心改動(dòng)適用場(chǎng)景Heroku運(yùn)行 Node 服務(wù)start:prod添加Procfile、設(shè)置 buildpack需要服務(wù)端能力API、SSR、快速起步的 PaaS 托管AWS S3純靜態(tài)托管構(gòu)建./build并上傳、開(kāi)啟靜態(tài)網(wǎng)站托管純前端 SPA、低成本靜態(tài)托管可配合 CloudFront已有服務(wù)器子目錄由 Apache/NGINX 托管靜態(tài)文件修改 webpackpublicPath/BUILD_FOLDER_PATHhistory 加basename已有服務(wù)器、需要掛在既有域名子路徑下AWS Elastic Beanstalk運(yùn)行 Node 服務(wù)aws-eb:prod添加 npm script、.ebextensions、.npmrc需要 AWS 生態(tài)內(nèi)可彈性伸縮的 Node 托管無(wú)論選擇哪種方案底層都依賴兩條鏈路npm run build產(chǎn)出的./build靜態(tài)資源含 gzip 壓縮包與離線緩存文件以及npm run start:prod啟動(dòng)的 Express 生產(chǎn)服務(wù)server/index.js addProdMiddlewares.js。理解這一點(diǎn)后遇到任何部署問(wèn)題都可以回到構(gòu)建產(chǎn)物與生產(chǎn)中間件兩個(gè)層面排查。延伸閱讀部署與服務(wù)器配置的相關(guān)背景可參考 docs/general/README.md其中列出 Deployment 為目前 Heroku AWS 相關(guān)的部署指南以及 docs/general/server-configs.md常用的開(kāi)發(fā)/測(cè)試命令一覽見(jiàn) docs/general/commands.md?！久赓M(fèi)下載鏈接】react-boilerplate A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.項(xiàng)目地址: https://gitcode.com/gh_mirrors/rea/react-boilerplate創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考