我通常使用API-Platform与React-Next.js前端和API-Platform分发的docker-compose配方。
这个设置只使用一个服务器——Caddy——来服务前端和后端,它工作得很好。
对于一个新项目,我试图复制相同的设置,但使用Angular前端,但我似乎缺少特定的Angular服务配置来使其工作。
运行docker-compose build
和docker-compose up
都工作,但当试图打开http://localhost
时,我在Docker日志上得到以下错误:
caddy_1 | {"level":"error","ts":1655627402.8252528,"logger";http.log.error","msg";dial tcp 172.19.0.4:4200: connect:连接被拒绝";请求"; {"remote_ip";172.19.0.1";remote_port";;64320";proto";HTTP/2.0";method";GET";主机";;localhost";;uri";;;;;英特尔Mac OS X 10.15;rv:102.0) Gecko/20100101 Firefox/102.0"],"Accept"; ["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/;q=0.8"],"Accept-Language"; ["fr-FR,en;q=0.7,en;q=0.3"],"Accept-Encoding"; ["gzip, deflate,br"],"Upgrade-Insecure-Requests"1","Sec-Fetch-Dest":["document","Sec-Fetch-Site":["none","Te":["trailers","Cookie"[],"Sec-Fetch-Mode":["navigate","Sec-Fetch-User":"? 1"},"tls":{"resumed"假的,"version": 772年,"cipher_suite": 4865年,"proto":"h2","server_name":"localhost"}},"d"status" uration": 0.001917417: 502年,"err_id":"gz2ubcw01","err_trace":"reverseproxy。"statusError (reverseproxy.go: 1196);}
完整的代码可以在这个存储库中获得。
在Next.js中,以下代码被添加到next.config.js
:
module.exports = {
serverRuntimeConfig: {
NEXT_PUBLIC_ENTRYPOINT: process.env.NEXT_PUBLIC_ENTRYPOINT || "https://localhost",
},
};
所以,我似乎缺少了让它工作的等效Angular服务器配置,而且我对Angular一点也不精通。
在docker-compose.yml
上,环境变量NEXT_PUBLIC_ENTRYPOINT
定义如下:
pwa:
build:
context: ./pwa
target: api_platform_pwa_prod
environment:
API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT: http://caddy
NEXT_PUBLIC_ENTRYPOINT: http://caddy
Dockerfile
at./pwa
如下:
ARG NODE_VERSION=16
FROM node:${NODE_VERSION}-alpine AS api_platform_pwa_common
EXPOSE 4200
WORKDIR /usr/src/pwa
COPY package*.json ./
RUN npm install -g @angular/cli @angular-devkit/build-angular && npm install
COPY . ./
VOLUME /usr/src/pwa/node_modules
FROM api_platform_pwa_common AS api_platform_pwa_dev
ENV API_PLATFORM_CLIENT_GENERATOR_OUTPUT .
CMD ["npm", "run", "start"]
FROM api_platform_pwa_common AS api_platform_pwa_prod
ENV NODE_ENV production
ARG NEXT_PUBLIC_ENTRYPOINT
RUN set -eux;
npm run build
CMD ["npm", "run", "start"]
尝试将其添加到您的ng服务中--host 0.0.0.0