Windows 10 Home で Docker を使えるようにする方法について説明します。

 

<toc />

## Windows をバージョン2004に更新する

Windows バージョン2004では WSL2 が利用できるようになりました。



まずは自分の Windows のバージョンを確認します。

`設定＞システム＞バージョン情報`です。

<postimage src="windows-version" alt="Windos バージョン確認" />

「バージョン」が2004、OS ビルドが19018以上になっていることを確認します。

これが満たされていない場合は、手動で更新する必要があります。

 

こちらのページからアップデートができます。

→ [Windows 10 のダウンロード](https://www.microsoft.com/ja-jp/software-download/windows10)

結構時間がかかります。

全体で１時間以上はかかりました。

 

## WSL2 を有効化する

`コントロールパネル＞プログラム＞Windows の機能の有効化または無効化`から、

「Linux 用 Windows サブシステム」にチェックを入れます。

<postimage src="wsl2" alt="WSL2 有効化" />

Docker は Linux 上で動くのでこれが必要です。

 

## Docker Desktop for Windows をインストールする

Docker Hub から Docker Desktop for Windows をダウンロードします。

→ [Docker Desktop for Windows - Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-windows/)

Stable（安定版） と Edge（最新版） がありますが、Stable で大丈夫です。

 

ダウンロードしたら`Docker Desktop Installer.exe`を実行してインストーラを起動します。

`Endable WSL 2 Windows Features`にチェックがついていることを確認してインストールを開始します。

インストールが完了したらターミナルで`docker --version`と入力し、

インストールできているか確認します。

 

## BIOS 設定で Virtualization Technology を有効にする

BIOS 設定に入るには、PC の起動直後に何らかのキー（機種による）を連打します。

「(メーカ) BIOS」のように検索すると BIOS 画面表示方法が見つかると思います。

BIOS で、`Virtualization Technology`の項目を`Enabled`に変更します。

 

以上で Docker が使えるようになりました。

Docker Desktop を起動すると使えるようになります。

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Windows 10 Home で Docker を使えるようにする方法について説明します。
 
<h2>Windows をバージョン2004に更新する</h2>
Windows バージョン2004では WSL2 が利用できるようになりました。
…

【Docker】Windows 10 Home で Docker をセットアップ

Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。

Docker の導入は済んでいるものとします。



 

<toc />

## Docker とは

「コンテナ」と呼ばれる**仮想環境を作成したり編集したりすることができる**ものです。

仮想環境を作ることで、物理的な制約とは無関係な仮想的な環境で作業をすることができます。

 

「イメージ」と呼ばれるものを元にしてコンテナを作成します。

<relpos link="windows10home-docker" />

 

## Svelte とは

JavaScript のフレームワークです。

初版が 2016 年と、React や Vue と比べても比較的新しいものです。

 

HTML、JavaScript とほぼ同じコード形態で書けるために**学習コストが少なく、**

**シンプルに書ける**ことが特徴です。

その名前の表す通り、ミニマムな印象です。

 

関係ないですが、読み方は英語読みだと「スヴェルト」。

私はラテン語風に「スウェルテ」と読むのが好きです。

<relpos link="library-framework-chigai" />

 

## 戦略

目的は「Docker コンテナ内で Svelte 関連ファイルを編集して、コンテナ内で立ち上げた localhost に接続したら変更が反映されている」ことです。

つまり、コンテナ内で vi エディタなどを使ってファイルを編集し、

`npm run dev`コマンドで localhost 立ち上げをし、ブラウザでそこに接続します。

そうすることでホストOS内のファイルを編集することなく、Svelte をいじれます。

 

## 手順

### コンテナ外部の操作

まずは Svelte を導入します。

プロジェクトのディレクトリ名（最後の引数）は任意です。

```bash hide_nums
$ npx degit sveltejs/template svelte-docker-test

$ cd svelte-docker-test
```

コンテナ内で`npx degit`しようとすると`degit`がエラーになってしまったので、

いったんローカルに初期ファイルを置いて、それを Docker コンテナ内に移すことにしています。

 

次にプロジェクトのディレクトリ以下で、イメージ作成のための Dockerfile を作成します。

```docker name=Dockerfile
# Node.js のイメージを元にする
FROM node:14-alpine

# コンテナ内の作業ディレクトリ
WORKDIR /usr/src/app

# ローカルのファイルをコンテナ内にコピー
COPY rollup.config.js ./
COPY package*.json ./

# 必要なパッケージをインストール
RUN npm install

# ローカルのファイルをコンテナ内にコピー
COPY ./src ./src
COPY ./public ./public

# コンテナ内でポートを公開
EXPOSE 5000

# 環境変数でホストアドレスを指定
ENV HOST=0.0.0.0
```

参考：[How to put a Svelte app in a docker container?](https://stackoverflow.com/questions/61106423/how-to-put-a-svelte-app-in-a-docker-container)

このファイルを元にイメージを作成します。

`svelte-image`の部分はイメージ名で、任意です。

```bash hide_nums
$ docker build -t svelte-image .
```

`docker images`コマンドでイメージが作成されたことを確認します。

 

続いて、このイメージを元にコンテナを作成します。

```bash hide_nums
$ docker run -p 5000:5000 --name svelte-container svelte-image
```

`--name`オプションでコンテナに名前（`svelte-container`）をつけています。

`-p`オプションではホストOSのポートとコンテナ内部のポートを接続しています。

`docker ps`でコンテナが起動していることを確認してください。

 

### コンテナ内部の操作

続いて、コンテナ内部に入ります。

```bash hide_nums
$ winpty docker exec -it svelte-container sh
/usr/src/app # 
```

私は Git Bash を使っているので、先頭に`winpty`をつけました。

最後の引数は使用するシェルで、bash だとエラーになるので sh を指定しました。

 

localhost を立ち上げます。

```sh hide_nums
/usr/src/app # npm run dev

> svelte-app@1.0.0 dev /usr/src/app
> rollup -c -w

rollup v2.26.6
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 833ms

[2020-08-28 12:00:00] waiting for changes...

> svelte-app@1.0.0 start /usr/src/app
> sirv public "--dev"

 Your application is ready~! �

 - Local: http://0.0.0.0:5000
 - Network: http://172.17.0.2:5000

────────────────── LOGS ──────────────────


```

ブラウザから`localhost:5000`に接続すると、スタート画面が表示されます。

（表示されている２つの URL ではいずれもうまく接続できませんでした。）

<postimage src="hello-world" alt="Svelte スタート画面" />

 

### ファイルの編集

ファイルの編集もコンテナ内から行います。

ターミナルをもう一つ立ち上げてコンテナ内に入るか、サーバを停止します。

試しに`main.js`を編集してみます。

```sh hide_nums
/usr/src/app # ls
node_modules package.json rollup.config.js
package-lock.json public src
/usr/src/app # cd src
/usr/src/app/src # ls
App.svelte main.js
/usr/src/app/src # vi main.js
```

エディタは vi/vim になると思います。

vim が入っていなかったら`apk add vim`コマンドなどでインストールできます。

 

main.js を編集します。

```js name=main.js ins=7 del=6
import App from './App.svelte';

const app = new App({
 target: document.body,
 props: {
 name: 'world'
 name: 'svelte'
 }
});

export default app;
```

このように編集して再度`npm run dev`コマンドを打つ（別のターミナルで編集した場合はページをリロードする）と、変更が反映されます。

<postimage src="hello-svelte" alt="Hello Svelte" />

これでコンテナ内のコードをいじりまくっても、ローカルにはまったく影響なく開発できるようになります！

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。
Docker の導入は済んでいるものとします。
…

Docker

【Docker】Windows 10 Home で Docker をセットアップ

Windows をバージョン2004に更新する

Docker 上で Svelte 開発環境を構築する