无法在Docker中部署create-react-app --助手reverse_proxy和自动https

Question

我有一项非常简单的任务，就是为在docker-composse.yml中定义的服务设置reverse_proxy，并使用Caddy v2。一切都像预期的那样工作，除了某些原因，我似乎不能从任何类型的Docker容器中提供来自create-react-app的构建资产。

我已经在Dockerfile中尝试了以下两种方法

FROM nginx:alpine
COPY ./build /usr/share/nginx/html

FROM node:14-alpine

COPY ./build /app
COPY ./npm-shrinkwrap.json /app/.
COPY ./package.json /app/.

WORKDIR /app
RUN npm install -g serve && npm ci
CMD [ "serve", "-s", "/app", "-l", "80" ]

请注意，在这两种情况下，我都能够通过SSL连接，而不会在网络级别出现任何问题。在这两种情况下，我都会得到一个空白的白屏，并在控制台中显示错误Manifest: Line: 1, column: 1, Syntax error.。此错误在完全空白的manifest.json上报告。我已经验证了容器中的相同文件在正确的位置具有预期的内容，所以一定是有什么东西阻止了它的加载。

我甚至不知道从哪里开始。下面似乎有什么可疑的事情，我不知道，这从来不是一个好兆头。凯蒂只是简单地为index.html上的成功获取报告200。文件实际上是在浏览器中加载的，只是没有内容。

https://my-app.watheia.dev/

如果这不是我遗漏的一些显而易见的东西，那么我将发布一个完整的工作示例项目，但为了进行调试，我从create-react-app的默认输出开始，并添加了Dockerfile、docker-compose.yml和Cadyfile。

{
    # Global options block. Entirely optional, https is on by default
    # Optional email key for lets encrypt
    email admin@watheia.dev
    # Optional staging lets encrypt for testing. Comment out for production.
    # acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
}

my-app.watheia.dev {
  reverse_proxy / my-app:80
}

version: "3.1"

services:
  caddy:
    image: caddy/caddy:2.2.1-alpine
    container_name: caddy-service
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      # from project root
      - cady/Caddyfile:/etc/caddy/Caddyfile
      # These start out empty and fil with cache data
      - caddy/data:/data
      - caddy/config:/config

  my-app:
    build: .
    hostname: my-app.watheia.dev
    container_name: my-app
    depends_on:
      - caddy

PS:在没有serve -s ./build -l 8080支持的情况下，从主机系统运行SSL会正常工作。

附言:我这里的知识差距主要是在create-react-app上。这是我第一次尝试在localhost之外部署一个。

Answer 1

哦，我太傻了！

我只是代理了/路径。好了！我一定忽略了它上千次。它应该是：

my-app.watheia.dev {
  reverse_proxy my-app:80
}