SvelteとDockerでHello World!!!

SvelteをDockerで動かす

Svelteは優秀なwebフレームワークです(主観)。 svelte.jp

今回はDockerを使うのですが、ローカルを汚したくない人がいるみたいなので、その人向けです。

ローカルでやること

ローカルで任意の名前のディレクトリを作っておきます。

mkdir project

Dockerfileとdocker-compose.ymlを作ります。

Dockerfile

FROM node:lts-alpine

RUN apk add git

RUN mkdir project

WORKDIR /project

docker-compose.yml

version: "3"
services: 
  web:
    build: .
    tty: true
    volumes: 
      - ./project/:/project/
    ports: 
      - "8080:5000"

ディレクトリの階層構造はこのようにします。

.
├── Dockerfile
├── docker-compose.yml
└── project

コンテナを立ち上げて入る

docker-compose便利...

docker-compose up -d --build

webのところは、docker-compose.ymlで指定した、service名。

docker-compose exec web sh

コンテナ内で実行するコマンドたち

deditでtemplateを持ってきます。

npx degit sveltejs/template project && cd project

TypeScriptを使用するために

node scripts/setupTypeScript.js

ローカルPCのlocalhostとdockerのlocalhostをつなげる(って理解であってるかな)

まず、ローカルPCのlocalhostとdockerのlocalhostをつなげるように、以下のコマンドを実行してpackage.jsonを書き換えます。

sed -i s/--no-clear/build\ --host\ 0.0.0.0/ package.json

ローカルPC(Mac)でコンテナ外から行う場合は以下のコマンドを実行します。

sed -i '' 's/--no-clear/build\ --host\ 0.0.0.0/' package.json

次に以下のコマンドを実行します。 これはpackage.jsonに書いてあるものを入れてくれます。

npm install

準備は整いました。多分。

svelte appを起動する

以下のコマンドを実行しよう。

npm run dev

こんなふうにきたら、おめでとうございます。

  Your application is ready~! 🚀

  - Local:      http://0.0.0.0:5000

docker-compose.ymlで指定したport、

ports: 
  - "8080:5000"

今回はhttp://localhost:8080/にChromeとかでアクセスすればHELLO WORLD!