Deploy a Astro SSR App to Cloudflare.

この抜粋の内容は次のとおりです。

- 環境構築
- Project 構成
- Framework 間の比較
- Deploy a Astro site
- Summary

さらに詳しく見たい方は読み続けてください。

---

2023年8月6回目です。

このメモは、[Astro](https://astro.build/) についてです。

今回、Astro について、学び直すことにしました。

経緯は、以下のとおりです。
1. 「Reddit、React 止めたってよ！」[^1]
1. [Lit](https://lit.dev/) とは！？
1. Lit で SSR やってみよう。🔥
1. Lit は、Web Component で、SSR は何かを組み合わせる必要がある。😱
1. Astro と Lit の記事を見つける。💡
1. Astro で良いか。👌

当初は、Lit を学ぶつもりでしたが、Lit を少し書いてみたところで、しっくりこず。

Astro は、SSR 自体が未経験でした。以前、Markdown の Contents 管理を試しました。

https://qiita.com/daisuke-yamamoto/items/7bfed7250e1c7e1f0210

[^1]: https://www.reddit.com/r/reactjs/comments/12yxva6/whats_you_opinion_on_the_new_reddit_design/

今回作成したコードは[こちら](https://github.com/danny-yamamoto/my-portfolio-astro)です。

https://github.com/danny-yamamoto/my-portfolio-astro

https://my-portfolio-astro.pages.dev/

## 環境構築
<details><summary>npm create astro@latest</summary>

```bash
yamamoto_daisuke@instance-1:~/astro$ sudo npm create astro@latest

╭─────╮  Houston:
│ ◠ ◡ ◠  Initiating launch sequence... right... now!
╰─────╯

 astro   v2.10.14 Launch sequence initiated.

   dir   Where should we create your new project?
         ./my-portfolio-astro

  tmpl   How would you like to start your new project?
         Empty
      ✔  Template copied

  deps   Install dependencies?
         No
      ◼  No problem! Remember to install dependencies after setup.

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./my-portfolio-astro 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯
yamamoto_daisuke@instance-1:~/astro$ 
```

</details>

<details><summary>npx astro add cloudflare</summary>

```bash
node ➜ /workspaces/my-portfolio-astro (main) $ npx astro add cloudflare
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────╮
 │ npm install @astrojs/cloudflare  │
 ╰──────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ──────────────────────────────╮
 │ import { defineConfig } from 'astro/config';   │
 │                                                │
 │ import cloudflare from "@astrojs/cloudflare";  │
 │                                                │
 │ // https://astro.build/config                  │
 │ export default defineConfig({                  │
 │   output: "server",                            │
 │   adapter: cloudflare()                        │
 │ });                                            │
 ╰────────────────────────────────────────────────╯

  For complete deployment options, visit
  https://docs.astro.build/en/guides/deploy/

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/cloudflare
node ➜ /workspaces/my-portfolio-astro (main) $ 
```

</details>

## Project 構成

<details><summary>Project Structure</summary>

```bash
.
├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   ├── astro.svg
│   └── favicon.svg                   # edit
├── README.md
├── src
│   ├── components                    # add
│   │   ├── Articles.astro            # add
│   │   ├── Certificates.astro        # add
│   │   ├── Experience.astro          # add
│   │   ├── Footer.astro              # add
│   │   └── Intro.astro               # add
│   ├── env.d.ts
│   ├── layouts                       # add
│   │   └── Layout.astro              # add
│   ├── lib                           # add
│   │   ├── getArticles.ts            # add
│   │   ├── getCertificates.ts        # add
│   │   └── getExperience.ts          # add
│   └── pages
│       └── index.astro               # edit
└── tsconfig.json
```

</details>

## Framework 間の比較
- Script、Template、Style を同一ファイルに書きます。Svelte と似ていると思います。

Astro

https://github.com/danny-yamamoto/my-portfolio-astro/blob/main/src/components/Articles.astro

Svelte

https://github.com/danny-yamamoto/my-portfolio/blob/main/src/routes/%2Bpage.svelte

- Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。
   - Remix: `0.65s`
   - Svelte: `0.62s`
   - Qwik: `0.36s`
   - VanJS: `0.13s`
   - Astro: `0.38s` 👈
![スクリーンショット 2023-08-28 18.59.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/4d24b6c3-7c66-02bd-4198-2d05f9778f4c.jpeg)

## Deploy a Astro site
- Cloudflare Pages に deploy します。
- 次へ次へ系です。特に設定で変更する箇所はありません。
![スクリーンショット 2023-08-28 19.02.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/2857ea1f-c508-c1dd-3b0e-68122b408f95.jpeg)

## Summary
- Astro について書きました。
- 主要な Framework を触りました。あとは、[SolidJS](https://www.solidjs.com/) あたりでしょうか。
- Routing 周りの違いを今後確認したいと思います。

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

それでは、また別の話でお会いしましょう。👋