CODEWITHSUNDEEP
dockernginxvue.jsdocker-composevuepress
briancaffey
briancaffey

Reputation: 2558

Using VuePress with docker and NGINX passthrough

I'm developing an application with Vue and docker, and I'm building a VuePress site to serve as project documentation. My project has two docker-compose files for development and production. I currently have my Vue app working well with both dev and prod environments, but I'm struggling to get my VuePress working with NGINX. 

  upstream docs {
    server vuepress:8080;
  }

...

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

In my development docker-compose file, I have the following for 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

And here is the structure of my VuePress folder: 

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

I'm able to access the VuePress app at localhost:8085, and changes are reflected when I save the source files and refresh the browser. What I would like to do is configure docker and NGINX to make the VuePress app accessible at localhost/docs in development, and at my-domain.com/docs in production as well. Is there an error somewhere in my configuration?

When I visit localhost/docs, I get the following error in Chrome:

Uncaught SyntaxError: Unexpected token <

Upvotes: 2

Views: 2330

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

Here's the configuration that works for me using 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
}

Upvotes: 1

Related Questions