1. Caddy version (caddy version):
caddy:2.1.1
2. How I run Caddy:
I run Caddy using docker here is my docker compose file.
a. System environment:
ubuntu : 18.04
Docker
b. Command:
docker build \
-t chemmy-fashion-frontend-prod:prod \
--build-arg CADDYFILE=Caddyfile \
--build-arg BASE_URL=https://www.chemmyfashion.com/ \
--build-arg NODE_ENV=production \
-f Dockerfile .
c. Service/unit/compose file:
version: "3"
services:
fashion-frontend:
image: fashion-frontend-prod:${ENV}
restart: unless-stopped
ports:
- "80:80"
- "443:443"
networks:
- fashion-app
volumes:
- caddy-data:/data
- caddy-config:/config
fashion-backend:
image: fashion-backend
restart: unless-stopped
env_file: ./fashion-backend/config/${ENV}.env
ports:
- "5000:5000"
networks:
- fashion-app
volumes:
- /var/log/services/fashion-backend/:/var/log/services/fashion-backend/
- /root/treble/uploads/fashionuploads/:/usr/src/app/fashionuploads
networks:
fashion-app:
driver: bridge
volumes:
mongo-data:
driver: local
caddy-data:
driver: local
caddy-config:
driver: local
And here is my frontend project docker file
### first Stage
FROM node:14-slim AS builder
WORKDIR /usr/src/app
COPY ./package.json ./
COPY ./yarn.lock ./
RUN npm install
COPY . .
ARG BASE_URL
ENV REACT_APP_BASE_URL=${BASE_URL} NODE_ENV=${NODE_ENV}
RUN yarn build
### second stage
FROM caddy:2.1.1
ARG CADDYFILE
COPY ${CADDYFILE} /etc/caddy/Caddyfile
COPY --from=builder /usr/src/app/build/ /srv
EXPOSE 80
EXPOSE 443
d. My complete Caddyfile or JSON config:
www.chemmyfashion.com:443 {
tls treblesolution@gmail.com
root * /srv
route {
reverse_proxy /api* fashion-backend:5000
try_files {path} {path}/ /index.html
file_server
}
}
3. The problem I’m having:
I have dockerize my MERN application.
as 2 separate project (backend and frontend)
When build (using docker) locally uploaded images (.png files) are loaded to the site without any issue.But after I configured my domain and built the application on digitalocean (droplet) uploaded images are not loading.
when I build (docker) locally I can access the image from this path : http://localhost:5000/fashionuploads/2022-01-04T12-59-56.790Z-shirt.png
but after build this production which configured on to domain I couldn’t able to load the image this path
https://www.chemmyfashion.com/fashionuploads/2022-01-04T14-24-29.772Z-images.jpeg
I am using
<img src=""> html tag to load the image from frontend.
I am very new to using Caddy server. Can anyone help me out to solve this problem I am struggling this with 2 days but couldn’t able to find a solution
N.B. : I have 2 seperate docker compose and docker files for local build and production build. I only put my production docker and caddy files here because of to reduce the content
4. Error messages and/or full log output:
No errors. But on client side images are not loading form backend only image path show as following
https://www.chemmyfashion.com/fashionuploads/2022-01-04T14-24-29.772Z-images.jpeg
5. What I already tried:
I google it but couldn’t able to find proper solution
6. Links to relevant resources:
