forked from withastro/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add docker deploy recipe (withastro#2815)
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Dan Jutan <danjutan@gmail.com>
- Loading branch information
1 parent
817a150
commit 5404203
Showing
2 changed files
with
142 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
--- | ||
title: Build your Astro Site with Docker | ||
description: Learn how to build your Astro site using Docker. | ||
type: recipe | ||
i18nReady: false | ||
--- | ||
|
||
[Docker](<https://docker.com>) 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](</en/guides/deploy/google-cloud/#cloud-run-ssr-and-static>). 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 | ||
|
||
- Docker installed on your local machine. You can find [installation instructions for your operating system here](<https://docs.docker.com/get-docker/>). | ||
- A Dockerfile in your project. You can [learn more about Dockerfiles here](https://docs.docker.com/engine/reference/builder/) and use the Dockerfiles in the following section as a starting point. | ||
|
||
## Creating a Dockerfile | ||
|
||
Create 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. | ||
|
||
### SSR | ||
|
||
This Dockerfile will build your site and serve it using Node.js on port `3000` and therefore requires the [Node adapter](/en/guides/integrations-guide/node/) installed in your Astro project. | ||
|
||
```docker title="Dockerfile" | ||
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 | ||
``` | ||
|
||
:::tip[Keep this in mind] | ||
These are just examples of Dockerfiles. You can customize them to your needs. For example, you could use another image, like `node:lts-alpine`: | ||
|
||
```docker title="Dockerfile" del={1} add={2} | ||
FROM node:lts as runtime | ||
FROM node:lts-alpine as runtime | ||
``` | ||
::: | ||
|
||
### Static | ||
|
||
#### Apache (httpd) | ||
|
||
The following Dockerfile will build your site and serve it using Apache htppd on port `80` with the default configuration. | ||
|
||
```docker title="Dockerfile" | ||
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 | ||
``` | ||
|
||
:::caution[Recommendation] | ||
Use this approach for simple websites that don't need any special configuration. For more complex websites, it is recommended to use a custom configuration, either in Apache or NGINX. | ||
::: | ||
|
||
#### NGINX | ||
|
||
```docker title="Dockerfile" | ||
FROM 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. | ||
|
||
```nginx title="nginx.conf" | ||
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; | ||
} | ||
} | ||
} | ||
``` | ||
|
||
## Recipe | ||
|
||
1. Build your container by running the following command in your project's root directory. Use any name for `<your-astro-image-name>`: | ||
|
||
```bash | ||
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. | ||
|
||
2. 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.) | ||
|
||
```bash | ||
docker run -p <local-port>:<container-port> <your-astro-image-name> | ||
``` | ||
|
||
You should be able to access your site at `http://localhost:<local-port>`. | ||
|
||
3. Now that your website is successfully built and packaged in a container, you can deploy it to a cloud provider. See the [Google Cloud](/en/guides/deploy/google-cloud/#cloud-run-ssr-and-static) deployment guide for one example, and the [Deploy your app](https://docs.docker.com/language/nodejs/deploy/) page in the Docker docs. | ||
|