SvelteKitをローカルのDocker環境で動かすまで

# はじめに

[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の17日目は 株式会社エイチームブライズのエンジニア、明日のメリーロックが楽しみすぎる@mkinが担当します:santa::guitar:

さて、業務でSvelteを使いたいけど使えないという方も多いのではないでしょうか？[Vercelを使ってサクッと公開できます](https://qiita.com/mkin/items/cd4789eb6a2a2cceb3b6)が、会社の掟ではすぐに使えないこともあるかと思います :anger:

それならば、**コンテナ技術を使って、GCPやAWSでサクッと公開できればいいんじゃないか！？** と思い、この記事を書きます。


この記事には続編があります。

- [SvelteKitで始めるKubenetes（GKE）](https://qiita.com/mkin/items/fdbcad85bc0b6c04894c)
- Google Cloud RunでSvelteKitを動かしてみる（予定：完成したらリンクを貼りますね:relaxed:


# 概要

![概要図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/9e935fa8-4d53-0a50-00cd-b503a56284f9.png)
最終的にはクラウドサービス上でSvelteKitを公開していきたいのですが、この記事では1、2 まで進めていきます。実際に`docker-compose`で動かすので開発環境でも使えると思います。

# 動作環境

- macOS Big Sur

# 1. プロジェクトを作成

それでは、さっそく公式ドキュメント通りにプロジェクトを作成します。

```sh:プロジェクトを作成
$ npm create svelte@latest svelte-gke

# お好きなものを選択してください
✔ Which Svelte app template? › SvelteKit demo app
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
```

```sh:起動するところまで確認 
$ cd svelte-gke
$ npm install
$ npm run dev -- --open
```

![SvelteKit起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/cac3e2b6-2a7c-1913-1623-d47d8159e58e.png)


起動を確認したら`Command + C`で停止しておきます。

## nodeアダプターを適用

nodeコンテナ上でSvelteKitを動かすので、[公式ドキュメントに記載の通り](https://kit.svelte.dev/docs/adapters#supported-environments-node-js)にnodeアダプターを設定します。

```sh
$ npm install @sveltejs/adapter-node -D
```

```diff:svelte.config.js
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
```

```sh:nodeアダプターで起動することを確認 
$ npm run dev -- --open
```

起動を確認したら`Command + C`で停止しておきます。

## 2. Dockerで動かす

### Dockerfileを作成

トップの階層に`Dockerfile`と`docker-compose.yml`を作成します。

![フォルダ構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134221/b7a09904-9cea-8577-5645-fc4b4b69fefa.png)

```Dockerfile:Dockerfile
# ビルド用
FROM node:18.12.1-slim as builder

WORKDIR /app

## パッケージをインストール
COPY package.json ./
COPY package-lock.json ./
COPY tsconfig.json ./
RUN npm ci

COPY . .

RUN npm run build

# 実行用
FROM node:18.12.1-slim

WORKDIR /app

## ビルド用のレイヤからコピーする
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json .
COPY --from=builder /app/node_modules ./node_modules

## Svelteが動く5173ポートを開けておく
EXPOSE 5173

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

:::note
開発用のDockerfileの場合は最後を下記のように変更してください

```diff
- CMD ["node", "./build"]
+ CMD ["npm", "run", "dev", "--", "--host"]
````

:::

### docker-compose.ymlを作成

```yaml:docker-compose.yml
version: '3.8'

services:
  frontend:
    image: svelte-app
    build:
      context: .
      dockerfile: ./Dockerfile
    environment:
      - NODE_ENV=development
      - PORT=5173
    ports:
      - 5173:5173
    volumes:
      - ./src:/app/src
      - ./static:/app/static
      - ./vite.config.js:/app/vite.config.js
      - ./tsconfig.json:/app/tsconfig.json
      - ./svelte.config.js:/app/svelte.config.js
```

### 起動を確認

```sh
$ docker-compose up --build
```

起動を確認したら`Command + C`で停止しておきます。
やりました:rocket:

# おわりに

Svelteのドキュメントは英語ですが、[有志による日本語版サイト](https://svelte.jp/)もあるのをご存知でしょうか？
Svelteや、このような活動に興味のある方は[「Svelte日本」のDiscord](https://discord.com/invite/yy75DKs)でも情報を発信してくださる方がいらっしゃるので、参加してみてはいかがでしょうか？

[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の18日目は、
@ttk がReactネタでお送りします！！ Svelte勢も負けていられませんね！！


# 参考
https://blog.alexanderwolf.tech/how-to-dockerize-your-sveltekit-app/

https://myrmod.de/posts/how-to-host-a-sveltekit-project-with-docker-https