🚀

Astroで作ったウェブサイトをVercelにサクッとデプロイする方法

2022/10/15に公開約1,900字

静的サイトフレームワークの「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が便利なので使います。

vercelnpm installします。

npm install -g vercel

さきほど作ったAstroサイトのリポジトリへ移動し、vercelコマンドを叩きます。

vercel

いくつかの質問に答えれば、Vercelにデプロイできます。以上!

Vercelのサイトからデプロイするのさえ簡単なのに、Vercel CLIならもっと簡単にデプロイできてしまいます…!すごい。

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:

vercel.json
{
  "cleanUrls": true,
}

「VercelにAstroウェブサイトをデプロイするとき、今はVercelの問題で404になっちゃうからvercel.jsonを作ってね」とのことなのですが、これは作らなくてもデプロイできました。

参考

Discussion

ログインするとコメントできます