デプロイ

以下のガイドは、いくつかの共通の前提条件に基づいています。

ビルドされたファイルはデフォルトの(dist/)に出力されています。この出力場所は、outDir設定オプションを使って変更できます。
npmを使用しています。Yarnや他のパッケージマネージャを使用している場合は、同等のコマンドでスクリプトを実行できます。
Astroはプロジェクトのローカルのdev Dependencyにインストールされ、以下のnpmスクリプトが設定されています。

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

これらのガイドでは、Astroサイトを静的にデプロイする手順を説明します。Astroは、SSR(Server Side Rendering)にも対応しています。

📚 AstroプロジェクトでSSRを有効にする (EN)についてもっと読む。

アプリのビルド

npm run buildコマンドを実行して、アプリをビルドします。

$ npm run build

デフォルトでは、ビルドされたアウトプットはdist/に生成されます。このdist/フォルダを、お好みのプラットフォームにデプロイできます。

GitHub Pages

GitHub Actionsを使って、AstroサイトをGitHub Pagesにデプロイすると、自動的にサイトをビルドしてデプロイできます。これを行うには、ソースリポジトリがGitHubにホストされている必要があります。

astro.config.mjsでsiteと、必要ならbaseオプションを設定します。
- siteはhttps://<あなたのユーザー名>.github.io/のようなものになります。
- baseには、あなたのリポジトリの名前を指定します。(リポジトリ名が <あなたのユーザー名>.github.ioならば、baseを含める必要はありません)。

プロジェクト内の.github/workflows/deploy.ymlに新規ファイルを作成し、以下のYAMLを貼り付けます。

name: Github Pages Astro CI

on:
  # `main`ブランチにプッシュするたびにワークフローを起動させる
  # 別のブランチ名を使う場合は`main`をあなたのブランチ名で置き換えてください。
  push:
    branches: [main]
  # GitHubのActionsタブから、このワークフローを手動で実行できるようにします。
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-20.04

    # このジョブがあなたのリポジトリに変更をプッシュすることを許可する
    permissions:
      contents: write

    steps:
      - name: Check out your repository using git
        uses: actions/checkout@v2

      - name: Use Node.js 16
        uses: actions/setup-node@v2
        with:
          node-version: 16

      # npmを使っていない場合、`npm ci`を`yarn install`や`pnpm i`に置き換えてください。
      - name: Install dependencies
        run: npm ci

      # npmを使っていない場合、`npm run build`を`yarn build`や`pnpm run build`に置き換えてください。
      - name: Build Astro
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          # `./dist`はAstroがデフォルトでアウトプットするディレクトリです。
          # 変更した場合は、こちらも更新してください。
          publish_dir: ./dist

最後の”Deploy to GitHub Pages”ステップのさまざまな設定方法については、GitHub Pages Actionのドキュメントをご覧ください。

新しいワークフローファイルをコミットし、GitHubにプッシュします。
GitHubで、リポジトリのSettingsタブに行き、Pagesセクションを見つけます。
サイトのSourceとしてgh-pagesブランチを選択し、Saveを押します。

これであなたのサイトが公開されたはずです！ Astroプロジェクトのリポジトリに変更をプッシュすると、GitHub Actionが自動的にデプロイしてくれます。

Travis CI

astro.config.mjsに正しい.siteを設定します。
プロジェクトのルートに .travis.ymlファイルを作成します。
ローカルでnpm installを実行し、生成されたlockfile(package-lock.json)をコミットします。

GitHub Pagesのデプロイプロバイダーテンプレートを使用し、Travis CIのドキュメントに従ってください。

language: node_js
node_js:
  - lts/*
install:
  - npm ci
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist
  # GitHubで生成されたトークンで、Travisがあなたのリポジトリにコードをプッシュすることを許可します。
  # あなたのリポジトリの Travis 設定ページで、セキュア変数として設定します。
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master

GitLab Pages

astro.config.mjsに正しい.siteを設定します。
astro.config.mjsで現在のdistをpublicに設定し、現在のpublicを、現在 publicにあるすべてのファイルを保持している新しい名前のフォルダーに設定します。その理由は、publicはデフォルトでastroのセカンドソースフォルダなので、publicに出力したい場合は、別のフォルダからパブリックアセットを引っ張ってくる必要があるからです。 astro.config.mjs は以下のような感じになります。
```
export default defineConfig({
  sitemap: true,
  site: 'https://astro.build/',
});
```
プロジェクトのルートに.gitlab-ci.ymlファイルを作成し、以下のような内容を記述します。これにより、コンテンツを変更するたびにサイトをビルドし、デプロイできます。
```
image: node:14
pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - public
  only:
    - main
```

Netlify

デプロイの設定は、Netlify website UIと、ローカルプロジェクトのnetlify.tomlファイルを使った2つの方法で行えます。

`netlify.toml`ファイル

プロジェクトリポジトリのトップレベルに、以下の設定でnetlify.tomlファイルを新規作成します。

[build]
  command = "npm run build"
  publish = "dist"

pnpmをNetlifyで使っている場合、代わりに以下の設定にしてください。

[build.environment]
  NPM_FLAGS = "--version" # prevent Netlify npm install
[build]
  command = 'npx pnpm i --store=node_modules/.pnpm-store && npm run build'
  publish = 'dist'

新しい netlify.toml ファイルを、あなたのホストしているgitリポジトリにプッシュしてください。次に、Netlify で、あなたのgitリポジトリ用に新しいプロジェクトを立ち上げてください。Netlifyはこのファイルを読み込んで、自動的にデプロイの設定を行います。

Netlifyで古いビルドイメージを使用している場合、Node.jsのバージョンが設定されていることを確認してください。

Node.jsのバージョンは以下で指定できます。

.nvmrcファイル(例: node v14.17.6)
Netlifyプロジェクトのダッシュボードで、サイトの設定に環境変数NODE_VERSIONを追加します。

Netlify Website UI

netlify.tomlファイルをスキップして、直接Netlifyにアクセスして、プロジェクトの設定を行えます。NetlifyはAstroプロジェクトを自動的に検出し、あなたに代わって設定をあらかじめ行ってくれるはずです。“Deploy”ボタンを押す前に、以下の設定が入力されていることを確認してください。

Build Command: astro buildまたはnpm run build
Publish directory: dist

Google Cloud

Google Cloudでは、プロジェクトのデプロイにいくつかのUIクリックが必要です。(これらのアクションのほとんどは、gcloud CLIを使用しても実行できます)。

Cloud Run

新しいGCPプロジェクトを作成するか、すでに持っているプロジェクトを選択します。
Cloud Run APIが有効になっていることを確認します。
新しいサービスを作成します。
Docker Hubからコンテナを利用するか、Cloud Buildを使って自分でビルドします。
ファイルを提供するポートを設定します。
allUsersにCloud Run Invokerという新しいパーミッションを追加し、パブリックアクセスを可能にします。

Cloud Storage

新しいGCPプロジェクトを作成するか、すでに持っているプロジェクトを選択します。
Cloud Storageの下に新しいバケットを作成します。
名前と必要な設定をします。
distフォルダをアップロードするか、Cloud Buildを使ってアップロードします。
allUsersにStorage Object Viewerという新しいパーミッションを追加して、一般公開を可能にします。
Webサイトの設定を編集し、エントリポイントとしてìndex.htmlを、エラーページとして404.htmlを追加します。

Google Firebase

firebase-toolsがインストールされていることを確認します。

プロジェクトのルートに、以下の内容で firebase.jsonと.firebasercを作成します。

firebase.json:

{
  "hosting": {
    "public": "dist",
    "ignore": []
  }
}

.firebaserc:

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

npm run buildを実行した後、firebase deployコマンドを使用してデプロイします。

Surge

まず、surgeをインストールしていない場合は、インストールしてください。
npm run buildを実行します。
surge distと入力してサージにデプロイします。

また、surge dist yourdomain.comを追加することで、カスタムドメインにデプロイすることもできます。

Heroku

Heroku CLIをインストールします。
サインアップでHerokuのアカウントを作成します。
heroku loginを実行し、Herokuの認証情報を入力します。
```
$ heroku login
```
プロジェクトのルートにstatic.jsonファイルを作成し、以下の内容を記述します。

static.json:
```
{
  "root": "./dist"
}
```
これはサイトの設定です。詳しくはheroku-buildpack-staticをご覧ください。

Herokuのgitリモートをセットアップします。

# version change
$ git init
$ git add .
$ git commit -m "サイトのデプロイ準備が整いました。"

# 指定された名前の新しいアプリを作成する。
$ heroku apps:create example

# 静的サイト用のbuildpackを設定する。
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

サイトをデプロイします。

# publish site
$ git push heroku master

# ブラウザを開いて、Heroku CIをダッシュボードで確認する
$ heroku open

Vercel

VercelへのAstroのデプロイは、CLIまたはVercelのgitインテグレーションを使用すれば、設定なしで可能です。

CLI

Vercel CLIをインストールし、vercelを実行してデプロイします。
Vercelは自動的にAstroを検出し、正しい設定を行います。
Want to override the settings? [y/N]と聞かれたら、“N”を選択します。
アプリケーションがデプロイされます！(例: astro.vercel.app)。

$ npm i -g vercel
$ vercel

Git

コードをgitリポジトリ(GitHub, GitLab, BitBucket)にプッシュする。
Vercelにプロジェクトをインポートする
Vercelは自動的にAstroを検出し、正しい設定を行います。
あなたのアプリケーションはデプロイされます！(例: astro.vercel.app)

プロジェクトがインポートされ、デプロイされると、その後のブランチへのプッシュはすべてプレビュー(Preview Deployments)を生成し、プロダクションブランチ（通称 “main” ）に加えられたすべての変更は本番のデプロイ(Production Deployment)を生成することになります。

VercelのGit Integrationの詳細はこちらです。

Azure Static Web Apps

Microsoft Azure Static Web AppsでAstroプロジェクトをデプロイするには以下が必要です。

Azureアカウントとサブスクリプションキー。無料のAzureアカウントはこちらで作成できます。
アプリのコードをGitHubにプッシュします。
Visual Studio CodeにSWA Extensionをインストールします。

VS Codeに拡張機能をインストールし、アプリのルートに移動します。Static Web Apps拡張を開き、Azureにサインインして、「+」記号をクリックして、新しいStatic Web Appを作成します。使用するサブスクリプションキーを指定するプロンプトが表示されます。

拡張機能によって起動されるウィザードに従って、アプリの名前を付け、フレームワークのプリセットを選択し、アプリのルート（通常は / ）とビルドファイルの場所 /dist を指定します。ウィザードが実行されると、GitHub actionがあなたのリポジトリ内の.githubフォルダに作成されます。

このアクションはアプリをデプロイするために動作します (リポジトリのActionsタブで進行状況を確認します)。正常に完了したら、GitHub actionの実行時に表示される’Browse Website’ボタンをクリックして、拡張機能の進行状況ウィンドウで指定したアドレスにアプリを表示できます。

Cloudflare Pages

AstroプロジェクトをCloudflare Pagesにデプロイするには以下が必要です。

Cloudflareのアカウント。まだ持っていない場合は、このガイドの中で無料のCloudflareアカウントを作成できます。
アプリのコードがGitHubまたはGitLabリポジトリにプッシュされていること。

次に、Cloudflare Pagesに新しいプロジェクトを立ち上げます。

以下のビルド設定を使用します。

フレームワークプリセット: Astro
ビルドコマンド: npm run build
ビルド出力ディレクトリ: dist
環境変数(アドバンスド): 現在、Cloudflare Pagesは、ビルド環境において、デフォルトでNODE_VERSION = 12.18.0をサポートしています。Astroでは、14.15.0、v16.0.0以降が必要です。環境変数に 変数名 をNODE_VERSIONとし、その値をAstroと互換性のあるNodeバージョンとするか、プロジェクトのNodeバージョンを.nvmrcまたは.node-versionファイルで指定して追加できます。次に、保存してデプロイする ボタンをクリックします。

Render

以下の手順で、AstroプロジェクトをRender上にデプロイできます。

render.comアカウントを作成し、サインインします。
ダッシュボードから New + ボタンをクリックし、Static Siteを選択します。
GitHubまたはGitLabリポジトリを接続するか、または公開リポジトリの公開URLを入力します。
ウェブサイトの名前を付け、ブランチを選択し、ビルドコマンドと公開ディレクトリを指定します。
- build command: npm run build
- publish directory: dist
Create Static Site ボタンをクリックします。

Buddy

Buddyを使って、Astroプロジェクトをデプロイできます。そのためには、以下のものが必要です。

Buddy のアカウントをこちらから作成する。
新しいプロジェクトを作成し、Gitリポジトリ（GitHub、GitLab、BitBucket、任意のプライベートGitリポジトリまたはBuddy Git Hostingを使用可能）に接続します。
新しいパイプラインを追加します。
新しく作成したパイプラインに Node.js アクションを追加します。
このアクションの中に、以下を追加します。
```
npm install
npm run build
```
デプロイメントアクションを追加します - 選択肢はたくさんあります。それぞれの設定は異なりますが、Source path をdistに設定することを忘れないでください。
Run ボタンを押します。

Layer0

以下の手順で、Astroプロジェクトをデプロイできます。

Layer0を追加します。

# 最初に、Layer0 CLIをグローバルにインストールします。
$ npm i -g @layer0/cli

# 次に、AstroサイトにLayer0を追加します。
$ 0 init

Layer0 Routerを更新します。

routes.tsに以下を貼り付けます。

import { Router } from '@layer0/core';

export default new Router()
  .get(
    '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
    ({ cache, serveStatic }) => {
      cache({
        browser: {
          // ブラウザのjs, css, 画像を1時間キャッシュする...
          maxAgeSeconds: 60 * 60,
        },
        edge: {
          // ...そしてedgeは1年間キャッシュする
          maxAgeSeconds: 60 * 60 * 24 * 365,
        },
      });
      serveStatic('dist/:path*/:file.:ext');
    }
  )
  .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
    cache({
      // ブラウザがhtmlをキャッシュしないようにする...
      browser: false,
      edge: {
        // ...1年間、edgeにhtmlをキャッシュする。
        maxAgeSeconds: 60 * 60 * 24 * 365,
      },
    });
    setResponseHeader('content-type', 'text/html; charset=UTF-8');
    serveStatic('dist/:path*');
  });

layer0.config.jsからorigin backendを削除できます。

module.exports = {};

Layer0にデプロイします。

Layer0にサイトをデプロイするため、以下を実行します。

# astroサイトの本番ビルドを作成する
$ npm run build

# それをLayer0にデプロイする
$ 0 deploy

クレジット

このガイドはもともと、Viteの文書化された静的デプロイガイドを元にしています。