将 VuePress 与 docker 和 NGINX 直通结合使用

Question

我正在使用 Vue 和 docker 开发一个应用程序，我正在构建一个 VuePress 站点作为项目文档。我的项目有两个 docker-compose 文件用于开发和生产。我目前让我的 Vue 应用程序在开发环境和生产环境中都能很好地工作，但我正在努力让我的 VuePress 与 NGINX 一起工作。

  upstream docs {
    server vuepress:8080;
  }

...

  location /docs/ {
    proxy_pass http://docs/;
  }

在我的开发 docker-compose 文件中，我有以下 VuePress：

  vuepress:
    container_name: vuepress_dev_vet
    build:
      context: .
      dockerfile: ./vuepress/dev/Dockerfile
    command: npm run docs:dev
    volumes:
      - ./vuepress/src/:/app/
    networks:
      - main
    ports:
      - 8085:8080

这是我的 VuePress 文件夹的结构：

.
├── dev
│   └── Dockerfile
└── src
    ├── docs
    │   ├── guide
    │   │   └── README.md
    │   ├── README.md
    │   └── start
    │       └── README.md
    └── package.json

我可以在 localhost:8085 访问 VuePress 应用程序，当我保存源文件并刷新浏览器时，更改会反映出来。我想做的是配置 docker 和 NGINX，使 VuePress 应用程序在开发中可以在 localhost/docs 访问，在生产中也可以在 my-domain.com/docs 访问。我的配置中某处有错误吗？

当我访问 localhost/docs 时，我在 Chrome 中收到以下错误：

Uncaught SyntaxError: Unexpected token <

Answer 1

这是使用 richarvey/nginx-php-fpm:latest 对我有用的配置。

mydomain.localhost.conf

server {
    server_name mydomain.localhost;
    charset utf-8;

    location / {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://localhost:35432;
    }
}

/etc/hosts

0.0.0.0  mydomain.localhost

mydomain/.vuepress/config.js

module.exports = {
    title: 'MyDomain',
    host: '0.0.0.0',
    port: 35432
}

将 VuePress 与 docker 和 NGINX 直通结合使用

Using VuePress with docker and NGINX passthrough

nginx

docker

vue.js

docker-compose

vuepress