title | description | type | i18nReady |
---|---|---|---|
DockerでAstroサイトを構築する |
Dockerを使ってAstroサイトを構築する方法を紹介します。 |
recipe |
true |
import { Steps } from '@astrojs/starlight/components';
Dockerは、コンテナを使ってアプリケーションをビルド、デプロイ、実行するためのツールです。
Dockerイメージとコンテナは、AWS、Azure、Google Cloudのような多くの異なるプラットフォームにデプロイできます。このレシピでは、サイトを特定のプラットフォームにデプロイする方法はカバーしませんが、プロジェクト用にDockerをセットアップする方法を紹介します。
- ローカルマシンにDockerがインストールされていること。使用しているオペレーティングシステムへのインストール手順はこちらを参照してください。
- プロジェクト内にDockerfileが存在すること。Dockerfileについて詳しくはこちらを参照してください。以下のセクションのDockerfileを出発点として使うこともできます。
プロジェクトのルートディレクトリにDockerfile
というファイルを作成します。このファイルにはサイトを構築するための指示が含まれおり、ニーズに応じて内容は異なります。このガイドではすべての可能なオプションを紹介することはできませんが、SSRと静的モードのスタートポイントを提供します。
npm以外のパッケージ・マネージャーを使っている場合は、それに応じてコマンドを調整する必要があります。
このDockerfileはNode.jsを使用してサイトを構築し、ポート4321
でサービスを提供します。そのため、AstroプロジェクトにNodeアダプタがインストールされている必要があります。
FROM node:lts AS runtime
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs
:::tip[覚えておいてください]
これらはDockerfileの一例です。ニーズに合わせてカスタマイズすることができます。例えば、node:lts-alpine
のように別のイメージを使うこともできます。
FROM node:lts as runtime
FROM node:lts-alpine as runtime
:::
プロジェクトに.dockerignore
ファイルを追加するのがベストプラクティスです。このファイルには、DockerのCOPY
コマンドやADD
コマンドで無視するファイルやフォルダを記述します。これはビルドプロセスを高速化し、最終的なイメージのサイズを小さくします。
.DS_Store
node_modules
dist
このファイルはDockerfile
自体と同じディレクトリに置く必要があります。詳しくは.dockerignore
ドキュメントを読んでください
以下のDockerfileは、サイトをビルドし、それをApache htppdによりデフォルトの設定でポート80
にて配信します。
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] 特別な設定を必要としない単純なウェブサイトには、この方法を使用してください。より複雑なウェブサイトの場合は、ApacheまたはNGINXでカスタム設定を使用することをお勧めします。 :::
FROM node:lts AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine AS runtime
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 8080
上記のDockerfileをビルドするには、NGINX用の設定ファイルも作成する必要があります。プロジェクトのルートディレクトリにnginx
というフォルダを作成し、その中に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;
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
internal;
}
location / {
try_files $uri $uri/index.html =404;
}
}
}
以下は、Dockerのマルチステージビルドを用い、ソースコードのみが変更された場合にnpmの依存関係を再インストールしないようにすることで、サイトのビルドプロセスを最適化する、より高度なDockerfileの例です。これにより、依存関係のサイズにもよりますが、ビルド時間を場合によっては数分程度短縮できます。
FROM node:lts AS base
WORKDIR /app
# package.jsonとpackage-lock.jsonのみをここにコピーすることで、以下の`-deps`ステップがソースコードから独立していることが保証されます。
# したがって、ソースコードが変更されただけであれば、 `-deps`ステップはスキップされます。
COPY package.json package-lock.json ./
FROM base AS prod-deps
RUN npm install --production
FROM base AS build-deps
RUN npm install --production=false
FROM build-deps AS build
COPY . .
RUN npm run build
FROM base AS runtime
COPY --from=prod-deps /app/node_modules ./node_modules
COPY --from=build /app/dist ./dist
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs
```bash
docker build -t <your-astro-image-name> .
```
これでイメージが出力され、ローカルで実行することも、好きなプラットフォームにデプロイすることもできます。
-
イメージをローカルコンテナとして実行するには、以下のコマンドを使用します。
<local-port>
を自分のマシンの使用されていないポートに置き換えてください。また<container-port>
をDockerコンテナが公開しているポートに置き換えてください(上記の例では4321
、80
、8080
)。docker run -p <local-port>:<container-port> <your-astro-image-name>
http://localhost:<local-port>
からサイトにアクセスできるはずです。 -
これでウェブサイトが正常にビルドされ、コンテナにパッケージ化されたので、クラウドプロバイダにデプロイすることができます。例としてGoogle Cloudのデプロイガイドや、DockerドキュメントのDeploy your appページを参照してください。