Host Production Setup

[k-kleber]

Hey,

I am trying to host a slightly tweaked version, but can't get it to work when not using the dev setup.

The app launches with my setup but when uploading a log it gets stuck on the loading animation.

I have tried running it inside a docker compose setup with nginx:

ngnix.conf

worker_processes 1;

events { worker_connections 1024; }

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name _;
        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Dockerfile.prod

FROM node:20 AS build-stage

# Create app directory
WORKDIR /usr/src/app

# Install git (needed for submodules)
RUN apt-get update && apt-get install -y git

# Create a non-root user
RUN useradd -m -u 2000 nodeuser

# Copy package files first for better caching
COPY package*.json ./

# Install dependencies
RUN npm install

# Bundle app source
COPY . .

# Initialize and update git submodules
RUN git init
RUN git submodule init
RUN git submodule update

# Run the update-browserslist-db as suggested in the warning
RUN npx update-browserslist-db@latest

# Change ownership of the app directory to the non-root user
RUN chown -R nodeuser:nodeuser /usr/src/app

# Switch to non-root user
USER nodeuser

# Configure git to trust the mounted directory
RUN git config --global --add safe.directory /usr/src/app

# Build the Vue app
RUN npm run build

FROM nginx:alpine AS production-stage
COPY --from=build-stage /usr/src/app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose-prod.yaml

version: "3.8"

services:
  uavlogviewer:
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    restart: unless-stopped
    environment:
      - NODE_ENV=production

Thanks for any help or pointers.

[Williangalvani]

Hi, if it gets stuck in the loading animation that is likely due to the VUE_APP_CESIUM_TOKEN being invalid/unset.
It needs to be set in the build step. check here