Nginx Question posted in
The official documentation can be found here.

Vue + Docker + Nginx app is giving 404 after refreshing the browser

I dockerized a Vue app using nginx and the app is running well when started. The problem comes when I refresh the page, I am getting 404 error in an image attached. I tried to configure my nginx.conf file like solutions from How to use vue.js with Nginx? and still get the same error. I will show my current nginx.conf file and Dockerfile.

Error image:
enter image description here

nginx.conf file:

server {
    root /usr/share/nginx/html;
    
    index index.html;

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

Dockerfile:

# Step 1: Build Vue Project

FROM node:14.15.1 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: Create Nginx Server
FROM nginx:1.20 AS prod-stage
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Tags:

2

Answers


  1. 0

    I had the same problem. I found the answer here https://stackoverflow.com/a/54193517/7923299. Add this to your Dockerfile

    # Add nginx config
COPY [your_nginx_file.conf] /temp/prod.conf
RUN envsubst /app < /temp/prod.conf > /etc/nginx/conf.d/default.conf
    Login or Signup to reply.
  2. 0

    I would suggest adapt your nginx.conf because it is best practice not to run port 80 inside a container.

    I wrote a more detailed explanation here: How to config nginx for Vue-router on Docker

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search