今回は「SSHの仕組み」について図解でわかりやすく解説していきます。

SSHはAWSやローカル開発環境などを使う場合には、ほぼ必須と言っていいほど必要な技術です。 

なんとなくサーバに接続できたけど、「SSHとは何か？」、「公開鍵ってなに？」と分からないことが多く出てくると思います。

この辺の仕組みを理解して、どうやって安全にサーバに接続しているのかを見ていきましょう。

### SSHとは？仕組みをざっくり解説

最初にざっくりと仕組みを説明します。

「PC側」と「サーバ側」があったとして説明します。 PC側からサーバ側に接続したいとします。  
PC側で「秘密鍵」と「公開鍵」というものを作成します（**秘密鍵は絶対に他のサーバや人に渡してはダメ**）。

続いて、接続したいサーバに公開鍵を送ります。  
そして、PC側からSSH接続を試みます。この時に秘密鍵と公開鍵が「**対**」であれば、認証成功になり、接続が成功します。

PC側の秘密鍵と、サーバ側に置いてある公開鍵がペアであれば接続できるってことですね。  
ざっくりとこんな感じですが、もっと詳しく見ていきましょう。

### SSH接続の登場人物

「SSH」での登場人物を紹介します

* 秘密鍵
* 公開鍵
* 乱数
* ハッシュ値

![](https://img.implist.dev/production/entry/body/aeTqyPTm6Ev5b67HtMGCuTjuQAPibesh0pzJ2s5L.png)

耳慣れない単語が出てきましたが、これらがSSHで使用する技術です。 それでは流れを解説していきましょう。

### SSH接続の流れ

SSHで接続する流れは以下です。

1. 自分のPCで「秘密鍵」、「公開鍵」を作成する
2. 接続したいサーバに作成した「公開鍵」を置く
3. PC側からサーバにSSH接続したいと伝える
4. サーバ側で「乱数」を生成する
5. サーバ側で「乱数」と、**2**の「公開鍵」を使って暗号を作って、暗号をPC側に送る
6. 暗号を受けったPC側は「秘密鍵」を使って、暗号を複合して「乱数」を取り出す
7. さらにPC側は取り出した「乱数」からハッシュ値を生成しサーバへ送る
8. サーバ側で「乱数」からハッシュ値を生成する
9. サーバ側は、PC側から受け取った「ハッシュ値」と、サーバ側で生成した「ハッシュ値」を比較する

**そして、両方のハッシュ値が一致していれば、SSH接続が完了します。**

といった流れです。結構たいへんですよね。 これらの細かい内容は「裏でこういうことをしているんだ」という認識で良いと思います。

![](https://img.implist.dev/production/entry/body/E3bFfKE0HPyZShgROkcewbvJ0t6KbIPwB4xFZlqs.png)

### 秘密鍵と公開鍵

中核の技術ですね。

SSH接続をするには2つのペアの「鍵」を作る必要があります。 PC側とサーバ側があったとして、2つの鍵を作るのはPC側です。

秘密鍵は絶対に自分のPC以外には移してはいけません。※これは覚えておいてください。 移して良いのは公開鍵のみです。

さっきから「鍵」と読んでいるものは、ただのファイルです。 ファイル中身をみてみると、公開鍵も秘密鍵も意味不明な文字列が並んでいるだけです。これが鍵の正体です。

#### 公開鍵で何ができるのか

公開鍵で出来るのは、暗号化です。 例えば、サーバと通信するときの「やりとりの内容」を暗号化してくれます。 一度、公開鍵で暗号化したものについては、「秘密鍵」でしか復号（元に戻す）できません。

なので、秘密鍵を誰かにあげたりしたらダメなんです。

この公開鍵は接続したいサーバに送ります。 これで、自分のPC側には「秘密鍵」、サーバ側には「公開鍵」がある状態になります。

### 乱数と公開鍵で暗号作成

サーバが側には今「公開鍵」がある状態ですね。 PC側から接続要求が来たとき、「本当にそのPCは接続してよいPCなのか」というのを確認するため、 サーバ側に送られている「公開鍵」を使って認証を行います。

サーバ側では公開鍵+乱数を使って暗号を作成します。 この乱数はサーバ側で勝手に作成されます。

公開鍵+乱数で作成された暗号は、接続要求をしてきたPC側に送ります。 また、この時サーバ側では乱数をハッシュ化して置いておきます。←後に認証で使います。

### 秘密鍵での複合

さて、サーバ側からPC側へ「暗号」が送られてきました。 この暗号はPC側の秘密鍵でしか複合できません。

PC側には秘密鍵があるので、その秘密鍵を使って複合を行います。 複合されると「サーバ側で作成された乱数」が取り出せます。

乱数からハッシュ値を生成して、サーバ側に「ハッシュ値」を送ってあげます。

サーバ側では「既に生成したハッシュ値」と「PC側から送付されたハッシュ値」がある状態です。 この2つを比較して、一致していれば「接続要求をしているPCは正しい接続元」となります。

これで、見事「SSH接続」が完了します。

### まとめ

SSHは裏で結構大変なことをしているのが分かったかと思います。 ですが、実際に利用するときは「秘密鍵」、「公開鍵」くらい分かっておけば何ら問題はありません。

実際に自分でSSH接続の設定をしてみると、理解しやすくなるかと思います。 このSSHはAWSやローカル開発環境などでは、ほぼ必須の知識なのでぜひ覚えて、設定方法などもマスターできるようになりましょう。

また、別の記事でSSHの接続設定についても解説しますので、お楽しみに。


SSHとは？仕組みを図解でわかりやすく解説！

さて、今回は公開鍵を使ったSSH接続の設定方法を習得しましょう。

開発を行っていると、かなりの頻度でSSH接続設定の場面が出てくるので、覚えておきましょう。

### SSH接続にあたってので前提環境

前提環境として、MacOSXからMacOSX上に構築してあるローカル開発環境に対して、SSH接続設定を行っていきます。 以下ローカル開発環境のことを仮想マシンと呼びます。

![](https://img.implist.dev/production/entry/body/Nnw6VkoDWOyA7t7B1ZTvDxydVGpquA6VvIudsSde.png)

### SSH接続の流れ

Macから仮想マシンにSSH接続をするため、Macで「秘密鍵」「公開鍵」のペアを作る必要があります。 その後、公開鍵を仮想マシンに送付して設置し権限周りを変更し、SSHを試してみます。

* Macで鍵のペアを作成
* 公開鍵を仮想マシンに送付
* 仮想マシンで公開鍵を適切な場所に配置
* 公開鍵の権限を変更
* SSH接続をMacから実行

以上が流れとなります。色々やっているように見えますが、ざっくりいうとMacでファイル作って、仮想マシンに置いているだけです。

### SSH接続設定

それでは、実際に手を動かして接続設定を行っていきましょう。

#### Macで秘密鍵・公開鍵を作成

ターミナルを開いて、鍵を作成するコマンドを実行します。

```ssh-keygen -t rsa```

このコマンドを実行すると、コマンドライン上で色々聞かれますが、 Enter連打でOKです。鍵にパスワードなどを設定しますか？とか聞かれてますが気にずEnter連打でOKです。

コマンドが実行し終わると、ホームディレクトリの.sshディレクトリ内（\~/.ssh/）に以下の2つのファイルが出来ます。

* id_rsa
* id_rsa.pub

id\_rsaというのが秘密鍵です。これは絶対に外部に漏らしていけません！ id\_rsa.pubというのが公開鍵です。pubとついているのでpublic、つまり公開鍵ということです。 この公開鍵は接続したいサーバに送付して配置するファイルとなります。

軽く今回実行した、ssh-keygenコマンドを説明すると、 -tというオプションで暗号化アルゴリズムを指定します。 今回はrsaという非常に強力なアルゴリズムで暗号化を行いました。

コマンドのオプションは、他にも鍵の長さを変える（より強固にする）ものもありますよ。

#### 公開鍵を仮想マシンに送付

送付といっても、ただコピーすればOKです。

まず公開鍵の内容を表示します。

```cat ~/.ssh/id_rsa.pub```

これでコマンドラインに公開鍵の内容が表示されるので、コピーしておきましょう。

続いて、仮想マシンにログインしましょう。Vagrantfileがあるディレクトリで、以下実行してください。

```vagrant ssh```

ログインしたら、公開鍵を配置するディレクトリを作成します。 ※適切な場所に公開鍵を配置しないと、SSH接続することができません。

```mkdir ~/.ssh```

ホームディレクトリに「.ssh」という隠しディレクトリを作成しました。「.」から始まるディレクトリやファイルは隠しディレクトリ、隠しファイルと呼ばれます。

.sshの中にauthorized\_keysというファイルを作成してください。

```touch ~/.ssh/authorized_keys```

このファイルにコピーした公開鍵の内容を貼り付けます。

この時vagrantを使った仮想マシンであれば、.sshディレクトリも、authorized\_keysも既にあり、 authorized\_keysの中に何か記述されていますが、改行してコピーした公開鍵の内容を貼り付けましょう。

なぜ最初からあるかと言うと、vagrantでは予め公開鍵・秘密鍵のペアを作っており vagrant sshというコマンドで接続する際それらを使用しているため、既に存在していました。

#### ファイル、ディレクトリの権限を変える

公開鍵を仮想マシンに設置出来ましたが、これではまだSSH接続は出来ません。 公開鍵を設置したディレクトリやファイルの権限は適切な権限に変えてあげる必要があるんです。

その適切な権限とは

* .sshは700
* authorized\_keysは600

です。chmodコマンドで変更していきましょう。
```
chmod 700 ~/.ssh  
chmod 600 ~/.ssh/authorized_keys
```

これで仮想マシン側の設定は終わりです。

#### SSHコマンドで仮想マシンに接続してみる

いよいよSSH接続を試してみましょう。

Macのターミナル上で以下コマンドを実行しましょう。

```ssh 192.168.33.10 -l vagrant```

これで、パスワードの入力も求められずサーバにログインできれば成功です。 sshコマンドの「-l」というオプションではユーザを指定しています。

これで、SSH接続の設定は終わりです。 今回ローカルな環境で行いましたが、AWSなどのクラウドのリモート環境などでも 何度も行う設定なので、この機会に設定のタイムアタックなどして慣れていってください。

### おまけにSSHの設定ファイルを書く

今回「sshコマンド」でIPアドレスやユーザ名とかを入力しましたが、毎回入力するのは面倒ですよね？ なので、簡単に接続出来るようになる、SSHの設定ファイル書いてみましょう。

Macの.sshディレクトリ内にconfigというファイルがあると思います。なければ作りましょう。 configファイルに以下を記述してください。

```
Host vm  
 HostName     192.168.33.10  
 User         vagrant  
 IdentityFile ~/.ssh/id_rsa
```

そして以下のコマンドを実行してみてください。

ssh vm

どうでしょうか？これでログイン出来ると思います。 コマンドがとてもシンプルになるので、こういった設定ファイルを書いておくのも良いと思いますよ。

設定の説明を簡単にすると、

Hostというところで、SSH接続する仮想マシンに名前をつけます。今回はvmとシンプルな名前にしました。 HostNameというところでは仮想マシンのIPを指定しています。 Userは仮想マシンのユーザ名です。 IdentityFileは秘密鍵の場所です。Macで作成した秘密鍵・公開鍵を作成しましたが、この秘密鍵のパスを書いています。

どうしても、接続する仮想マシンの数が増えてきたりすると、 IPを覚えられませんし、メモっていても入力するのが面倒なので、こういった設定ファイルを活用するのはとても良いことです。


【SSH接続】公開鍵で「サーバにログインする」設定方法

今回はConoHa VPSを利用して、Laravelアプリケーションを最速で公開する方法を紹介します。

ConoHa VPSにはLaravelアプリケーションを起動するテンプレートのようなものが用意されており、それを使えば簡単に起動することが出来ます。

ただ、以下は自分で設定しなければならないので、本番運用ですぐに使えるというわけではありません。

* ドメインの紐付け
* SSL化
* すでにあるアプリケーションのデプロイ

IPは固定のものが与えられるので、「〇〇〇〇.〇〇〇〇.〇〇〇〇.〇〇〇〇」のようなIPにブラウザからアクセスすると、初期状態（インストールしたて）のLaravelのTOPページが閲覧できます。  
今回の記事内容通りに進めると、以下画面にアクセス可能になります。

![](https://img.implist.dev/production/entry/body/m2OiGQ11GAi4TgWJmeoFyFONJyfbdoCeFKwGBeg5.png)

また、今回の内容(2022/8 現在)で手に入る環境は以下の通りです。

* PHP 8.1.7
* Laravel 9.19.0
* MariaDB 10.8.3
* Apache 2.4.41

かなり新し目の環境が手に入りました。  
それではサーバーのセットアップ方法を見ていきましょう。

### ConoHaダッシュボードよりサーバーの追加

サーバーの追加自体は数ステップですぐに終わります。  
ConoHaのアカウントをまだ開設していない方は、以下より開設してみてください。

+++CONOHA_VPS_TEXT+++

![](https://img.implist.dev/production/entry/body/xVxBJOlpNQyZmhInCpKLlyo2MNt8ZfxFlapbmLzD.png)

ダッシュボードの左側メニューより「＋サーバー追加」を選択します。  
この時**上段メニューで「VPS」と選択**されていることに注意してください。

![](https://img.implist.dev/production/entry/body/48mwe6pSCrd7Fqi0gRLODcLrmbOB783qw5lADkCE.png)

「VPS割引きっぷ」は数カ月分まとめて購入すると割引が受けられるものですが、今回はお試しでのため「利用しない」を選択します。  
また、一番安い512MBのマシンスペックを選択します。700円/月くらいと安めです。

イメージタイプのメニューでOSが選択されているので、「Rocky Linux」を選択します。これはCentOSの後継として使われ初めたOSのですね。

![](https://img.implist.dev/production/entry/body/NTaWwXdA0nk4IX09jm7KtkbCCeSgt1XESbjmyQrI.png)

イメージタイプのメニューで「アプリケーション」を選択します。  
rootパスワードを入力します。これはサーバーにrootユーザーでssh接続するときに利用するパスワードです（アプリケーションのメニューじゃなくても表示されているようです、OSでも）。

「他のアプリケーションを見る」を押すと、  

![](https://img.implist.dev/production/entry/body/PoY2ECYQttammsO4q1rXPJpLgGxrXEa49EdSuSVS.png)

「Laravel」が選択できます。  
これを選択したらLaravelアプリケーションを稼働させるのに必要なものが自動でインストール・セットアップされるという感じです。

これで一通りの設定は終わりで、右側の追加を押すとサーバーが作成されます。数分時間がかかります。

![](https://img.implist.dev/production/entry/body/SG16rHtg19NBScjNer6ZND1GJZZhsjZdcb6QHvu9.png)

数分後、ダッシュボードに先程作成したサーバーが表示されます。歯車マークの「詳細情報」を押すと、対象のサーバーの情報が色々閲覧できます。

![](https://img.implist.dev/production/entry/body/5KybEJ0i4jEqHOViojhvXuDcvMrYaAPUDi3uk6ud.png)

詳細情報の画面に、固定のIPが表示されています。ここでは「160.251.47.172」となっています。  
これをブラウザに打ち込むと、Laravelが稼働していることが分かると思います。

![](https://img.implist.dev/production/entry/body/m2OiGQ11GAi4TgWJmeoFyFONJyfbdoCeFKwGBeg5.png)

こうですね。  
今回はドメインでアクセスするということはしませんが、本番環境として利用する場合はドメインの設定やSSLの設定などもしてください。

次はサーバーに入って、設定ファイルやアプリケーションがどういう構成で構築されているのか簡単に見ていきましょう。

### サーバーに入ってみる

以下のようにrootでssh接続します。

ssh 160.251.47.172 -l root

するとパスワードが求められるので、サーバー作成時に入力したパスワードを入力します。

※今はssh接続で、rootユーザー、パスワードログインを行っていますがセキュリティ的に危険なので、本番利用などでは絶対にしないようにしましょう。

本来であればrootでのsshは禁止したり、パスワードを使ったログインはさせないような設定をするべきです。またsshのportを22から変更したりなどセキュリティには気をつけた設定を施します。

その辺りは、[こちら](https://qiita.com/Tocyuki/items/360885365d5bf497c332)で詳しく解説されています。

余談ですが私はssh接続時に何度かパスワードを間違ってしまって、ログインが拒否されるようになってしまいました。  
これは今回作成したサーバーにfail2banというものが入っていたためです。fail2banは不正な接続を記録したりブロックしたりするツールで、ConoHa VPSのRocky Linuxにはデフォルトで入っているようです。セキュリティがきちんと意識されていますね。

このfail2banの初期設定では10分内に5回パスワードを間違えると、施行したIPからのssh接続をブロックするようになっていました。  
fail2banについては[こちら](https://qiita.com/hana%5Fshin/items/1233b3b8eea241bcadad)で詳しく解説されています。

#### 各種設定ディレクトリとコマンド

PHPやApache/MariaDBなどの各種ミドルウェアがインストールされているので、それらの設定を変更したり反映したりするために、設定ファイルのディレクトリの場所とコマンドを記載しておきます。

##### Laravelアプリケーション

`/var/www/html/laravel`

既存のlaravelアプリケーションがある場合はここにアップロードしてあげれば良いですね。ただ.envなどの接続情報は上書きしないように気をつけてください。

artisanコマンドは以下のような感じで実行します。

```
cd /var/www/html/laravel  
php artisan --version
```

##### PHP

/etc/php/8.1/cli

PHPは8.1がインストールされていたので、上記のようなpathになっています。こちらにphp.ini等があるようです。

コマンドは

```
php -v
```

##### Apache

/etc/apache2

Apacheは上記のディレクトリに設定ファイルがありました。

起動コマンド等は以下の様な感じです。

```
起動状況確認  
systemctl status apache2  

停止  
systemctl stop apache2  

起動  
systemctl start apache2
```

##### MariaDB

/etc/mysql

DBに接続する場合は以下コマンドを実行してください。

```
mysql -u root
```

rootのパスワードは「なし」で設定されているようなので、何も入力せずともアクセス可能です。  
これもこのまま本番利用はしないように気をつけてください。rootに強固なパスワードを設定し、アプリケーションや普段遣いでは適当なユーザーを作って利用するようにしましょう。

今回はConoHa VPSで用意されているLaravelの設定を試してみました。  
本番利用するにはまだまだ設定しないといけないことは沢山ありますが、ひとまずインターネット上で動かしてみるということは出来ました。

※サーバーをもう使用しない場合は停止ではなく削除をするようにしてください。ConoHaは停止中も課金されるのでその点注意です。

Conohaのサーバーは以下よりアカウント開設して簡単に起動できるので、ためしてみてください！
+++CONOHA_VPS_TEXT+++

実際に稼働させると楽しいですよ〜

ConoHa VPSで「Laravelアプリケーション」を簡単デプロイ！

ムームードメインで「独自ドメインのAレコード」を設定する方法を解説します。

Aレコードの登録は非常に簡単ですので、ステップに従って操作してみてください。

### 前提として登録したいドメインとIPアドレスを用意する

Aレコードは**ドメイン**と**IPアドレス**を対応付けるものなので、事前にドメインとIPアドレスを用意しておく必要があります。

今回は以下のようにドメイン、IPアドレスを用意しているので、これらを前提に設定していきます。

* ドメイン: implist-site.com
* IPアドレス: 34.111.141.225

独自ドメインはムームードメイン上で取得しているという前提で話を進めます。
まだドメインを取得してないという方は以下ムームードメイン公式サイトより登録してみてください。
+++MUMUDOMAIN_TEXT+++

ちなみに、このIPアドレスはノーコードWebサイト作成ツールのSTUDIOのサーバーになります。  
STUDIOで作ったサイトを独自ドメインで公開するためには、Aレコードで上記のIPアドレスに対応付ける必要があります。

このような設定は**どのようなサイトを公開するときも同じなので、一回Aレコードの設定ができるようになれば、どのような環境のサイトでも独自ドメイン公開できるようになります**。

### Aレコードの設定

それではムームードメインで設定をしてきます。  
まず、ムームードメインの左サイドバーより「ムームーDNS」を選択してください。

![](https://img.implist.dev/production/entry/body/begba6mCV3sLL2F5voZ0C9sC5ZET2rCKxHDzPcxT.png)

ここには、ムームードメイン上で取得しているドメイン一覧が表示されます。  
今回設定するドメインである「implist-site.com」の変更ボタンを押しましょう。

![](https://img.implist.dev/production/entry/body/j2e2JjVwdKg4pADHgCPNOOcp5sohLEAyjmwzHgRl.png)

「設定2」という項目に設定を行っています。

設定する箇所は2箇所で、以下のみです。

* 種別
* 内容

サブドメインを設定したい場合は、〇〇.implist-site.comのようにサブドメインの入力欄に入力してください。  
今回はサブドメインは設定しないので、空欄で大丈夫です。

**「種別」というところは「A」を選択**してください。これがAレコードで、IPとドメインを1:1で対応付けるものです。  
すでにimplist-site.comというドメインを選択して、この画面にきているので「implist-site.com」と入力しなくても良いです。

**「内容」はIPアドレス**を入力しましょう。今回であれば「34.111.141.225」を入力しています。

![](https://img.implist.dev/production/entry/body/1Di5wglRIoJ24nfw4TOssJwJ4xqnuLpUWnXl6Jdv.png)

最後に「セットアップ情報変更」ボタンを押して、完了です。  
**ドメインにIPアドレスが紐づくまでは（DNSに浸透するまで）は時間がかかる**場合がありますのでしばらく待ちましょう。大抵の場合数分程度で反映されます。

実際にドメインにIPアドレスが紐付いているかどうかを確認するには、以下のようなツールを使うと良いです。

<https://rakko.tools/tools/18/>

![](https://img.implist.dev/production/entry/body/wu907oMLaiUM7mBiFv1iodnRAkpMYZKBHd8694VT.png)

確かにimplist-site.comに「34.111.141.225」が紐付いていますね。

これでムームードメインでのAレコードの設定は完了です。

ムームードメインは管理画面の動作が遅いんですが、使い勝手は良いのでこれを気に色々触ってみてみてください！
登録は以下より試してみてください。
+++MUMUDOMAIN_TEXT+++

DNS周りが使えるようになったら、個人でサービス公開できるようになりますよ〜

これでムームードメインでのAレコードの設定は完了です。

ムームードメインで「独自ドメインのAレコード」を設定する方法！

LaravelにはSailと呼ばれる「Laravel環境を簡単に構築・起動」出来る機能があります。このSailはDockerを利用してMySQLやRedisなどの様々なミドルウェアを追加・Laravelと連携可能になります。メールサーバなども建てられちゃいます。

実際に環境構築を行ったところ、めちゃくちゃ簡単だったので、その方法を解説します。

対象環境は以下です。

* MacOSX
* PHP8.0以上
* Laravel9

### 構築方法

それでは構築を行います。インターネットにつながっている状態で以下コマンドを実行してください。

```
curl -s "https://laravel.build/laravel9-app" | bash
```

ここで「laravel9-app」となっている箇所の名前は何でも良いです。好きに命名してください。  
実行すると、laravelアプリケーションとvendor配下も作られます。  
「Please provide your password so we can make some final adjustments to your application's permissions.」このようなメッセージが出てきたらmacのパスワードを入力してあげてください。

実際にアプリケーションのフォルダ覗いてみましょう

```
cd laravel9-app  
ls
```

このようにディレクトリ群が作られていると思います。

![](https://img.implist.dev/production/entry/body/7gYncsZ7RvZ5kfUyqYYhc27hoJe2ZKiNw6CSSa5o.png)

これで構築は完了です。

### 起動方法

起動方法はsailを使っていきます。  
今まではphp artisanコマンドを使っていたと思いますが、sailコマンドを使います。  
sailコマンドはvendor配下に配置されているので、プロジェクト直下で以下の様に起動します。

```
./vendor/bin/sail up 
```

実行すると、デフォルトでSailが用意しているMySQLやRedis等のDockerコンテナが立ち上がります。  
初回の起動は各種Dockerイメージをダウンロードしてくるので遅いですが、2回目以降はダウンロードしないので高速に起動します。

![](https://img.implist.dev/production/entry/body/9zMOdvao87y9Qg6S04n3ZUObVXMmxo2kwx3RsFSh.png)

ちなみにデフォルトで起動するコンテナは以下のようなものがあります。

* MySQL  
   * データベース
* Redis  
   * キーバリューストア
* MeiliSearch  
   * 全文検索エンジン
* MailHog  
   * メールサーバ
* Selenium  
   * ブラウザ操作自動化ツール

これはプロジェクト直下のdocker-compose.ymlを見るとわかります。不要なものはこのファイルから消して置くと起動が若干早くなりますよ

各種コンテナイメージを取得して、コンテナが起動すると「http://localhost:80」でLaravelにアクセスできます。

![](https://img.implist.dev/production/entry/body/KyXBBYOnP2X3sE5cIZMnTS7f4p9djqVsWUGRMufT.png)

このような画面が表示されれば、成功です。右下にLaravel9.2/php8.1.1と記述されていますね。

ちなみにこのLaravelはDockerコンテナ上(PHPのコンテナ)で動作しています。以下のようなコマンドで、コンテナ上のコマンドが実行できます

```
docker-compose exec laravel.test  php -v  
docker-compose exec laravel.test ls
```

PHPのバージョンを確認したり、lsをすることでLaravelプロジェクトのディレクトリ群がコンテナ上にマウントされているのが分かります。  
「laravel.test」はPHPのコンテナ名です。変更することも可能です

### DB接続

mysqlのコンテナにアクセスしてみます。  
.envにユーザ名、パスワードが記述されているので、それを使ってmysqlコマンドにてアクセスします。

docker-compose exec mysql mysql -usail -ppassword

このようにmysqlの操作ができればOKです

```
mysql> show databases;  
+--------------------+  
| Database           |  
+--------------------+  
| information_schema |  
| laravel9_app       |  
+--------------------+  
2 rows in set (0.01 sec)
```

#### テーブル作成をartisanコマンドで行う

DBとの接続は確認できたので、phpコンテナ側からartisanを使って、テーブル作成を行ってみましょう。  
Laravelプロジェクト作成後、database/migrations/配下にマイグレーションファイルが作成されるのでこれを使います。

以下コマンドを実行します。

```
docker-compose exec laravel.test php artisan migrate:refresh
```

![](https://img.implist.dev/production/entry/body/b9cTmwtjqb5YGHf2bPJ1sbgtQ3MX2V2GL2GmcmBN.png)

このような結果がでればテーブル作成成功です。migrationsディレクトリ配下のマイグレーションファイル通りにテーブルが作成されているはずです。

```
docker-compose exec mysql mysql -usail -ppassword  
mysql> show databases;  
mysql> use laravel9_app;  
mysql> show tables;
```

![](https://img.implist.dev/production/entry/body/K3P4RMSgVuGSQBuR7DqrEpQkt4Rz7z6AL0Cxm0fI.png)

この様にテーブルが作成されていることが分かります。

### よく使うコマンドまとめ

最後によく使うコマンドだけまとめておきます。  
開発の際はこの辺をよく使うので、メモしておくと良いでしょう。

#### Laravel起動

```
./vendor/bin/sail up 
```

#### PHP関連

```
docker-compose exec laravel.test composer install
docker-compose exec laravel.test composer update
```

#### Laravel関連

コントローラファイルを生成する  
```
docker-compose exec laravel.test php artisan make:controller SampleController  
```

モデルファイルを生成する  
```
docker-compose exec laravel.test php artisan make:model Sample
```

#### DB関連

テーブル作成ファイル生成  
```
docker-compose exec laravel.test php artisan make:migration create_sample_users_table  
```

データ作成ファイル生成  
```
docker-compose exec laravel.test php artisan make:seeder SamplesTableSeeder  
```

テーブル・データの投入（すでにDBに入っている場合は削除して投入）  
```
docker-compose exec laravel.test php artisan migrate:refresh --seed
```

今回のようにSailを使わず、Docker+Laravelで環境構築をする方法は[こちら](https://www.implist.dev/entries/laravel8-mysql8-environment-for-docker)で紹介していますので、そちらを使いたい方は参考にしてみてください。

Laravel9+Sail（Docker）で環境構築してみた

初心者がまずつまずいてしまう、開発環境作りについてお話します。

初心者のうちは、WindowsやMacのPCに直にプログラミング言語（PHP、Python、Ruby）などを入れ、 勉強や開発を行う事が多いかなと思います。

ですが、ネットのサイトを参考にしていると、開発環境やローカル開発環境といったワードが出てきて、

「なんだそれ！」

ってなってしまいます。（僕もそうでした...）

「なんか難しいことをしてるけど、普通に自分のPCにそのまま、プログラミング言語インストールするだけじゃダメなの？」 と思われる方が多いかなと思います。

そこで、なぜローカル開発環境というものをわざわざ用意し、プログラミングしているのかを噛み砕いて説明します。

### 目次

* 「ごちゃごちゃ」にならないために
* チームで開発するために
* 開発環境と本番環境という考え
* ざっくりまとめ

### 「ごちゃごちゃ」にならないために

例えば、あなたがPHPでプログラム書くぞっとなった場合まず初めにすることと言えば、

PHPをインストールする。そしてガリガリコードを書きますよね。

このくらいですよね。 ではこの後、あなたは何かを解析したくなって、Pythonも入れたくなりました。

するとあなたのPCにはPHPもPythonも入っています。こんな調子で、Rubyを入れたり、WebサーバのApacheを入れたり、データベースのMySQLを入れたりしはじめます。

月日が立つに連れて、あなたのPCはいろいろな言語やミドルウェア（Apache、MySQL等）がどんどん増えていきます。

一見すると、なんでも揃っていて、非常に便利なPCです。

ですが、なんでも出来る環境が「良い環境」と言えるでしょうか？

部屋に例えて言うと、布団とベッドがあったり座椅子やソファーがあったり、和風のもの洋風のもの部屋の中はごちゃごちゃになっています。 気分によって自分の好きなように出来るのは良いことですが、ごちゃごちゃな部屋で生活はあまりしたくありませんよね。

開発環境も同じで、PHPで開発している時は、PythonやRubyは必要ありません。必要でないものは極力排除していくというのが、良い考えだと思います。 「必要な時に必要な環境」で開発するというのが良い開発スタイルです。

部屋の例をとると、洋風の家具があれば、それらは一つの部屋に集約します。 なので、「なんか今日は洋風な気分だ（どんな気分かは置いといて...）」となれば、洋風の部屋に行けばよいのです。

このように部屋をある一定のまとまりで、ポコポコと作ってい行くことによって、整理整頓されていきます。

開発環境も用途（開発するサービス）によって作成し、必要な言語やミドルウェアをインストールするのがセオリーです。セロリではありません。

プログラミングをしていく上で、何事も「ごちゃごちゃ」にさせないと言うのは非常に重要な考え方です。

### チームで開発するために

この記事を読んでいる人は、一人で開発をしているでしょうか？ 複数人でチームを組んで、開発することはありませんか？今はなくともプログラマーであればチームでの開発はいずれ訪れます。

チームで何かを開発するのは、とても楽しいことです。

しかし、開発環境がチーム内でバラバラだと、「辛い思い」をします。 僕も辛い過去が....。

何が辛いかというと、

* 一人はWindows
* 一人はMac
* 一人はLinux

のようにまずOSが違ってくると、インストールするべきものが変わってきます。WindowsでインストールするものがMacではいらなかったり、その逆もしかりです。何がどのバージョンで必要なのか洗い出さないといけません。 こんなめんどくさい事できません！！というか誰もしたくありません。

また、OSのバージョンによっても左右されたり、ミドルウェアのバージョンによっても、不具合がおきたりします。

同じように構築したけど、Macで動いて、Windowsでは動かない！なんてことが往々にして起きます。

やはりこんな時、全てのOSで動くローカル開発環境を作っておけば、ローカル開発環境にインストールしていくものは、全て同じでよいです。 誰か一人が構築（インストールや設定）した手順を、何も考えず実行すれば良いだけです（本当は考えてほしいところですが）。

開発中に新しく、インストールするものが増えた！となった場合には、誰か一人がお試しでインストールして、うまく動いたら、同じことをみんなでしていけば良いだけです。

非常に楽で、確実だと思いますよね！これだけで気分が晴れます。

### 開発環境と本番環境という考え

最後に2つの環境について説明します。

何かサービスを作っていく上では、まず開発を初めに行います。 この時は、自分のPCのローカル開発環境内でしかサービスです。

これを全世界の人に使ってもらうためには、「公開」というステップを踏む必要があります。 サーバを借りて、作ったコードをコピーして、公開する。

この時、公開用のサーバを、本番環境やプロダクト環境と呼んだりします。 この本番環境は、開発環境と全く同じように構築しないといけません。

本番環境だけ、「言語の最新バージョンが出てたから、最新使おう！」なんてことをすると、公開した時に、本当にサービスが動くかどうかなんて分かりません。自分の意図しないところで、必要な機能が消えてたりします。

開発環境と本番環境の設定が違うがために、「動かなくなる」なんて事は絶対にあってはいけません。 なので、必ず開発環境と「同じOS」、「同じミドルウェア」、「同じミドルウェア」で本番環境は構築しなければなりません。

そうすれば開発環境で動くものは「動く」、動かないものは「動かない」ということが分かります。

ここが最上級に重要な考え方です。

### ざっくりまとめ

* いっぱい部屋を作って、部屋ごとにまとまりを作ってごちゃごちゃを解消する。
* チーム開発のときは、個々が思い思いの環境を作ると、チームが崩壊していく。
* 開発環境と本番環境の設定を揃えないと、公開した時に事故る。

ざっくりまとめてみましたが、今回の内容はとても、とても重要なことなので、 環境には気をつけ、楽で楽しい、プログラミングライフを送って行きましょう！


ローカル開発環境の必要性について

さて今回は「DNSの仕組み」を図を用いて解説して、DNSによって名前解決というものが行われている様子を見ていきます。

この記事の対象読者は、

「サイトを公開したいけど、DNSとかよくわからない」  
「ドメインを登録してくれるものってのはなんとなく分かるけど、どういう仕組みなのか分からない」

という「初心者向けDNS解説記事」となってます。ざっくりとDNSの仕組み・全体像を掴んで行きましょう。

### DNSは何をするものか？

DNSは一言でいうと**「ドメイン」と「IPアドレス」を対応付けるためのもの**です。

ドメインをブラウザに入力してサイトにアクセスできるのは、**ドメインとIPアドレスの対応をDNSが持っていて**、**DNSがドメインに対応するIPを返し**、その**IPアドレスが示すサーバにアクセス**しているからです。  
DNSがドメインからIPアドレスを返すことを「名前解決」と呼んだりします。

ドメイン、IPアドレスというのは、  
https://www.example.com/ このExampleサイトを例に取ると、

* ドメインは「www.example.com」
* IPアドレスは「93.184.216.3」

になり、この2つの対応付けがDNSにて行われています。  
DNSは「Domain Name System」の略で、ドメイン名をIPアドレスと対応付けるためのものになります。

![](https://img.implist.dev/production/entry/body/oNWbYBKLW2rg8exd1fDC2GQ2JdO4rEvwwNfQMcHU.png)

仕組みとしては、DNSでドメインとIPアドレスの対応表みたいなものを持っていて、DNSに対してドメインのIPアドレスは何？聞くと対応表に記述されているIPアドレスを返してくれるといった具合です。  
この対応表は「DNSレコード」と呼ばれていて、上の図のように複数登録できたりします。詳しくは次の記事で説明します。

ここで、DNSがそもそもなぜ必要になるのかも簡単に触れておくと、  
「**IPアドレスは数字の羅列で覚えづらいけど、ドメインなら覚えやすい**」からです。  
これが一番の理由です。

![](https://img.implist.dev/production/entry/body/tib0k0L1uhn5VTlACQqx8jyUPDq5eptNWgzjri1j.png)

人間がみて、IPのような数字の羅列を覚えるより、意味のある英単語をつなげた「ドメイン名」の方が覚えやすいですよね。  
IPと比較して覚えやすいというだけなので、普通覚えたりはしないと思いますが、ドメインを見ただけで「ああこういうサイトなんだろうな」とかは、なんとなく分かると思います。

### 登場人物の整理

「DNS」での登場人物を紹介します。

* リゾルバ  
   * ドメインのIPアドレスを知りたいと思っている人（名前解決したい）  
   * 下図ではPC・ブラウザなどがリゾルバとなります
* DNS  
   * 名前解決をしてくれるもの  
   * ドメインとIPアドレスの対応表を持っていて、リゾルバからの要求に答える  
   * リゾルバから「このドメインのIPアドレスおしえて」とくると、対応表をみてIPアドレスを返す
* Webサイト（サーバ）  
   * 本当にアクセスしたい対象  
   * 下図では、Webサイトになる  
   * IPアドレスをDNSに教えてもらうことによって、IPアドレスでアクセスすることができる

![](https://img.implist.dev/production/entry/body/RfLs4e1DxPSVMUovkaYuFLuNbilPm7JwWvIJzvSm.png)

DNS界隈ではもっとたくさんの用語が出てきて、理解しづらいですがひとまずこの3つだけを覚えておけばOKです。この3つがあると認識した上で、名前解決の流れを見ていきましょう。

### ドメインをブラウザのURLに入力して、サイトにアクセスするまでの流れ(名前解決)を図解

何かしらのサイトにアクセスするとき、ブラウザのURLバーにドメイン名を打ち込むとアクセスできますよね。ここではサイトが表示されるまでの流れを図解します。  
（大抵の場合は検索エンジンからサイトを見つけてアクセスすると思いますが、結果一緒なので言及しません）

![](https://img.implist.dev/production/entry/body/xM8HrEk3ypW5cb6MPidSPmXAaLatv4tAJKeFACB1.png)

どういう流れでサイトが表示されているのか、図解すると以下のような感じになります。

![](https://img.implist.dev/production/entry/body/MPC2ebomn4zynUCNoOwsbRzmNOMDDED1bYXO11tH.png)

ステップは大きく分けて4つあります。一つずつ説明します。  
**名前解決と呼ばれているのは①②**の話です。

#### ① www.example.comのIPを要求

まずはブラウザからwww.example.comというサイトにアクセスしようとします。  
ここで行われるのは、DNSに対して「www.example.com」のIPアドレスは何にになるのか？というのを尋ねる（要求）することです。

これは普段私達が意識することはありません。まずはドメインのIPをDNSに要求するんだな、ということだけ覚えておきましょう。

#### ② **93.184.216.3を返す**

IPの要求をDNSに行ったら、DNSはIPを返そうとします。  
どうやってIPを返すかというと、DNSは先に説明した対応表を見に行きます（レコード）。この対応表に「www.example.com」は「93.184.216.3」というIPというのが書かれています。  
（もし書かれていなかったら、別のDNSを見に行ったりするのですが複雑になるのでそこは割愛します）

そしてそのIPが返されます。これが名前解決です。

#### ③ **93.184.216.3にアクセス**

いよいよ目的のサイトのIPがゲットできたので、そのIPのサーバにアクセスします。

このサーバではWebサーバが稼働しているはずなので、そのWebサーバがサイト情報を返してきます。

#### ④ サイト情報を返す

ここでようやくサーバからサイトの情報が返され、ブラウザでサイトが表示されます。

普段私たちから見ると、サイトにアクセスした途端サイトが表示されていますが、裏ではDNSにアクセスしたり、ドメインからIPを見つけ出したりなどいろいろなことが行われていることが分かります。

この例は簡易的な例であり、①②ですぐにIPを返しているように見えますが、この間では様々なDNSを介してIPを取得しようと試みています。  
若干複雑になるので、気になる方は以下を参照ください。

<https://domainname.jp/report/dns/#resolution>

今回は、DNSの仕組み・名前解決の流れをみてきましたが、これを理解した上でDNSの設定をしてみるとかなり理解が深まると思います。  
なので、次回は実際にドメインとIPアドレスを紐付けてDNSに登録するというのをやってみましょう。

その際にレジストラやAレコードなどまた聞き馴染みのない用語がでてきますが、それらも図解しながらしっかりと解説していきます。


【DNSの仕組み】を図解でわかりやすく解説してみた

この記事ではWindowsでWSL2とUbuntuを使って、Docker環境を構築する方法を解説します。

無事に環境構築が完了してDockerをインストールできれば、Windowsの環境を壊すことなく
PHPをインストールしたり、PHP代表的なフレームワークであるLaravelなど起動したりすることができます。

余談ですがLaravelではDockerを利用した、Sailという機能があり、MySQLやRedisなどの複数のミドルウェア追加し、Laravelとシームレスに連携することができます。
また、Sailはメールサーバーの構築やLaravel環境のセットアップ・起動がとても簡単になるので、開発者にとっては大変便利なツールです。

尚、Macユーザの場合の環境構築は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70 "Laravel9+Sail（Docker）で環境構築してみた")をご参照ください。

Windowsユーザの場合は、Dockerの起動方法とLaravelの構築方法は上のMacユーザ向けと同じなのですが、
その前の環境構築が少し複雑であるため、つまづきがちです。

そこで今回はWindowsユーザ向けの環境構築について解説していきます。

Laravelについては、Laravel9.xの超入門シリーズとして[こちら](https://implist.dev/series/laravel-beginner-introduction "PHPのMVCフレームワーク 「Laravel 9.x 」超入門　セットアップから基本構文まで")にまとめていますので、ご参照ください。

今回の対象環境は以下の通りです。

- Windows11
- PHP 8.1.13
- Laravel9

### 環境構築

手順は下記のとおりです。

1. Ubuntuをダウンロード
2. コントロールパネルから「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れる
3. x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロード
4. ダウンロードしたデータをインストール
5. Ubuntuを開いてユーザ名とパスワードを入力
6. Docker Desktopをダウンロード
7. Docker Desktopの初期設定
8. Windows Powershellでlinux環境を起動

以下順番に解説します。

#### 1.Ubuntuをダウンロード

まずはUbuntuをダウンロードします。

![【laravel9-sail-docker-windows】①ubuntuダウンロード](//images.ctfassets.net/2kcyx6q7ww5g/19Cll39UQH0vZ5ogvrks7y/05007661989d6b0cb7c826dfcd5db8f7/___laravel9-sail-docker-windows______ubuntu__________________.png)

Microsoft Storeで「ubuntu」と検索し、Ubuntuをダウンロードします。
※今回はUbuntu20.04.5 LTSをダウンロードしました。

#### 2.コントロールパネルから「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れる

次にコントロールパネル→プログラム→Windowsの機能の有効化または無効化、の順番に進みます。
![【laravel9-sail-docker-windows】②-1コントロールパネルのプログラム](//images.ctfassets.net/2kcyx6q7ww5g/7xRDFoUUdhHcphdxTa2Rvr/dc3f23ea4e9d8c775afc1114d8ed9bd0/___laravel9-sail-docker-windows______-1_____________________________________________.png)

「Windowsの機能の有効化または無効化」の画面で、「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れ、OKをクリックします。
![【laravel9-sail-docker-windows】②-3【チェック】linux用Windowsサブシステム](//images.ctfassets.net/2kcyx6q7ww5g/5yCMYeP7Wq4usBN9tRgjFV/53b7739db70687d8f2c5b9a0efd240b4/___laravel9-sail-docker-windows______-3__________________linux___Windows__________________.png)

![【laravel9-sail-docker-windows】②-4【チェック】仮想マシンプラットフォーム](//images.ctfassets.net/2kcyx6q7ww5g/7w3S6sXygrKZimqey8tjOi/340e2265040d51de334e846bd8f1efbe/___laravel9-sail-docker-windows______-4_________________________________________________________.png)

設定変更後、再起動する必要があるのでいったん再起動を行います。

![【laravel9-sail-docker-windows】②-5コントロールパネル変更後](//images.ctfassets.net/2kcyx6q7ww5g/2pPbKjvYzxXYaQOK0R1i4L/c4b35d3b6de5f6869946fee6654b189f/___laravel9-sail-docker-windows______-5____________________________________.png)

#### 3.x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロード

次に[こちら](https://aka.ms/wsl2kernel "https://aka.ms/wsl2kernelへのリンク")にアクセスしてx64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをクリックしてダウンロードします。

![【laravel9-sail-docker-windows】③-1ubuntuカーネル](//images.ctfassets.net/2kcyx6q7ww5g/1Ho39H2Q2b6NPSGnrvjuPZ/10d7b538840daefe6526cc583a6e8070/___laravel9-sail-docker-windows______-1ubuntu____________.png)

#### 4.ダウンロードしたデータをインストール

次に3.でダウンロードしたデータをインストールします。
ダウンロードしたデータを実行してNext→Finishの順番に進みます。

![【laravel9-sail-docker-windows】③-2ubuntuカーネル初期設定1](//images.ctfassets.net/2kcyx6q7ww5g/4YRYl3ECx539a7dDJnTDVV/84deac62bb4c87201e5405d357297a00/___laravel9-sail-docker-windows______-2ubuntu________________________1.png)

![【laravel9-sail-docker-windows】③-3ubuntuカーネル初期設定2](//images.ctfassets.net/2kcyx6q7ww5g/7oDZu3jfkl0iNPsNpqtU9H/caa0a6bfebf415ad28c387b9d1d07ec2/___laravel9-sail-docker-windows______-3ubuntu________________________2.png)

#### 5.Ubuntuを開いてユーザ名とパスワードを入力

次にUbuntuを開いて、Ubuntu上で使うユーザ名とパスワードを入力します。
操作によってはこのユーザ名とパスワードの入力を求められることがあるので、必ずメモしておきましょう。

パスワードを設定する際は、パスワードを入力しても表示されませんのでご注意ください。
表示されていないだけで、入力はできているので、間違いなく確実に入力するようにしてください。

#### 6.Docker Desktopをダウンロード

次にhttps://www.docker.com/products/docker-desktop にアクセスしてDocker Desktopをダウンロードします。

![【laravel9-sail-docker-windows】⑤-1docker](//images.ctfassets.net/2kcyx6q7ww5g/35JL1CEHD5OKXQPlYWDqBi/ce79c901448d53ad8c3297340becb032/___laravel9-sail-docker-windows______-1docker.png)

ダウンロードしたデータを実行し初期設定を行います。
ショートカットをデスクトップに作るために「Add shortcut to desktop」にチェックを入れてOkをクリックします。

![【laravel9-sail-docker-windows】⑤-2dockerインストール1](//images.ctfassets.net/2kcyx6q7ww5g/5BMtjXe7lKxalOcdOOeu2q/6dd3472aa9405388d0925c39e91fca70/___laravel9-sail-docker-windows______-2docker__________________1.png)

インストール後に再起動を行うとインストールが完了します。

![【laravel9-sail-docker-windows】⑤-3dockerインストール2](//images.ctfassets.net/2kcyx6q7ww5g/7yKOs77t4Lv11Lens58v8G/9e75b8f0fe0f85f62641dc8f0191b24d/___laravel9-sail-docker-windows______-3docker__________________2.png)

#### 7.Docker Desktopの初期設定

次にデスクトップに作成したショートカットからDocker Desktopを起動します。

ホーム画面右上の歯車のマークをクリックし、設定画面に進みます。

![【laravel9-sail-docker-windows】⑤-4docker home](//images.ctfassets.net/2kcyx6q7ww5g/2qM3KNR3MMzHEBD6WdAMij/bd2d5e7cdfb210ece9bbc142a3227618/___laravel9-sail-docker-windows______-4docker_home.png)

下の画像の①Resources→②WSL Integrationの順に進みます。
③「Enable integration with my default WSL distro」にチェックを入れます。
④「Ubuntu-20.04」左のボタンをクリックしてonの状態にします。

![【laravel9-sail-docker-windows】⑤-5docker setting](//images.ctfassets.net/2kcyx6q7ww5g/4bew2pqDDYSIiEZ7bV12DW/1ea70aa2a9ebfffae8a6a5713e382309/___laravel9-sail-docker-windows______-5docker_setting.png)

⑤「Apply & restart」をクリックし、再起動してDocker Desktopの初期設定は完了です。

#### 8.Windows Powershellでlinux環境を起動

次にlinux環境を起動します。

Windowsボタン→検索するには、ここに入力しますをクリックして、「powershell」と入力するとWindows PowerShellアプリが表示され、それをクリックします。

![【laravel9-sail-docker-windows】⑧-1linux環境を起動](//images.ctfassets.net/2kcyx6q7ww5g/6kGALOi1ijFzg303mERziB/80daeacc49c3b582b6292d6bdb42892c/___laravel9-sail-docker-windows______-1linux_______________.png)

上の画像のように「wsl -d Ubuntu-20.04」と入力してエンターキーを押します。

![laravel9-sail-docker-windows -2linux](//images.ctfassets.net/2kcyx6q7ww5g/3kmdYa0FeiO4GT6S6iQxSC/9103b9ef1a3f5b81ebcf62432768aa18/___laravel9-sail-docker-windows______-2linux_______________.png)

新たに表示された行の文字が緑色と青色になれば起動できている状態です。

### LaravelのSailを使ってDocker起動確認

Dockerが起動することを確認するため、Dockerfileを作成して起動してもいいのですが、
せっかくなので冒頭に説明した、「PHPのフレームワークであるLaravel」をインストールして起動してみましょう。
LaravelにはSailというツールがあり、これを使って様々なDockerコンテナを起動することができます。

結構簡単に複数コンテナ起動できます。

具体的なインストール起動方法は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#起動方法 "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

#### DB接続

DB接続は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#db接続 "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

#### よく使うコマンドまとめ

よく使うコマンドまとめは[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#よく使うコマンドまとめ "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

Windowsを使っていて環境構築がうまくいかず困っている方は、参考にして構築してみてください！

Windowsで「WSL2+Ubuntu」を使ってDocker環境構築

Github Codespacesはクラウド上で開発環境、クラウドIDEを提供するサービスです。

月60時間程度は無料で使えます。

[https://github.co.jp/features/codespaces
](https://github.co.jp/features/codespaces)

Githubのアカウントさえあれば、クラウドの開発環境にアクセスでき、ブラウザ上（PC上でも）でIDE（VSCode）を使って開発がすぐに始められます。

今回はVue3の環境構築を構築していきます。

### GithubでCodespacesを起動する

まずはGithubにアクセスして、Codespacesにアクセスします。

[https://github.com/
](https://github.com/)

![1](//images.ctfassets.net/2kcyx6q7ww5g/4Q7LUkw8Pbpd32aCLrDMyh/1fcad6458b164cb7a38253bdff5618b5/1.png)

今回は既存のリポジトリは使わずに、VueのインストールもCodespaces上で行うのでBlankのテンプレートを選択します。

![2](//images.ctfassets.net/2kcyx6q7ww5g/6JHFGnvpvvRWyNbv36Ywy/63069fbe6931b65bc8c5f8a9de681ebb/2.png)

数秒ほどでブラウザ上でVSCodeが起動します。よく見慣れた画面ですね。

ターミナルでコマンド実行もでき、デフォルトでPHPやNode、Ruby、Pythonなどいろいろなプログラミング言語が使用可能になっています。

![3](//images.ctfassets.net/2kcyx6q7ww5g/7B6J4k1GGI7MJlyYsB4ejk/5f5d0c5740cb7357ab13616b56fec7f4/3.png)

ターミナル上でVueをインストールしていきます。

```
npm init vue@latest .
```

「.」とすることで、リポジトリ直下にvueをインストールできます。

vueプロジェクトがインストール出来たら、npm packageをインストールしておきます
```
npm install
```

vueをこの状態で起動しても、ブラウザからアクセス出来ないのでviteの設定を変えていきます。

vite.config.jsを開いて、

```
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // ここを追加
  server: {
    host: true,
  }
})
```

この状態で、vueを起動します。

```
npm run dev
```

ターミナル上の http://localhost:5173 をクリックすると別タブでVueアプリケーションの画面が開きます。

今回は右下に出てきた、すべての転送されたポートを表示から、同一画面上にVueの画面を開いていきます。

![3.1](//images.ctfassets.net/2kcyx6q7ww5g/2adNhdJxege4AsYdFm8rVK/a4f744379c567aabf9f70777800a5f31/3.1.png)

ローカルアドレスの右側のボタンを押すと、

![4](//images.ctfassets.net/2kcyx6q7ww5g/2j2yIJ9MkO2hqZcJFRBWLD/49be8cffac55aeb862ab0872c7d4d6e6/4.png)

このようにVueの画面が表示されます。エディタとVueの画面を見ながら開発できます。

![5](//images.ctfassets.net/2kcyx6q7ww5g/1NOQ8TD7M4nLrzSzQRcYZz/fc0d0ead601129010b7005dd4c5f5dcc/5.png)

実際にコードを編集すると、画面リロードなしで反映されます。ｈｍｒも効いていますね。

![6](//images.ctfassets.net/2kcyx6q7ww5g/2mNMG3EThdau0b42I8S2bO/71dc5a3d6ed62bcb1f6753fce65101bc/6.png)

### Gitリポジトリを作成してコミットする

現段階ではCodespaces上でVueのアプリケーションを実行しているだけで、Gitのリポジトリは作成されていません。

この開発環境を削除すると、コードも消えてしまうのでGitリポジトリ化してコードをコミットしていきましょう。

左メニューよりGitを選択して、Publish to Githubを押します。

![7 github](//images.ctfassets.net/2kcyx6q7ww5g/4MtMlFqQHFTS6zY0GGqKq6/4955d0516a5cce0dcebda334dbffa832/7_github.png)

適当にリポジトリ名をつけて、private repositoryで作っておきます。

![8](//images.ctfassets.net/2kcyx6q7ww5g/3A2CY2cXPwmIZ7srRFra3Z/25a018f84b9196a4ff00529329e4ba18/8.png)

以下のようにメッセージが出てきたら、リポジトリ作成完了です。

![9](//images.ctfassets.net/2kcyx6q7ww5g/49xvSW9VdbfeBp2kAdBqWj/36eb6075ffe62f2b2d03fc9840b1a593/9.png)

### CodespacesをローカルPCのVSCodeで使う

ローカルPCのVSCodeでもCodespacesにアクセスできるので、そちらも使っていきましょう。
使い方は簡単で、先程作成したcodespaces選択して

![10 local](//images.ctfassets.net/2kcyx6q7ww5g/6r35NXXC1np3UYmmWlRTL3/1c45f55ef87a015eb44a3bf9da1a5730/10_local.png)

「Open in Visual Studio Code」を開きましょう。

![11](//images.ctfassets.net/2kcyx6q7ww5g/3LhZX2OHdpTUbX2PRuGNaO/c4fb1229ad49b16060bee7ae663c7224/11.png)

このように開けます。リモート上で実行するときと同様にターミナルを開いて、

```
npm run dev
```

を実行して「[http://localhost:5173](http://localhost:5173)」にアクセスできます。

![12](//images.ctfassets.net/2kcyx6q7ww5g/75i7oOhuRZQlJ8zCuUqzS5/fbbf3d518fb332e8b290e0a0980094ee/12.png)

### GitHub Codespaces 料金・無料枠の確認する

GitHub Codespacesは月60時間程度無料で使えるのですが、正確には1ヶ月あたり120コアが無料枠ととなります。

Blankのcodespaceを開くと、最小の2コアの環境が起動されます。

つまり2コアを毎時消費するので、120コア使えるということは60時間使えるということです。最小が2コアで2コア単位でスペックを強化していくことができます。

vueの開発では2コアで、今のところ十分です。

#### 使用率の確認
どのくらい月の無料枠を消費しているかを確認してみましょう。

Settingsを開いて、

![13 bill](//images.ctfassets.net/2kcyx6q7ww5g/6bwF72qtn0G19iwn5Rjpyx/40ef0ee347493898fa4d96076e857847/13_bill.png)

Billing and plansのPlans and useageを選択します。

![14](//images.ctfassets.net/2kcyx6q7ww5g/1jRf3oaZA4nMVxJigkIbkQ/d0b2dd68f530f5575fc7b2bd976654a7/14.png)

Codespacesの欄にUseage hoursとStorageがあります。

これが無料枠の消費状況です。ストレージにも容量制限がありますが、15GBもあるのでそうそう超えることは無いでしょう。

![15](//images.ctfassets.net/2kcyx6q7ww5g/7xfXalZZZGFn0k39Md0dsk/f27475fbb4c75246d8b026b7ee17ecbe/15.png)

今回は、CodespacesでVueの開発環境を構築してみましたが、かなりサクサク動作して起動までも高速でとても開発しやすいなといった印象です。

### VSCodeのプラグインをデフォルトでインストールするようにする

codespacesでプロジェクトを開いたとき、VSCodeのプラグインは何もインストールされていない状態です。

VSCodeからインストールするべき、プラグインの提案をしてくれるんですが都度インストールするのも手間なので、起動時にインストールされるように設定しておきましょう。

プロジェクト直下に

```
devcontainer/devcontainer.js
```

とファイルを作成して、extensionsにインストールしたいプラグインを入力しておきます。

```json
{
    "extensions": [
        "Vue.volar"
    ]
}
```

この状態をリポジトリにコミットしておくと、次回から起動するときにVue.volarがインストールされます。

ちなみにこのプラグインはVueの開発をサポートするプラグインなので入れておきましょう。
