Dockerizing an Astro static website is straightforward. First, we build the site and then serve it with a lightweight web server like Nginx or Apache.
Here is an example with Nginx.
- Create a Dockerfile in your project root directory
# ---- Base ---- FROM node:lts AS base WORKDIR /app COPY . . # install all dependencies RUN npm install # ---- Build ---- FROM base AS build WORKDIR /app RUN npm run build # ---- Release ---- FROM nginx:1.21-alpine # copy static files to nginx server root COPY --from=build /app/dist /usr/share/nginx/html # start Nginx in the foreground when the container is run CMD ["nginx", "-g", "daemon off;"]
Here we use a multi-stage build. In the first stage—base—we copy the project’s content and install all the dependencies.
Next, we build the site. Note that the build artifacts will be in the
dist directory unless you change the output directory in your Astro config.
In the last stage—release—we copy the build artifacts to the Nginx server root directory.
/usr/share/nginx/html is the default directory where Nginx looks for files to serve when running inside a Docker container.
- Build the Docker image
docker build -t astro-nginx .
- Run the Docker container
docker run -d -p 8080:80 --name astro-nginx astro-nginx
This command starts a Docker container from your image and maps port 8080 on your host to port 80 in the container, where Nginx is listening by default.
-d flag runs the container in detached mode, and the
--name flag gives the container a name.
After running these steps, your Astro site should be running at http://localhost:8080.
You can then deploy the container to your favorite cloud provider.