---
slug: "svelte-build-ssr-app-docker-image"
title: "Svelte で SSR するDocker イメージを作る"
description: "SvelteKit を使い、サーバーサイドでほかのAPIサーバーからデータを取得して、HTMLをレンダリングして返すプログラムを作り、Docker イメージにします。"
url: "https://www.ytyng.com/blog/svelte-build-ssr-app-docker-image"
publish_date: "2024-06-15T11:03:46Z"
created: "2024-06-15T11:03:46Z"
updated: "2026-02-27T11:52:50.598Z"
categories: ["Svelte"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20250611/7e9207938de441bf97bdc6674ff5c131.png.webp?width=768"
has_video: true
has_music: true
video_urls: ["https://media.ytyng.net/ytyng-blog/309/featured-video-1.mp4", "https://media.ytyng.net/ytyng-blog/309/featured-video-2.mp4", "https://media.ytyng.net/ytyng-blog/309/featured-video-3.mp4"]
music_urls: ["https://media.ytyng.net/ytyng-blog/309/featured-music-309-4.mp3", "https://media.ytyng.net/ytyng-blog/309/featured-music-309-5.mp3"]
lang: "ja"
---

# Svelte で SSR するDocker イメージを作る

SvelteKit を使い、サーバーサイドでほかのAPIサーバーからデータを取得して、HTMLをレンダリングして返すプログラムを作り、Docker イメージにします。



# Svelte のセットアップ

https://kit.svelte.jp/docs/creating-a-project


```shell
npm create svelte@latest my-ssr-app
```

![画像](https://media.ytyng.com/20240615/88e6f45af08743cab1fc06b5692f822e.png)

`Skeleton project` を選択



![画像](https://media.ytyng.com/20240615/b8a6a426e9f748baae549abc4f8b5737.png)

`Yes, using TypeScript syntax` を選択


![画像](https://media.ytyng.com/20240615/f26d679bc3c044c88b5ec858abcb6e4c.png)

オプションを好みで選択


```
Next steps:
  1: cd my-ssr-app
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

```

書いてあるとおりに実行

asdf を使う場合は `.tool-versions` を作っておく

```shell
echo 'nodejs 20.10.0' > my-ssr-app/.tool-versions
```

テスト実行

```shell
npm run dev -- --open
```

![画像](https://media.ytyng.com/20240615/4fe954bc4a4f4548b10c374502a28dc2.png)

# コードを書く

src/routes の下にファイルを書きます。

## src/routes/+page.server.ts の作成

[JSON Placeholder](https://jsonplaceholder.typicode.com/) より、ダミーデータを取得しています。

### src/routes/+page.server.ts

```ts
export async function load() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    if (!res.ok) {
        throw new Error('Failed to fetch data')
    }
    return {
        postEntry: await res.json()
    };
}
```

## src/routes/+page.svelte の修正
先ほどサーバーサイドで取得したデータを使うようにします

### src/routes/+page.svelte

```svelte
<script lang="ts">
    export let data;
    const postEntry = data.postEntry
</script>

<h1>Post #1</h1>

<div>
    <h2>{postEntry.title}</h2>
    <p>{postEntry.body}</p>
</div>
```

![画像](https://media.ytyng.com/20240615/d9204e4d93bd4e8a9f09a3a73daf3fb6.png)

## 動作確認
生成されたHTMLを見てみると、SSR されていることがわかります。

![画像](https://media.ytyng.com/20240615/77b1bbbd5fe84c75b0c19fb627c44750.png)


# node 用のビルド環境を整える

https://kit.svelte.jp/docs/adapter-node

```shell
npm i -D @sveltejs/adapter-node
```

svelte.config.js の変更

```
import adapter from '@sveltejs/adapter-auto';
```
↓
```
import adapter from '@sveltejs/adapter-node';
```


## ビルド

```
npm run build
```

## 成果物の動作確認

```
cd build
node ./
```

```
Listening on 0.0.0.0:3000
```
と表示されるので、ブラウザで http://127.0.0.1:3000 を見る

![画像](https://media.ytyng.com/20240615/9599746c4f84435d94cf95a3e4bd36c2.png)


# Dockerfile を書く

## Dockerfile
```dockerfile
FROM node:bookworm-slim

COPY ./build /app
COPY ./package.json /app/

WORKDIR /app

EXPOSE 3000

CMD ["node", "./"]
```

# Dockerイメージのビルド
```
docker build . -t my-ssr-app:latest
```

# 実行
```
docker run -p 3000:3000 my-ssr-app
```

```
Listening on 0.0.0.0:3000
```

と表示されるので、ブラウザで http://127.0.0.1:3000 を見る

![画像](https://media.ytyng.com/20240615/9599746c4f84435d94cf95a3e4bd36c2.png)