vue js and vite does not work on HTTPS Docker-Nginx

21 Views Asked by At

I'm new to Docker. When accessing the application using the domain name, it shows a blank page, and the index-oyfrbKTH.js and index-oyfrbKTH.css files are not being overwritten. The logs don't indicate any errors. However, when accessing it using the IP address, everything works fine.

my default.conf.nginx

 server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name ypsite.online www.ypsite.online;
        server_tokens off;

        error_log  /var/log/nginx/error.log debug;

        location /.well-known/acme-challenge/ {
            root /var/www/certbot;
        }
        location / {
        return 301 https://ypsite.online$request_uri;
        }
    }

    server {
        listen 443 default_server ssl http2;
        listen [::]:443 ssl http2;

        server_name ypsite.online www.ypsite.online;
        ssl on;
        ssl_certificate /etc/nginx/ssl/live/ypsite.online/fullchain.pem;
        ssl_certificate_key /etc/nginx/ssl/live/ypsite.online/privkey.pem;
        
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /frontend/ {
            proxy_pass http://ors-frontend/;
            #try_files $uri $uri/ /index.html;
            #proxy_http_version 1.1;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #proxy_set_header Host $http_host;
            #proxy_set_header X-Real-IP $remote_addr;
        }

    }

my docker-compose.yml

version: '3'
services:
    www:
        image: nginx:stable-alpine
        volumes:
            - ./etc/nginx/conf.d/default.conf.nginx:/etc/nginx/conf.d/default.conf
            - ./certbot/www:/var/www/certbot/:ro
            - ./certbot/conf/:/etc/nginx/ssl/:ro
        ports:
            - 80:80
            - 443:443
        restart: always
        depends_on:
            - ors-frontend
    ors-frontend:
        build:
            context: .
            dockerfile: ./etc/dockerize/ors-frontend/Dockerfile
        ports:
        - 8080:80
    certbot:
        image: certbot/certbot:latest
        volumes:
            - ./certbot/www/:/var/www/certbot/:rw
            - ./certbot/conf/:/etc/letsencrypt/:rw

my dockerfile

# build stage
FROM node:21.6.2-alpine as build-stage
WORKDIR /app
COPY ./ORS-frontend/package*.json ./

RUN npm install
COPY ./ORS-frontend .
RUN npm run build
# RUN npm run dev

# 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;"]

ip address result: enter image description here

domain name result: enter image description here

when accessing the application via the domain name, the index-oyfrbKTH.js and index-oyfrbKTH.css files retain the default content from Nginx. I'm not sure what I'm doing wrong

0

There are 0 best solutions below