I dockerise a React application for production. I added Nginx has the server inside Docker. my Dockerfile below:
FROM node:14-alpine AS builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine AS server
WORKDIR /usr/share/nginx/html
COPY --from=builder ./app/build .
CMD ["nginx", "-g", "daemon off;"]
How do I create TLS certificate for this application using Let's Encrypt? Thank you.
Related
I am kind of stuck trying to solve a problem. I have a Dockerfile as per the guide, everything works fine.
Now I want to add an automatic SSL from let's encrypt so it always runs with https.
How would you go with solving this question? Here is my Dockerfile.
FROM node:14.17.0-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm cache verify
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
After the image builds, I launch it with:
docker run -it -p 80:80 -d --rm --name app-container vuejs
Thanks for the help :)
When served locally (yarn, vite), my vue app works fine.
However, when built and served in production mode, all my DOM elements are missing the "id" attribute 🤔
As a result, document.getElementById(id) returns null all the time.
I checked the sources in the image and my dynamic ids seem to be present:
Source:
<div id="myId" + someUniqueId><div>
Result:
[...] {id:"myId"+unref(r),modelValue:y.value" [...]
I don't know where to look anymore - any ideas?
This is my docker file (if relevant)
FROM node:18-buster AS build
WORKDIR /app
COPY package*.json ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn run build-no-check #does a vite build (instead of vue-tsc --noEmit && vite build)
FROM nginx:1.23 AS final
EXPOSE 80
COPY ./entrypoint.sh /usr/share/nginx/
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
RUN chmod +x /usr/share/nginx/entrypoint.sh
COPY --from=build /app/dist /usr/share/nginx/html
ENTRYPOINT ["/usr/share/nginx/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]
It looks like you try use yarn install --frozen-lockfile but dont copy the yarn.lock.
Use COPY yarn.lock ./ right after copy package.json
I'm trying to build an nginx image for a react project app.
Here is my Dockerfile:
FROM node:14-alpine as myapp
EXPOSE 3000
WORKDIR = /snakeapp
COPY package.json .
RUN yarn install --network-timeout 1000000
COPY . .
RUN yarn build
FROM nginx
COPY --from=myapp /snakeapp/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
The error I'm getting during the build image is:
...
Status: Downloaded newer image for nginx:latest
---> 08b152afcfae
Step 9/11 : COPY --from=myapp /snakeapp/build /usr/share/nginx/html
COPY failed: stat snakeapp/build: file does not exist
Could you please give me a hint which directory isn't existing.
If I create only the first image, the ls /snakeapp shows me the following content, as we can see the build file exist.
/= /snakeapp # ls
build package-lock.json src yarn.lock
node_modules package.json webpack.config.js
Did you notice the weird folder name /= /snakeapp? That's because of WORKDIR = .... Remove that =.
WORKDIR /snakeapp
I have problems with copying files into docker image. I'm a newbie in doing this and I have browsed several questions related, but none of them resolved my issue.
## base image
FROM node:13.6.0-stretch as build
WORKDIR /app
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
RUN npm ci
COPY . /app
RUN npm run build
FROM nginx:1.17.7
COPY --from=build /app/dist /usr/share/nginx/html #this works
COPY --from=build /app/nginx/default.conf /etc/nginx/conf.d/default.conf ## this works but.. not
RUN cat /etc/nginx/conf.d/default.conf; return 0 ## cat shows that the file is modified
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
RUN cat /etc/nginx/conf.d/default.conf; return 0 ## once again verified
So in the log, it looks to be modified to desired file.
But when I check in deployed container:
sudo docker exec -it 9e2f628dc8a9 cat /etc/nginx/conf.d/default.conf
it has the default config provided by nginx.
I tried copying it with different name, still with no results.
Any advises highly appreciated.
I have Dockerfile to deploy my frontend, which is in react.
This is what I have in my dockerfile.
# Stage 1
FROM node:8 as react-build
WORKDIR /app
COPY . ./
RUN yarn
RUN yarn build
# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
When I run $ docker build . -t frontend
I am getting an error on step 8, which fails to copy the nginx.conf
Step 8/10 : COPY --from=react-build /app/build /usr/share/nginx/html
COPY failed: stat /var/lib/docker/overlay2/fef4deafd532bb0aa7eaea50ae25412e93f7972eab3a0579fe494de444d86a0b/merged/app/build: no such file or directory
But the nginx conf file exists, and I don't understand what's going on there, can somebody enlighten me what's going on?
http://prntscr.com/l2to47 This is my project structure, which clearly says there are nginx.conf but Docker can't find it.
It doesn't fail to copy the nginx.conf file, it fails to find the data generated during the react-build stage.
I had the same problem once, that I solved changing the WORKDIR directory, since the original one was exposed as VOLUME (and it seems like it doesn't work using multi-stage builds). Try with a different one, e.g.:
# Stage 1
FROM node:8 as react-build
WORKDIR /builddir
COPY . ./
RUN yarn
RUN yarn build
# Stage 2 - the production environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /builddir/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
And see if it solves the problem.