Railway•4mo ago

Nginx won't redirect to index.html

I have a react project that I am deploying to railway. When I access its root route, it works fine, but whenever I try to go to for example /profile and refresh page I get 404. Here is my nginx config

events {
    worker_connections 1024;
}

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

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

        location / {
            try_files '' /index.html =404;
        }

        # Cache control for static assets
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires max;
            add_header Cache-Control "public, max-age=31536000";
        }

        # Error page
        error_page 404 /index.html;
    }
}

events {
    worker_connections 1024;
}

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

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

        location / {
            try_files '' /index.html =404;
        }

        # Cache control for static assets
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires max;
            add_header Cache-Control "public, max-age=31536000";
        }

        # Error page
        error_page 404 /index.html;
    }
}

and here is my Dockerfile:

# Stage 1: Build the Vite application
FROM node:18-alpine AS builder

# Set working directory
WORKDIR /app

# Install pnpm globally
RUN npm install -g pnpm

# Copy package.json and pnpm-lock.yaml
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN pnpm install

# Copy the rest of the application code
COPY . .

# Build the application
RUN pnpm run build

# Stage 2: Serve the application using Nginx
FROM nginx:alpine

# Copy the built application from the builder stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy the Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

# Stage 1: Build the Vite application
FROM node:18-alpine AS builder

# Set working directory
WORKDIR /app

# Install pnpm globally
RUN npm install -g pnpm

# Copy package.json and pnpm-lock.yaml
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN pnpm install

# Copy the rest of the application code
COPY . .

# Build the application
RUN pnpm run build

# Stage 2: Serve the application using Nginx
FROM nginx:alpine

# Copy the built application from the builder stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy the Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

any ideas? Also is it worth exploring caddy for this use case maybe?

14 Replies

Percy•4mo ago

Project ID: 8f9a18e5-76b5-4894-a3fc-54f4ddfe030b

klitchevoOP•4mo ago

8f9a18e5-76b5-4894-a3fc-54f4ddfe030b

Brody•4mo ago

Caddy is definitely worth exploring! create react app?

klitchevoOP•4mo ago

Nope, this is set up using vite

Brody•4mo ago

you should be able to remove the Dockerfile and nginx.conf files, then copy the nixpacks.toml and Caddyfile from this repo into yours - https://github.com/brody192/vite-react-template

klitchevoOP•4mo ago

Tried it, but had some issues with it. Will give it another go tomorrow and let you know how it goes. Thanks!

Brody•4mo ago

what issues did you have with it?

klitchevoOP•4mo ago

#12 0.733  WARN  Ignoring not compatible lockfile at /app/pnpm-lock.yaml

 

#12 0.735  ERR_PNPM_NO_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is absent

#12 0.735

#12 0.735 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"

#12 ERROR: process "/bin/bash -ol pipefail -c pnpm i --frozen-lockfile" did not complete successfully: exit code: 1

-----

> [stage-0  8/14] RUN --mount=type=cache,id=s/f076747b-8065-4154-b62a-3eb67aa213c2-/root/local/share/pnpm/store/v3,target=/root/.local/share/pnpm/store/v3 pnpm i --frozen-lockfile:

0.733  WARN  Ignoring not compatible lockfile at /app/pnpm-lock.yaml

0.735  ERR_PNPM_NO_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is absent

0.735

0.735 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"

-----

 

2 warnings found (use --debug to expand):

 - UndefinedVar: Usage of undefined variable '$NIXPACKS_PATH' (line 23)

LegacyKeyValueFormat: "ENV key=value" should be used instead of legacy "ENV key value" format (line 23)

 

Dockerfile:25

-------------------

23 |     ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_PATH

24 |     COPY . /app/.

25 | >>> RUN --mount=type=cache,id=s/f076747b-8065-4154-b62a-3eb67aa213c2-/root/local/share/pnpm/store/v3,target=/root/.local/share/pnpm/store/v3 pnpm i --frozen-lockfile

26 |

27 |     # build phase

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c pnpm i --frozen-lockfile" did not complete successfully: exit code: 1

 

Error: Docker build failed

#12 0.733  WARN  Ignoring not compatible lockfile at /app/pnpm-lock.yaml

 

#12 0.735  ERR_PNPM_NO_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is absent

#12 0.735

#12 0.735 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"

#12 ERROR: process "/bin/bash -ol pipefail -c pnpm i --frozen-lockfile" did not complete successfully: exit code: 1

-----

> [stage-0  8/14] RUN --mount=type=cache,id=s/f076747b-8065-4154-b62a-3eb67aa213c2-/root/local/share/pnpm/store/v3,target=/root/.local/share/pnpm/store/v3 pnpm i --frozen-lockfile:

0.733  WARN  Ignoring not compatible lockfile at /app/pnpm-lock.yaml

0.735  ERR_PNPM_NO_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is absent

0.735

0.735 Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"

-----

 

2 warnings found (use --debug to expand):

 - UndefinedVar: Usage of undefined variable '$NIXPACKS_PATH' (line 23)

LegacyKeyValueFormat: "ENV key=value" should be used instead of legacy "ENV key value" format (line 23)

 

Dockerfile:25

-------------------

23 |     ENV NIXPACKS_PATH /app/node_modules/.bin:$NIXPACKS_PATH

24 |     COPY . /app/.

25 | >>> RUN --mount=type=cache,id=s/f076747b-8065-4154-b62a-3eb67aa213c2-/root/local/share/pnpm/store/v3,target=/root/.local/share/pnpm/store/v3 pnpm i --frozen-lockfile

26 |

27 |     # build phase

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c pnpm i --frozen-lockfile" did not complete successfully: exit code: 1

 

Error: Docker build failed

And lockfile exists

Brody•4mo ago

please see this docs section - https://nixpacks.com/docs/providers/node#corepack

klitchevoOP•4mo ago

had to specify pnpm version

Brody•4mo ago

yep!

klitchevoOP•4mo ago

oh you already posted link, did not even see it 😄 this seems to be doing good so far, thanks! automatic HTTPS is completely disabled for server this is not relevant I assume

klitchevoOP•4mo ago

klitchevoOP•4mo ago

I get this now tho :/ nvm, port was wrong

Gaming

Programming

Nginx won't redirect to index.html