我正在嘗試在前端部署 Vue 應用程式，在后端部署 .net 核心 api。使用 docker-compose 檔案我已經能夠啟動網路和容器，但我很難讓它們進行通信。但是，我對 docker 很陌生，但我知道 Vue 應用程式 dockerfile 使用 Nginx 基礎來提供 Web 應用程式，但似乎這可能會影響網路通信，因為前端容器沒有決議后端容器名稱，盡管它們應該決議與默認網橋驅動程式在同一個虛擬專用網路中。在前端容器中執行 bash shell 并對后端容器執行 curl 時，我確實得到了正確的回應。
我確實嘗試將后端容器公開給主機，然后使用服務器 IP 從前端訪問它，但這確實有效，但是我希望不必以這種方式公開我的 api，并希望通過 docker 使其作業如果可能，虛擬專用網路。
我在前端嘗試的示例 url 遇到名稱未決議錯誤： littlepiggy-api/api 或 littlepiggy-api:5000/api
前端 Dockerfile
FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
后端 Dockerfile
FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 5000
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["LittlePiggy.Api/LittlePiggy.Api.csproj", "LittlePiggy.Api/"]
RUN dotnet restore "LittlePiggy.Api/LittlePiggy.Api.csproj"
COPY . .
WORKDIR "/src/LittlePiggy.Api"
RUN dotnet build "LittlePiggy.Api.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "LittlePiggy.Api.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "LittlePiggy.Api.dll"]
Docker-compose 檔案
version: '3'
services:
front:
container_name: littlepiggy-front
image: josh898/angie-app-front:latest
ports:
- 80:80
networks:
- littlepiggy
depends_on:
- api
api:
container_name: littlepiggy-api
image: josh898/angie-app-backend:latest
networks:
- littlepiggy
networks:
littlepiggy:
driver: bridge
uj5u.com熱心網友回復：
您需要配置 Nginx 以將匹配 /api 路由的請求傳遞到后端服務。
如果你創建一個這樣的 nginx 組態檔，名為 nginx.conf 并將其放在你的前端目錄中
server {
listen 80;
location / {
index index.html;
root /usr/share/nginx/html;
try_files $uri $uri/ $uri.html =404;
}
location /api/ {
proxy_pass http://littlepiggy-api/;
}
}
然后通過將前端 Dockerfile 更改為將其復制到前端容器中
FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
然后對 http://localhost/api/xxxx 的請求應該傳遞到后端，對 http://localhost/index.html 的請求應該由 Nginx 容器直接提供服務。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403649.html
標籤：
上一篇：Emit沒有在VueJS中注冊？