我正在嘗試找到一種方法來托管多個（目前是 2 個）React 應用程式，每個應用程式都是用CRA創建的。兩個應用程式都應該在單個 NGINX 實體之后運行，并且可以在單獨的目錄中訪問：
應用程式1->http://localhost/app1
應用程式2->http://localhost/app2
像這樣創建的 2 個 React 應用程式：
npx create-react-app app1
npx create-react-app app2
為了使用 NGINX 托管兩個 React 應用程式，每個 CRA 應用程式的生產構建 ( npm run build) 被復制到 NGINX 靜態目錄/var/www/app[1|2]
# App1
npm run build
cp build/* /var/www/app1
# App2
npm run build
cp build/* /var/www/app2
這就是 NGINX 可以設定為托管單個 CRA 應用程式的方式：
# /etc/nginx/conf.d/default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /var/www/app1;
index index.html;
}
}
現在我正在嘗試擴展此示例，以便兩個 CRA 應用程式都由一個 NGINX 托管。
site.conf對于 NGINX和每個 React 應用程式本身，哪些修改是必要的？
我將上面顯示我的（不完整）示例的代碼推送到 Github 以供參考：https ://github.com/wolkenarchitekt/multiple-cra-apps-behind-nginx 。為了簡單起見，代碼使用了 docker-compose，但最終整個堆疊應該在沒有 Docker 的情況下運行，因此不能為每個 React 應用程式運行單獨的 Docker 服務。
uj5u.com熱心網友回復：
為了在同一個域但不同的子檔案夾上運行兩個 React 應用程式，您應該只需要兩個location塊：
root /var/www;
location /app1/ {
index index.html;
}
location /app2/ {
index index.html;
}
React 應用程式中的必要更改通常包括：
- 如此處所述更改中的
homepage欄位package.json - （僅在使用 react-router 時適用，舊版本應該類似地作業）將 for 更改
basename為BrowserRouter您的子目錄：<BrowserRouter basename='/app1'>
編輯：
在檢查了您的存盤庫之后（在您推送新分支之前），我剛剛使用以下 Dockerfile 進行了作業（對于開發來說更糟糕，因為每次代碼更改都需要重新構建，我喜歡多階段構建，這將更適合生產環境):
FROM node:16 as builder1
WORKDIR /var/app
COPY app1/package.json .
COPY app1/package-lock.json .
RUN npm i
COPY app1/public/ ./public
COPY app1/src/ ./src
RUN npm run build
FROM node:16 as builder2
WORKDIR /var/app
COPY app2/package.json .
COPY app2/package-lock.json .
RUN npm i
COPY app2/public/ ./public
COPY app2/src/ ./src
RUN npm run build
FROM nginx:mainline-alpine
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY ./nginx/site.conf /etc/nginx/conf.d/default.conf
COPY --from=builder1 /var/app/build/ /var/www/app1
COPY --from=builder2 /var/app/build/ /var/www/app2
以下site.conf對我有用：
server {
listen 80;
listen [::]:80;
server_name localhost;
root /var/www;
location /app1 {
index index.html;
}
location /app2 {
index index.html;
}
}
我只需要分別更改homepage為/app1和/app2，更改app2/App.js為實際輸出App2，然后
docker build . -t testreactmultiple:latest
docker run -it -p 3000:80 docker.io/library/testreactmultiple:latest
/app1我希望這可以幫助您重現在請求索引時出錯但在請求或請求時作業正常的作業容器/app2。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428585.html