Comments (2)
I had similar problem recently:
- multi-stage dockerfile
[email protected]
- docker image
node:20.8.0-alpine
[email protected]
At the end after checking all the installed dependencies under the .output/server/node_modules
the sharp
distribution for linux was there, since we have it pinned in the pnpm-lock.yaml
the project was working but always missing images.
But the problem was in how pnpm
resolves the dependencies. Unlike npm
or yarn
, pnpm
uses a content-addressable filesystem to store its packages, which results in a more efficient disk space usage and faster installations. However, this approach means that pnpm
heavily relies on symlinks within the node_modules
directory to link back to its global store, which is typically located in node_modules/.pnpm
.
So on the last stage of the Dockerfile, the one which launches the running container, I had to import node_modules
, so .output
folder only was not enough. Here's the simple Dockerfile, that also hsa a line of RUN pnpm rebuild sharp
just in case if pnpm-lock.yaml
misses the linux definition for sharp
.
# Base image for installing dependencies
FROM node:20.8.0-alpine as dependencies
WORKDIR /app
# Install system and build dependencies
RUN apk add --update --no-cache python3 make g++ vips-dev fftw-dev gcc libc6-compat autoconf automake libtool nasm libpng-dev \
&& ln -sf python3 /usr/bin/python \
&& python3 -m ensurepip \
&& pip3 install --no-cache --upgrade pip setuptools
# Install and configure pnpm
ENV PNPM_HOME=/pnpm
ENV PATH=$PNPM_HOME:$PATH
RUN corepack enable pnpm
# Copy package files and install dependencies
COPY ["package.json", "pnpm-lock.yaml", ".npmrc", "./"]
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
# https://github.com/nuxt/image/issues/1210#issuecomment-1917921546
RUN pnpm rebuild sharp
# Builder stage for compiling the application
FROM dependencies as builder
# Copy the entire project source files and build it
COPY . .
RUN pnpm run build
# Final production stage
FROM node:20.8.0-alpine as production
WORKDIR /app
ARG PORT=80
ENV NODE_ENV=production \
UV_THREADPOOL_SIZE=16 \
PORT=${PORT} \
HOST=0.0.0.0
# Copy built assets and necessary scripts from the builder stage
# Copy the dependencies so pnpm can use those during the runtime
COPY --from=dependencies /app/node_modules ./node_modules
COPY --from=builder /app/.output ./.output
EXPOSE $PORT
CMD ["node", ".output/server/index.mjs"]
HEALTHCHECK --start-period=5s --timeout=5s CMD curl -f http://0.0.0.0:${PORT}/health || exit 1
from image.
Duplicate of #1210
from image.
Related Issues (20)
- Lazy loading still loads all images after first page load HOT 5
- NuxtImg not show image when install with Bun HOT 4
- nuxt2: unable to load SVGs from S3 HOT 2
- image.dir Does not work in production HOT 3
- Responsive images, images based on breakpoint HOT 1
- NuxtImg can NOT load images file which located in assets folder
- How can i generate static images using storyblok as provider ? HOT 1
- Images cannot be parsed when obtained through event handlers
- Images not loading on Netlify HOT 12
- Bug in NuxtImg sizes configuration: Incorrect default size assignment HOT 4
- Bug in NuxtImg sizes configuration: Incorrect default size assignment #2
- Notion s3 url images can't be used HOT 4
- NuxtPicture doesn't accept resize in modifiers
- loading="lazy" don't work HOT 3
- Problem with generating WebP images and modern formats. HOT 1
- Prismic provider with netlify HOT 2
- Remote image path to s3 bucket is not working using Nuxt2 HOT 2
- Disable auto-detection of a specific provider HOT 3
- Missing fit modes on cloudinary provider, and existing ones are wrongly mapped HOT 4
- Add provider for h2non/imaginary HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from image.