將 React 應用部署到 Tomcat 伺服器上通常需要將其構建為靜態檔案,然後將這些檔案放入 Tomcat 的 webapps 目錄。以下是具體步驟:
步驟指南
1. 構建 React 應用
首先,你需要在本地構建你的 React 應用。
npm run build
這會在專案根目錄下生成一個 build
資料夾,裡面包含了最佳化後的靜態檔案。
2. 將構建結果放入 Tomcat
接下來,將構建生成的檔案上傳到 Tomcat 伺服器。
1、找到 Tomcat 的 webapps 目錄:
通常位於 TOMCAT_HOME/webapps
,其中 TOMCAT_HOME
是你安裝 Tomcat 的目錄。
2、建立一個新目錄:
在 webapps
目錄下建立一個新的資料夾(例如 myapp
),用於存放你的 React 應用。
3、複製靜態檔案:
將 build
資料夾中的所有內容(包括 index.html
, JavaScript 和 CSS 檔案)複製到剛剛建立的 myapp
目錄中。
3. 配置 Tomcat
為了確保 React 應用可以正常工作,你可能需要修改 Tomcat 的 web.xml
檔案來支援 HTML5 路由。
1、開啟 web.xml
:
在 TOMCAT_HOME/conf/web.xml
中找到該檔案。
2、新增錯誤頁面配置:
在 <web-app>
標籤內新增如下配置:
<error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>
4、在TOMCAT_HOME/conf/server.xml 中,
將你放到webapps
資料夾,設為Root資料夾
完成:瀏覽器輸入 localhost:8080/home 即可訪問成功