如何將React專案,部署到Web伺服器的Tomcat 上

信铁寒胜發表於2024-10-10

將 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 即可訪問成功

相關文章