Astroで作ったウェブサイトをVercelにサクッとデプロイする方法
静的サイトフレームワークの「Astro」で作ったウェブサイトをVercelにデプロイしてみました。結論としては、Vercel CLIでデプロイするのが一番ラクです。
デプロイしたウェブサイト：https://sample-astro-site.vercel.app/
Astroのサンプルサイトを作る
今回はVercelへ最短デプロイするのが目的です。そのため、デモや練習用に用意されてるジェネレータを使います。
> npm create astro@latest
ディレクトリ名をどうするか、TypeScriptを使うかなどいろいろ聞かれますが、特に難しい箇所はないため説明は省きます。
途中でどんなテンプレートを使うか聞かれるので、「Just the basics」を選びます。
? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯ Just the basics (recommended)
ディレクトリ作成が終わったら、npm run devでサーバーを立ち上げます。以下のようなサイトが表示されるはずです。
このサイトをVercelへデプロイします。ちなみにGithubにPushしてリポジトリを作ってもいいですし、この時点ではしなくても大丈夫です。
Vercelへデプロイする
Vercelのサイトからデプロイもできますが、ターミナルからもっと簡単にデプロイできるVercel CLIが便利なので使います。
vercelをnpm installします。
npm install -g vercel
さきほど作ったAstroサイトのディレクトリへ移動し、vercelコマンドを叩きます。
vercel
いくつかの質問に答えれば、Vercelにデプロイできます。以上！
Vercelのサイトからデプロイするのさえ簡単なのに、Vercel CLIならもっと簡単にデプロイできてしまいます…！すごい。
- デプロイしたサイト: https://sample-astro-site.vercel.app/
- リポジトリ: kotakanazawa/sample-astro-site: sample-astro-site
Astroとは
AstroはReactやVueなどのJavaScriptライブラリに依存しない高速な静的サイトフレームワークです。記述方法もシンプルでクセがなく、キャッチアップコストが低いです。実はReactやVueとの共存も可能です。普通のブログやウェブサイトくらいならもうAstroでいいのでは？と思っています。
Astro | Build faster websites
補足
Deploy your Astro Site to Vercel 🚀 Astroドキュメント には、以下のように注意書きがあります。
There is currently a Vercel issue displaying a 404 page on Astro websites. Until this is fixed, you can add the following config file at the root of your project:
{
"cleanUrls": true,
}
「VercelにAstroウェブサイトをデプロイするとき、今はVercelの問題で404になっちゃうからvercel.jsonを作ってね」とのことなのですが、これは作らなくてもデプロイできました。
Discussion