Build your Astro Site with Docker
Docker is a tool to build, deploy, and run applications using containers.
Docker images and containers can be deployed to many different platforms, like AWS, Azure, and Google Cloud. This recipe won’t cover how to deploy your site to a specific platform but will show you how to set up Docker for your project.
Prerequisites
Section titled Prerequisites- Docker installed on your local machine. You can find installation instructions for your operating system here.
- A Dockerfile in your project. You can learn more about Dockerfiles here and use the Dockerfiles in the following section as a starting point.
Creating a Dockerfile
Section titled Creating a DockerfileCreate a file called Dockerfile
in your project’s root directory. This file contains the instructions to build your site, which will differ depending on your needs. This guide can’t show all possible options but will give you starting points for SSR and static mode.
This Dockerfile will build your site and serve it using Node.js on port 3000
and therefore requires the Node adapter installed in your Astro project.
FROM node:lts AS runtime
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
ENV HOST=0.0.0.0
ENV PORT=3000
EXPOSE 3000
CMD node ./dist/server/entry.mjs
Static
Section titled StaticApache (httpd)
Section titled Apache (httpd)The following Dockerfile will build your site and serve it using Apache htppd on port 80
with the default configuration.
FROM node:lts AS build
WORKDIR /app
COPY . .
RUN npm i
RUN npm run build
FROM httpd:2.4 AS runtime
COPY --from=build /app/dist /usr/local/apache2/htdocs/
EXPOSE 80
NGINX
Section titled NGINXFROM node:lts AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --mode custom
FROM nginx:alpine AS runtime
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html
In order to build the Dockerfile above, you’ll also need to create a configuration file for NGINX. Create a folder called nginx
in your project’s root directory and create a file called nginx.conf
inside.
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/index.html $uri.html;
}
}
}
Recipe
Section titled Recipe- Build your container by running the following command in your project’s root directory. Use any name for
<your-astro-image-name>
:
docker build -t <your-astro-image-name> .
This will output an image, which you can run locally or deploy to a platform of your choice.
- To run your image as a local container, use the following command.
Replace <local-port>
with an open port on your machine. Replace <container-port>
with the port exposed by your Docker container (3000
, 80
, or 8080
in the above examples.)
docker run -p <local-port>:<container-port> <your-astro-image-name>
You should be able to access your site at http://localhost:<local-port>
.
- Now that your website is successfully built and packaged in a container, you can deploy it to a cloud provider. See the Google Cloud deployment guide for one example, and the Deploy your app page in the Docker docs.
その他のレシピ
-
Share State Between Islands
Learn how to share state across components — and frameworks! — with Nano Stores.
-
RSS
AstroのRSS入門
-
Installing a Vite or Rollup plugin
Learn how you can import YAML data by adding a Rollup plugin to your project.
-
Build Forms With API Routes
Learn how to use JavaScript to send form submissions to an API Route
-
Build HTML Forms in Astro Pages
Learn how to build HTML forms and handle submissions in your frontmatter
-
Use Bun with Astro
Learn how to use Bun with your Astro site.
-
Verify a Captcha
Learn how to create an API route and fetch it from the client.
-
Build your Astro Site with Docker
Learn how to build your Astro site using Docker.
-
Add icons to external links
Learn how to install a rehype plugin to add icons to external links in your Markdown files
-
Add i18n features
Use dynamic routing and content collections to add internationalization support to your Astro site.
-
Add Reading Time
Build a remark plugin to add reading time to your Markdown or MDX files.