1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Laravel10] VScodeでLaravelSailの環境を構築する!

Last updated at Posted at 2024-04-20

今回は、ホストがWindowsOS の私が、WSL2 (LinuxOS) でLaravelのプロジェクトを開発をするための準備をしていきます!

複数のサイトを参照しながら進めていくことになりますので、長丁場になります!頑張りましょう!💪

前提

  • ホストOS:windows
  • 準備するDocker環境のOS:Linux
  • コードエディタ:VSCode
  • プロジェクト:Laravel

下記の日本語ドキュメントを参考に、進めていきます。

基本的には、このドキュメントに沿って準備をすれば問題なく進み、そして完結します。

日本語ドキュメントは、公式ではありません。

川瀬さんの個人運営です。サイト継続のため寄付と広告、スポンサーを募集されています。

詳細は、Readableの「寄付のお願いと広告の募集」を参照してください。

手順

日本語ドキュメントの「WindowsでのSail」という項目より

Windowsマシンに新しいLaravelアプリケーションを作成する前に、必ずDocker Desktopをインストールしてください。次に、Windows Subsystem for Linux 2(WSL2)がインストールされ、有効になっていることを確認する必要があります。

上記を参考に、すべきことの2つを整理します。

  1. Docker Desktopのインストール
  2. Windows Subsystem for Linux 2(WSL2)がインストールされ、有効になっていることを確認

Docker Desktopのインストール

まずは、Docker Desktopのインストールから行っていきます。

Docker Desktopのインストーラーをダウンロードします。
下記、サイトからインストール出来ます。

インストーラを開き、Dockerデスクトップをインストールします。

インストール手順に不明点があれば、下記のサイトを参照してください。

次に、Windows Subsystem for Linux 2(WSL2)をインストールします。

インストール手順は、下記を参照してください。

Windows コマンド プロンプトを管理者モードで開き、wsl --install コマンドを入力し、その後、マシンを再起動します。

このコマンドにより、WSL を実行し、Linux の Ubuntu ディストリビューション(配布物)をインストールするために必要な機能が有効になります。
下記のような文章が出れば成功です。

要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。

指示に従い、再起動します。

下記のような文章が出るため、言われるようにdefault UNIX user account を作成します。

Please create a default UNIX user account.

ユーザー登録後です。

下記のような文章が出れば成功です。

Welcome to Ubuntu 22.04.3 LTS (GNU/Linux 5.15.146.1-microsoft-standard-WSL2 x86_64)

これにより、WSL を実行し、Linux の Ubuntu ディストリビューションをインストールするために必要な機能が有効になりました。

以上で、「WindowsでのSail」という項目の完了です。

  • Docker Desktopのインストール
  • Windows Subsystem for Linux 2(WSL2)がインストールされ、有効になっていることを確認

その後の手順は、日本語ドキュメントに次のようにあります。

Note: WSL2をインストールして有効にした後、DockerデスクトップがWSL2バックエンドを使用するように構成されていることを確認する必要があります。

WSL2バックエンドを使用

次に、DockerデスクトップがWSL2バックエンドを使用するように構成されていることを確認します。

下記のページの「Docker Desktop のインストール」の項目を参考にします。

3. [設定]>[全般] で、[Use the WSL 2 based engine](WSL 2 ベースのエンジンを使用する) がオンになっていることを確認します。

説明されるように確認をします。

確認が取れたら、laravelのドキュメントに戻ります。

次に、簡単なターミナルコマンドを使用して新しいLaravelプロジェクトを作成してみましょう。

Laravelプロジェクトを作成

Linuxコマンドライン(Ubuntu)を開き、以下の3つのコマンドを順次、入力する。

// 新規ディレクトリを作成
mkdir example-app

// 新規ディレクトリに移動
cd example-app

curl -s https://laravel.build/example-app | bash

そうすると、もろもろのダウンロードなどが行われます。

途中で止まることがありますが、問題はないので処理が終了するまでは放置しましょう。

$ sudo su
$ cd example-app && ./vendor/bin/sail up
laravel.test-1  |    INFO  Server running on [http://0.0.0.0:80].
laravel.test-1  |   Press Ctrl+C to stop the server

上記のようになれば完了です。

VScodeとの連携

ここからは、VScodeとの連携を行います。

上記のサイトを参考に進めていきます。以下は、手順の抜粋です。

  • VS Code と WSL 拡張機能をインストールする
  • Linux ディストリビューションを更新する
$ sudo apt-get update
  • Visual Studio Code で WSL プロジェクトを開く
  • VS Code から

VS Code でショートカット CTRL+SHIFT+P を使用してコマンド パレットを起動することで、より多くの VS Code の WSL オプションにアクセスすることもできます。 その後「WSL」と入力すると、利用できるオプションの一覧が表示されます。

その後、コマンドパレットに「WSL」と入力し、オプションの中から「WSL:WSLへの接続」を選択することで、接続ができます。

左下に「WSL:~」と出れば完了です。

最後に

以上で、Windowsデスクトップで、Laravel-Sailを利用しLinux-OSのLaravelのプロジェクトを開発をするための準備が完了です!

お疲れ様でした!😊

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?