
【詳細なインストール画面付き】WSL2 + Ubuntu + Docker + Cursor(VSCode)で作る、WindowsのDocker実行環境。これで今話題のDifyがローカルで動く。
こんにちは!
ノーリーです。ChatGPT使ってますか?
私は長らくWindowsなんですが、生成AIにはMacのほうがよさそうです。
ただ、これまでの蓄積もあるし、いましばらくWidowsもしょうがないかと考えていたところ、いい方法を教えてもらいました。
WSL2+Ubuntu+Docker+Cursorです。
この環境構築方法を説明いたします。
これがあれば生成AIも怖くないぞ!
Difyも入るぞ!
この記事は、大阪のIT専門学校「清風情報工科学院」の校長・平岡憲人(ノーリー)がお送りします。
清風情報工科学院では、「全国AIアート甲子園」を開催中。
すでに画像生成がっつりな高校生も、はじめて生成AIにさわる高校生も、無料講座で挑戦しよう。Discordコミュニティのサポート付き。

詳しい情報は、こちらから。
1.WindowsでDocker運用!WSL2+Ubuntu+Docker+Cursorの威力
一般的にWindows上で何かの開発・運用をする場合、Windows用のEXEファイル・インストーラーを使ってアプリを入れ、それを使います。
例えば、Anaconda、Pythonを使い、そこにDocker Desktopを入れるといった具合です。
しかし、クラウドがからむシステムでは、これは悪手で無数の沼が行く手を阻み、挫折の原因となります。
例えばPythonひとつ取っても、導入するモジュールがLinux(Mac)では動いてもWindowsでは動かないという現象がまま起こるからです。
Windows/WSL2/Ubuntu/DockerDesktop/Cursorというお薦めの方式は、開発・運用環境をWSL2/Ubuntu上に作り、WindowsはほぼUIとしてしか使わないという方法です。
(1)WindowsでLinuxを使える「WSL2」
WSL2は、WindowsでLinuxを使えるようにするための仕組みです。
Windowsの中に、Linuxを動かすための特別な環境を作ってくれます。
この環境の中では、Linuxのコマンドやツールがそのまま使えるので、Windowsを使っている人でもLinuxの環境が利用できます。
WSL2の中では、UbuntuというLinuxの一種をインストールします。
Ubuntuには、マイクロソフトがWSL2用にカスタマイズした専用バージョンがあるからです。
(2)アプリごとに環境を作れる「Docker」
Dockerは、アプリケーションを動かすために必要なものをすべてまとめて、「コンテナ」という箱に入れてしまう技術です。
アプリケーションを動かすには、それに合ったソフトウェアやツール、設定などが必要ですが、それらをコンテナに詰め込んでおけば、どこでも同じようにアプリケーションが動かせます。
同じコンテナのレシピを使えば、誰でも全く同じ環境を作れます。アプリケーションごとに専用のコンテナを用意すれば、他のアプリケーションと混ざって動かなくなる心配もありません。
Windows、Mac、Linux(クラウド)、この3大プラットフォームのいずれでも同じアプリを動かすことができます。
(3)使いやすいエディタ「VSCode」と「Cursor」
VSCodeは、プログラムを書くためのエディタです。
拡張機能を追加することで、さまざまな便利な機能を追加できます。
Python用のプログラムを色分けしたり、markdown形式の文書をプレビューしたり、後に述べるGitのツリーを表示したり、いろんな機能が用意されています。
特に、リモート接続(Cursorには標準で入っている)、WSL、Dockerという名前の拡張機能を使うと、WSL2やDockerのコンテナの中のプログラムを直接編集できるんです。
CursorではVSCodeの拡張機能をほとんどそのまま利用できます。
Cursorは、VSCodeをベースに作られた、さらに賢いエディタです。
AIの力を使って、プログラムを書いたり、人のプログラムや技術文書を理解したりするのを手伝ってくれます。
コード全体の文脈をふまえてコードの一部をAIに修正させるというなことや、技術文書を読み込ませてそれをもとに書かせるとか、プログラムの処理目的や内容をAIに書かせることも可能です。
また、Ubuntu(Linux)を動かすには、Linuxのコマンドが必要です。
しかし、Linuxコマンドを覚えていなくても、AIに相談しながらコマンドを作れたりするんですよ。
そこで、WSL2のDocker環境にむけて、Cursor/VSCodeを使えば、Windowsを使いながらLinux環境でのターミナルの操作とプログラミングを体験できます。
(4)管理や運用に便利な機能
WSL2とUbuntuの環境には、Gitというバージョン管理のツールが最初から入っています。
Gitを使えば、GitHubで公開されているオープンソースソフトウェアを即、自分の環境で試すことができます。
また、これを使えば、プログラムの変更履歴を記録して、必要なときにいつでも昔のバージョンに戻せます。
Cursor(VSCode)にも、Gitを使うための便利な拡張機能がたくさんあります。
マウス操作だけで、Gitの色々な操作ができてしまいます。
さらに、Windows側のファイルとLinux側のファイルを簡単に行き来できるのも魅力的ですね。
具体的には、Windows側のファイルをCursor(VSCode)にドラッグ&ドロップすれば、Linux側にコピーできます。
また、WSLのパス(\\wsl$)を使えば、WindowsのエクスプローラからLinux側のファイルを直接編集できます。
データのやり取りがスムーズなので、ストレスなく作業を進められるでしょう。
(5)まとめ
WSL2とUbuntu、Docker、Cursor(VSCode)を組み合わせれば、Windowsユーザーでも、Linuxでアプリケーションを動かすための環境がすぐに手に入ります。
WSL2とUbuntuで、Windowsの中にLinux環境を作れる
Dockerで、アプリケーションを動かすための環境を箱詰めできる
Cursor/VSCodeを使えば、Linux環境での開発が楽になる
Gitなどの管理ツールも、簡単に使い始められる
WindowsとLinuxのファイルのやり取りもスムーズ
Linuxのコマンドが苦手な人でも、Cursorが助けてくれるので安心ですね。
チームで開発する時には、みんなが同じ環境を使えるので、トラブルが減らせます。
ただ、WSL2の環境を作るには少し手間がかかります。
Windowsのバージョンが古いと使えないこともあるので気を付けてください。
Cursorの高度な機能を使うには、お金がかかることもあります。
それでも、長く使っていくことを考えれば、WSL2とUbuntu、Docker、Cursor(VSCode)の環境は、とても役立つはずです。
ぜひ一度、自分で環境を作って、その便利さを実感してみてくださいね。
技術的な補足
WSL2とUbuntuの環境について
WSL2は、Windows Subsystem for Linux 2の略で、Windows上でLinuxを動かすための仮想化環境です。Hyper-Vを使ったカーネルレベルの仮想化により、オーバーヘッドが少なくネイティブに近い速度でLinuxが動作します。
WSL2上では、Ubuntuなどの各種Linuxディストリビューションを簡単にインストールできます。Ubuntuは、Linuxの中でも特に人気が高く、豊富なパッケージとコミュニティのサポートが魅力です。WSL2とUbuntuを組み合わせることで、Windows上でもLinuxと同等の環境が手に入ります。

Dockerの活用
Dockerは、アプリケーションとその実行環境を「コンテナ」という単位でパッケージ化するためのプラットフォームです。コンテナには、アプリケーションの実行に必要なライブラリやツール、設定ファイルなどがすべて含まれます。
Dockerfileというテキストファイルに、コンテナの構成を記述しておけば、そのDockerfileからイメージを作成し、そのイメージからコンテナを起動できます。Dockerfileをチーム内で共有することで、全員が全く同じ環境でアプリケーションを実行できるようになります。
開発時だけでなく、テストや本番環境でも同じDockerイメージを使えば、環境差異によるトラブルを防げます。また、各アプリケーションを独立したコンテナで実行できるので、依存関係が混乱することもありません。
技術的な背景については、次の記事をお読み下さい。
2.環境構築 Step by Step
Linuxにある程度精通している場合、おおむね次の記事の方法でよさそうです。
ただ、Docker Engineを入れるところが鬼門です。
代わりに、Docker Desktop入れたほうが簡単です。
あと、今ならVSCodeではなくAIアシストエディタのCursorがおすすめです。
以下は、わたしがやってうまく行った方法です。
(1)WSL機能の有効化の確認
(2)WSL準備(WSL2 Linux カーネル更新)
(3)Ubuntuインストール
(4)Docker Desktopインストール
(5)Cursorインストール
(6)リモート接続
(7)ためしに「Dify」インストール
この流れで行けば、今話題のDifyのインストールまでいけます。
最後におまけとして、Difyが学べる記事を紹介します。
では、始めましょう。
(1)WSL機能の有効化の確認
Windows 11では、デフォルトでWSL機能が有効になっています。
念の為、確認しておきます。
Windowsのタスクバーの検索窓に「Windowsの機能」と入れて下さい。

出てきた「Windowsの機能の有効化または無効化」をえらびます。
すると、次のダイアログが現れます。
ここで「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックが入っていればOKです。


「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックが入っていない場合は、チェックを入れて「OK」を押して下さい。
(2)WSL準備(WSL2 Linux カーネル更新)
WSL2 Linux カーネル更新をします。
Windows 11の状態によっては、すでに適用済みの場合もあります。
念の為、確認しておきます。
具体的には、次のリンクをクリックします。
「WSL2 Linux カーネル更新プログラムパッケージ」がダウンロードされます。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi
ダウンロードしたら、ファイルを実行してインストールして下さい。
WSL2 Linux カーネル更新プログラムパッケージがすでにインストール済みの場合は、次のエラーが出ます。
「OK」を押し、現れる「Windows Subsystem for Linux Update Setup」の画面にも「Finish」を押して、次の項目に進んで下さい。


インストール済みでない場合は、「Windows Subsystem for Linux Update Setup」の指示に従って、「Next」、「Next」と進んでください。

インストールが実行されます。
最後は、次の画面で「Finish」をクリックして完了です。

(3)Ubuntuインストール
続いて、Linuxの一種であるUbuntuをインストールします。
まず、スタートボタンを右クリックして「ターミナル」をクリックします。

ターミナルの黒い画面が開きます。

次のコマンドを入力。
wsl --install -d Ubuntu
入力が終わったら「Enter」キーを押します。

インストールが進行します。
じっと待ちます。

終わると次の表示になり、別の黒い画面が開きます。

黒いウィンドウが開いてUbuntuが立ち上がります。
少し時間がかかります。
「Installing, this may take a few minutes...」が出てしばらく待ちます。

そして、「Enter new UNIX username:」という表示になります。
ここで、Ubuntu(Unix)用のユーザー名を入力します。
Windowsのユーザー名と違っても問題ありません。
アルファベットで自分の名前など入力して下さい。

さらにパスワード入力です。
簡単なパスワードでかまいせん。
時々、アプリをインストールする時に必要になります。
記録しておいてください。

再度確認用にもう一度同じパスワードを入力します。

すると、
「passwd: password updated successfully
Installation successful!」
と表示された後、Ubuntuの起動メッセージがずらずら表示されます。

最後に、緑色の文字と「$」マークが表示されれば、インストール成功です。
この画面は右上の「x」ボタンを押して閉じます。

(4)Docker Desktopインストール
つづいて、Dockerのインストールを行います。
Ubuntu上でインストールすることもできるようですが、私はできませんでした。
Windows用のDocker Desktopであれば、失敗がありません。
次のホームページの手順で行って下さい。
「Docker Desktop for Windows のダウンロードとインストール」コーナーの手順に沿って行います。
・ダウンロード
・インストール
・PC再起動後のセットアップ
・Docker Desktop を操作する前に
ここまでで大丈夫です。
「hello-world コンテナの実行」以下は無視して下さい。
こちらのDocker Desktopの画面が出れば成功です。

(5)Cursorインストール
つづいて、Cursorのインストールを行います。
Cursorは、Visual Studio Code(VS-Code)の改良版です。
AIを利用してプログラムの編集が可能です。
最近は、ワープロのように使っている方も増えてきています。
私もそうしていますが、便利ですよ!
流れは次の通りです。
a. ダウンロード
b. インストール
c. 初期設定
d. アカウント作成
e. エディタにログイン
f. エディタの機能拡張
では、はじめましょう。
a. ダウンロード
では、ダウンロードから。
次のリンクから、Cursorのホームページを開きます。
このような画面が開きます。

つづいて、「Download for Windows」をクリックして、インストラーをダウンロードします。

2024/5/26時点では、0.33.4が最新版です。
b. インストール
ダウンロードが終わったら「ファイルを開く」をクリック。
インストールが始まります。

インストールが終わると自動的にCursorが起動します。
c. 初期設定
続いて、初期設定を行います。

Languageのところに「日本語」と入れて「Continue」をクリック。

続いてプライバシー設定です。

Cursorの運営に、データを送るかどうかです。
デフォルトでは、AIとのやり取り、コードスニペット、編集操作が記録されて運営に送られます。
「Privacy Mode」を選んで、「Continue」をクリック。

あとひといきです。
d. アカウント作成
Cursorのアカウントをつくる必要があります。

「Sign Up」をクリックします。
すると、「Sign in」画面が開きます。
画面下の方の「Sign up」をクリック。

Sign up画面に切り替わります。
名前とメールアドレスを入れてアカウントをつくってもよいですし、Googleなどのアカウントと連携してもかまいません。
私は面倒なので、Googleアカウントにしました。
「Continue with Google」をクリック。

Googleのログイン認証に切り替わります。
Gmailなどのメールアドレスを入れて、「次へ」。

続いて、パスワードを入力して、「次へ」。(画面省略)
二段階認証をされている方は、それに対応します。(画面省略)
最終的に、次の画面になります。

cursor.shにログインが出たら、「次へ」をクリック。
黒いCursorのホームページに戻ります。
「You may now proceed back to Cursor」と出れば、アカウント登録は終了です。

画面の右上の「x」ボタンで画面を閉じます。

Cursorのエディターの画面に戻ります。
e. エディタにログイン
Cursorのエディターの画面では、「Log in」の青いボタンをクリックして、先程つくったアカウントでログインします。

再度この画面が出てきます。
Cursorのアカウントへのサインイン画面です。

今度は、さっき作ったアカウントを選べばよいので、「Continue with Google」をクリック。
再び、この画面が出ます。

全画面表示していると、途方に暮れるかもしれません。
画面の右上の「x」をクリックして、この画面を閉じます。

Cursorのエディタ画面があるはずです。
これで、Cursorが使えるようになりました。

f. エディタの機能拡張
最低限の機能拡張をしておきます。
・メニューの日本語化
・WSLのフォルダー表示拡張
まず、機能拡張アイコンをクリックです。

すると、ずらずら機能拡張が表示されてきます。

「Search Extensions in Mark…」のところに、「japanese」と入力です。
表示された地球儀のアイコンの「Japanse Language Pack for Visual Studio Code」の「Install」ボタンをクリックします。

すると、画面が開き、右下に「Would you like to change Cursor's display language to Japanese and restart?」と出るので、「Change Language and Restart」の青いボタンをクリックです。

一旦画面が消えて、再度Cursorが立ち上がります。
メニューが日本語されたのを確認して下さい。

続いて、画面の右下に「お使いのシステムには Windows Subsystem for Linux (WSL) がインストールされています。このソフトウェア用のおすすめ拡張機能 'WSL' 拡張機能 提供元: ms-vscode-remote をインストールしますか?」ときいてくるので、青いボタン「インストール」をクリックです。
すると、WSLの画面が開きます。

以上で、最低限の設定は終了です。
更に便利な設定については、別に記事を書く予定です。
なお、左上にある「WELCOME」というところはうるさいので、WELCOMEの右側にある小さな「x」をクリックして消してしまいましょう。
(6)リモート接続
続いて、Ubuntuにログインします。
先ほどインストールしたCursorからログインします。
PowerShellからログインする方法もありますが、Cursorからが圧倒的に便利です。
Cursorの画面を見て下さい。
左下に紫のボタンがあります。

紫ボタンはリモート接続のボタンになっています。

これをクリックすると、画面中央の上にメニューがプルダウンします。

このメニューの一番上の「WSLへの接続」をクリックします。

接続にしばらくかかりますが、最終的に次の画面になります。

画面構成は次のようになっています。

①メニューバー ファイルメニューなどがある
②アクティビティバー サイドバーの内容の切り替え
③サイドバー アクティビティバーの選択により変化。フォルダーツリーが表示されることが多い
④ステータスバー 開いているプロジェクトやファイルに関する情報
⑤コマンドパレット Cursorへの命令を入れたり選択する
⑥ウィンドウバー Cursor固有の画面操作や設定
⑦エディター画面 プログラムのコードなどを編集する画面
⑧パネル画面 ターミナルやDebug情報
④の左下の紫ボタンが「WSL: Ubuntu」に変化しているので確認します。

では、Ubuntu上で、フォルダーを開きます。
③サイドバーの「フォルダーを開く」をクリックします。

⑤コマンドパレットのところに、メニューがドロップダウンします。
Ubuntu上のホームディレクトリ(例では、/home/norito/)が示されているはずです。
そのまま「OK」をクリックします。

③サイドバーがフォルダービューになりました。
Windowsのエクスプローラーのようにフォルダーが表示され、加えてファイルも表示されます。
> の部分はフォルダー、
アイコン 部分はファイルです。

ここでファイルを選択すると、⑦エディター画面にその中身が表示され、編集可能になります。
例えば、「.bashrc」を選択して下さい。

⑦エディター画面に.bashrcの中身が表示されました。
Cursorを使うと、Ubuntu上であることを意識せずにファイルにアクセス可能です。
(7)ためしに「Dify」インストール
では、環境が一通りできたところで、Difyをインストールしてみます。
流れは次の通りです。
a. Cursorのターミナルを表示
b. Difyのソースコードをクローン
c. difyのdockerフォルダーへの移動
d. difyのサーバー起動
e. difyの利用開始
では、始めます。
a. Cursorのターミナルを表示
もしターミナルが表示されていなかったら、ターミナルを表示するため、⑥ウィンドウバーの左から2番めのアイコンをクリックします。

これをクリックすると、⑦エディター画面の下に、⑧パネル画面が表示され、ターミナルが開きます。

このターミナルは、Ubuntuのターミナルになっています。
ここで命令したことは、Ubuntuが実行するということです。
b. Difyのソースコードをクローン
Ubuntuのターミナルから次のコマンドを実行します。
git clone https://github.com/langgenius/dify.git

さっとGitが動いてソースコードが自分のマシンに降りてきます。

difyというフォルダーができています。
③サイドバー のフォルダー・ファイルリストに「dify」が出てているのを確認して下さい。

c. difyのdockerフォルダーへの移動
次のコマンドを入力します。
入力したら「Enter」キーを押す。
cd dify/docker

ubuntuのプロンプトが、水色で「~/dify/docker」となっていればOKです。
d. difyのサーバー起動
次に起動コマンドを入力します。
入力したら「Enter」キーを押す。
docker-compose up -d
次のように、にぎやかな出力が進みます。
初回は、時間かかりますので、ゆるゆる待って下さい。

終わって、Ubuntuのプロンプトができたら、インストールの終了です。
これで、Difyのサーバーが自分のマシンに立ち上がりました。
e. difyの利用開始
あとは、ブラウザでアクセスするだけです。
EdgeまたはChromeで、次のアドレスにアクセスして下さい。
localhost
すると、localhost/installにリダイレクトされます。
そして、Difyの管理者アカウントの設定画面になります。

メールアドレス、ユーザー名、パスワードを適当に入れて、「セットアップ」をクリックです。

続いて、サイイン画面になりますので、先程のメールアドレスとパスワード入れて「サインイン」ボタンをクリック。

すると、Difyがあなたのブラウザにやってきました。
しかも、あなたのコンピュータの中にある、あなた専用のDifyです。

(8)おまけ Difyが学べる記事
3.まとめ
WSL2とUbuntu、Docker、Cursor(VSCode)を組み合わせることで、Windowsユーザーでも手軽にLinux環境でアプリケーション運用を始められます。
WSL2でWindows内にLinux環境を作り、Dockerでアプリごとの動作環境を用意。
Cursorの支援を受けながらLinuxコマンドやプログラムをいじれます。
Gitなどの開発ツールも使いやすく、WindowsとLinuxのファイル共有も簡単。
環境構築には多少の手間がかかりますが、慣れれば生産性の高い開発・運用環境が手に入ります。
是非、挑戦してみて下さい。
清風情報工科学院では、「全国AIアート甲子園」を開催中。
すでに画像生成がっつりな高校生も、はじめて生成AIにさわる高校生も、無料講座で挑戦しよう。Discordコミュニティのサポート付き。

詳しい情報は、こちらから。
いいなと思ったら応援しよう!
