2023年8月の振り返り

Laprasの技術スコアが3.5を超えたので学習履歴を振り返る

2023年7月の振り返り

週末振り返り 2023.07.10~16

2023年6月の振り返り

【LT登壇記録】バックエンドエンジニアがデザインとフロントエンドに挑戦してみた

週末振り返り 6.19 ~ 6.25

【テスト】悶値と例外処理についての考え方

【Git】リモート上で削除したブランチをローカルに反映させる

Next.js(13.4.1)のプロジェクトにJest+React Testing Libraryを導入してテストを実装する準備

週末振り返り 6.12 ~ 6.18

Qiita×Udemyの記事投稿キャンペーンで最優秀賞を受賞しました

【Blogアップデート】ISRを実装しました。

週末振り返り 6.5 ~ 6.11

週末振り返り 5.29 ~ 6.4

2023年５月の振り返り

週末振り返り 5/22 ~ 5/28

週末振り返り 5/15 ~ 5/21

【Udemy】Laravelシステム開発講座 【AWS PHP 8 Laravel 9 RDS(PostgresSQL)】完了しました！

勉強法の勉強会 参加レポート

振り返りKPT2023.5.14

2023GW10連休の振り返り

振り返りKPT2023.5.7

Vercelで簡単に実装！Cron Jobsの設定方法と活用例

【CloudVisonAPI】シフト表からカレンダーに予定を入れる作業を自動化したい【Python】

## はじめに

S3＋CloudFrontでホスティングされているプロジェクトでCodePipelineでS3へのデプロイ後にCloudFrontのキャッシュを自動で削除するLambda関数を作成しました。

備忘録として残します。あくまでも簡易的な実装例の1つとして参照してください。

## 概要

HTML/CSS/JavaScriptで構成されている静的サイト。
S3でホスティングしCloudFrontから配信している。
CI/CDがCodePipelineで自動化されている。
CloudFrontのキャッシュの削除を手動でマネジメントコンソールから行っていた。

## 実装
### 1. キャッシュ削除を行うLambda関数を実装
今回、Lambda関数はPythonで実装する。

```bash
import boto3
import time
import os

# Lambdaのエントリーポイント
# HP本番環境のCloudFrontディストリビューションに対してキャッシュ削除を行う
def lambda_handler(event, context):
    client = boto3.client('cloudfront')
    pipeline = boto3.client('codepipeline')
    try:
        # HP本番環境のディストリビューションIDを指定してキャッシュ削除を実行
        invalidation = client.create_invalidation(DistributionId='【ここにCloudFrontのディストリビューションIDを記載】',
            InvalidationBatch={
                'Paths': {
                    'Quantity': 1,
                    'Items': ['/*']
            },
            # CallerReferenceは一意になるように設定する必要があるため、現在時刻を設定
            'CallerReference': str(time.time())
        })

         # CodePipeline ジョブIDを取得
        job_id = event['CodePipeline.job']['id']

        # CodePipeline に成功レスポンスを送信
        pipeline.put_job_success_result(jobId=job_id)

    except Exception as e:
        # CodePipelineのジョブIDを指定して失敗を通知
        pipeline.put_job_failure_result(
            jobId=job_id,
            failureDetails={
                "type": "JobFailed",
                "message": str(e),
            },
        )
```

要点を説明すると、
- CodePipelineから呼び出されることを前提にキャッシュを全削除する。
- キャッシュ削除をする際にCallerReferenceが一意である必要があるので現在時刻を設定
- CodePipelineのジョブIDを取得してキャッシュ削除が完了したことをCodePipelineへ通知する

### 2. Lambda関数用のIAMポリシーを編集

Lambda関数に関連付けしているIAMロールにアタッチされているIAMポリシーに必要な権限を追加する。
CodePipelineへ実行結果を通知するために
- “codepipeline:PutJobFailureResult"
- "codepipeline:PutJobSuccessResult"

Lambda関数がCloudFrontのキャッシュを削除するために
- "cloudfront:CreateInvalidation”
の権限を許可する。

### 3. CodePipelineを編集
S3へのデプロイが完了した後に新しくステージを追加し、アクションプロバイダーをAWS Lambdaに設定する。
2．で実装したLambda関数を呼び出す。
### 4. 動作確認

デプロイを実行し、CloudFrontの対象のディストリビューションのキャッシュ削除の履歴を確認し、実行されていることを確認する。


<h2 data-sourcepos="1:1-1:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
S3＋CloudFrontでホスティングされているプロジェクトでCodePipelineでS3へのデプロイ後にCloudFrontのキャッシュを自動で削除するLambda関数を作成しました。
備忘録として残します。あくまでも簡易的な実装例の1つとして参照してください。
<h2 data-sourcepos="7:1-7:9">
<a href="#%E6%A6%82%E8%A6%81"></a>概要</h2>
HTML/CSS/JavaScriptで構成されている静的サイト。 
S3でホスティングしCloudFrontから配信している。 
CI/CDがCodePipelineで自動化されている。 
CloudFrontのキャッシュの削除を手動でマネジメントコンソールから行っていた。
<h2 data-sourcepos="14:1-14:9">
<a href="#%E5%AE%9F%E8%A3%85"></a>実装</h2>
<h3 data-sourcepos="15:1-15:58">
<a href="#1-%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E5%89%8A%E9%99%A4%E3%82%92%E8%A1%8C%E3%81%86lambda%E9%96%A2%E6%95%B0%E3%82%92%E5%AE%9F%E8%A3%85"></a>1. キャッシュ削除を行うLambda関数を実装</h3>
今回、Lambda関数はPythonで実装する。
<div class="code-frame" data-lang="bash" data-sourcepos="18:1-55:3"><div class="highlight"><pre><code>import boto3
import time
import os

# Lambdaのエントリーポイント
# HP本番環境のCloudFrontディストリビューションに対してキャッシュ削除を行う
def lambda_handler(event, context):
 client = boto3.client('cloudfront')
 pipeline = boto3.client('codepipeline')
 try:
 # HP本番環境のディストリビューションIDを指定してキャッシュ削除を実行
 invalidation = client.create_invalidation(DistributionId='【ここにCloudFrontのディストリビューションIDを記載】',
 InvalidationBatch={
 'Paths': {
 'Quantity': 1,
 'Items': ['/*']
 },
 # CallerReferenceは一意になるように設定する必要があるため、現在時刻を設定
 'CallerReference': str(time.time())
 })

 # CodePipeline ジョブIDを取得
 job_id = event['CodePipeline.job']['id']

 # CodePipeline に成功レスポンスを送信
 pipeline.put_job_success_result(jobId=job_id)

 except Exception as e:
 # CodePipelineのジョブIDを指定して失敗を通知
 pipeline.put_job_failure_result(
 jobId=job_id,
 failureDetails={
 "type": "JobFailed",
 "message": str(e),
 },
 )
</code></pre></div></div>
要点を説明すると、
<ul data-sourcepos="58:1-61:0">
<li data-sourcepos="58:1-58:92">CodePipelineから呼び出されることを前提にキャッシュを全削除する。</li>
<li data-sourcepos="59:1-59:113">キャッシュ削除をする際にCallerReferenceが一意である必要があるので現在時刻を設定</li>
<li data-sourcepos="60:1-61:0">CodePipelineのジョブIDを取得してキャッシュ削除が完了したことをCodePipelineへ通知する</li>
</ul>
<h3 data-sourcepos="62:1-62:49">
<a href="#2-lambda%E9%96%A2%E6%95%B0%E7%94%A8%E3%81%AEiam%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%E3%82%92%E7%B7%A8%E9%9B%86"></a>2. Lambda関数用のIAMポリシーを編集</h3>
Lambda関数に関連付けしているIAMロールにアタッチされているIAMポリシーに必要な権限を追加する。 
CodePipelineへ実行結果を通知するために
<ul data-sourcepos="66:1-68:0">
<li data-sourcepos="66:1-66:38">“codepipeline:PutJobFailureResult"</li>
<li data-sourcepos="67:1-68:0">"codepipeline:PutJobSuccessResult"</li>
</ul>
Lambda関数がCloudFrontのキャッシュを削除するために
<ul data-sourcepos="70:1-72:0">
<li data-sourcepos="70:1-72:0">"cloudfront:CreateInvalidation” 
の権限を許可する。</li>
</ul>
<h3 data-sourcepos="73:1-73:28">
<a href="#3-codepipeline%E3%82%92%E7%B7%A8%E9%9B%86"></a>3. CodePipelineを編集</h3>
S3へのデプロイが完了した後に新しくステージを追加し、アクションプロバイダーをAWS Lambdaに設定する。 
2．で実装したLambda関数を呼び出す。
<h3 data-sourcepos="76:1-76:19">
<a href="#4-%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D"></a>4. 動作確認</h3>
デプロイを実行し、CloudFrontの対象のディストリビューションのキャッシュ削除の履歴を確認し、実行されていることを確認する。

デプロイ後にCloudFrontのキャッシュ削除をLambda関数で自動化する

ryosuke horie

## エラーの内容

Cloudfrontとs3を使用してVue製のSPAフロントエンドをホスティングしている時に、「https://example.com/login」のような、root直下以外のurlパスを指定したり、リロードするとCloudfrontのAccessDenyのエラーが表示されてしまった。

## 原因

Cloudfrontのエラーページの設定をしていなかったため。

「/login」のようにroot直下の「/」以外に直接アクセスされたり、リロードされるとCloudfrontはオリジンの対応するhtmlを探しに行ってしまう。

当然、「login.html」のようなページは用意しないのでファイルが存在せず、エラーとなる。

## 解決策

CloudFrontのカスタムエラーレスポンスで、403のときに/index.html（今回は「/」）へ転送するよう設定する。

今回、フロントエンドのインフラをTypeScript版aws cdkで構築しているため、以下のように記述しデプロイした。

```typescript
        // CloudFrontディストリビューションを作成する
		const distribution = new aws_cloudfront.Distribution(this, "Distribution", {
			domainNames: ["example.com"],
			certificate,
			comment: "example.com",
			defaultRootObject: "index.html",
			defaultBehavior: {
				allowedMethods: aws_cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
				cachedMethods: aws_cloudfront.CachedMethods.CACHE_GET_HEAD_OPTIONS,
				cachePolicy: aws_cloudfront.CachePolicy.CACHING_OPTIMIZED,
				viewerProtocolPolicy:
					aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
				origin: new aws_cloudfront_origins.S3Origin(websiteBucket, {
					originAccessIdentity,
				}),
			},
			// 403エラーの時に「/」に飛ばす(SPAのため、リロードや直アクセスに対策するため)
			errorResponses: [
				{
					httpStatus: 403,
					responseHttpStatus: 200,
					responsePagePath: "/",
				},
			],
			priceClass: aws_cloudfront.PriceClass.PRICE_CLASS_100,
		});
```

## 結果

Access Deniedのエラーが表示されることはなくなり、リロードされたり、URLで直接アクセスされても表示できるように修正できました。

## 参考文献

[https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/](https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/)


<h2 data-sourcepos="1:1-1:21">
<a href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%86%85%E5%AE%B9"></a>エラーの内容</h2>
Cloudfrontとs3を使用してVue製のSPAフロントエンドをホスティングしている時に、「<a href="https://example.com/login%E3%80%8D%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%80%81root%E7%9B%B4%E4%B8%8B%E4%BB%A5%E5%A4%96%E3%81%AEurl%E3%83%91%E3%82%B9%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%8A%E3%80%81%E3%83%AA%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E3%81%A8Cloudfront%E3%81%AEAccessDeny%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E3%80%82" class="autolink" rel="nofollow noopener" target="_blank">https://example.com/login」のような、root直下以外のurlパスを指定したり、リロードするとCloudfrontのAccessDenyのエラーが表示されてしまった。</a>
<h2 data-sourcepos="5:1-5:9">
<a href="#%E5%8E%9F%E5%9B%A0"></a>原因</h2>
Cloudfrontのエラーページの設定をしていなかったため。
「/login」のようにroot直下の「/」以外に直接アクセスされたり、リロードされるとCloudfrontはオリジンの対応するhtmlを探しに行ってしまう。
当然、「login.html」のようなページは用意しないのでファイルが存在せず、エラーとなる。
<h2 data-sourcepos="13:1-13:12">
<a href="#%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>解決策</h2>
CloudFrontのカスタムエラーレスポンスで、403のときに/index.html（今回は「/」）へ転送するよう設定する。
今回、フロントエンドのインフラをTypeScript版aws cdkで構築しているため、以下のように記述しデプロイした。
<div class="code-frame" data-lang="typescript" data-sourcepos="19:1-46:3"><div class="highlight"><pre><code> // CloudFrontディストリビューションを作成する
		const distribution = new aws_cloudfront.Distribution(this, "Distribution", {
			domainNames: ["example.com"],
			certificate,
			comment: "example.com",
			defaultRootObject: "index.html",
			defaultBehavior: {
				allowedMethods: aws_cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
				cachedMethods: aws_cloudfront.CachedMethods.CACHE_GET_HEAD_OPTIONS,
				cachePolicy: aws_cloudfront.CachePolicy.CACHING_OPTIMIZED,
				viewerProtocolPolicy:
					aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
				origin: new aws_cloudfront_origins.S3Origin(websiteBucket, {
					originAccessIdentity,
				}),
			},
			// 403エラーの時に「/」に飛ばす(SPAのため、リロードや直アクセスに対策するため)
			errorResponses: [
				{
					httpStatus: 403,
					responseHttpStatus: 200,
					responsePagePath: "/",
				},
			],
			priceClass: aws_cloudfront.PriceClass.PRICE_CLASS_100,
		});
</code></pre></div></div>
<h2 data-sourcepos="48:1-48:9">
<a href="#%E7%B5%90%E6%9E%9C"></a>結果</h2>
Access Deniedのエラーが表示されることはなくなり、リロードされたり、URLで直接アクセスされても表示できるように修正できました。
<h2 data-sourcepos="52:1-52:15">
<a href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"></a>参考文献</h2>
<a href="https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/" rel="nofollow noopener" target="_blank">https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/</a>

【Cloudfront】 SPAをホストする場合、「/」以外のアクセスでリダイレクトさせる

## 概要
諸事情によってRockey Linuxを利用してリモートに開発環境を作成し開発を行っています。

この開発用サーバーからセルフホストのGitLabサーバーへ通信する際にAWS SSMを立ち上げています。

```jsx
aws ssm start-session --target i-xxxxxxxxxxxxx --document-name AWS-StartPortForwardingSession --parameters portNumber="xxx",localPortNumber="xxxxx"
```

このようなコマンドを実行すると403エラーが発生していました。

```jsx
An error occurred (403) when calling the StartSession operation: Server authentication failed: <UnauthorizedRequest xmlns=""><message>Forbidden.</message></UnauthorizedRequest>
```

この解決にLinuxサーバーのローカルタイムゾーンの設定が原因だと判断するまでに時間がかかってしまったので備忘録として残します

## 環境

```bash
$ cat /etc/os-release
NAME="Rocky Linux"
VERSION="9.3 (Blue Onyx)"
ID="rocky"
ID_LIKE="rhel centos fedora"
VERSION_ID="9.3"
PLATFORM_ID="platform:el9"
PRETTY_NAME="Rocky Linux 9.3 (Blue Onyx)"
ANSI_COLOR="0;32"
LOGO="fedora-logo-icon"
CPE_NAME="cpe:/o:rocky:rocky:9::baseos"
HOME_URL="https://rockylinux.org/"
BUG_REPORT_URL="https://bugs.rockylinux.org/"
SUPPORT_END="2032-05-31"
ROCKY_SUPPORT_PRODUCT="Rocky-Linux-9"
ROCKY_SUPPORT_PRODUCT_VERSION="9.3"
REDHAT_SUPPORT_PRODUCT="Rocky Linux"
REDHAT_SUPPORT_PRODUCT_VERSION="9.3"
```

IAMユーザーの権限などには問題がない状態。

## 解決策

```bash
sudo yum update
sudo systemctl start chronyd
sudo reboot
```

Chronydが有効化されておらず、ローカルタイムゾーンが8時間以上ずれていた。

Chronydによって時間を同期させることでSSMのエラーを解決することができました。

## 参考

****【RHEL8/CentOS8】NTPは死んだ。時代はChrony。****

https://qiita.com/thzking/items/c2bcf7d60963b4dab7b6

**chrony の概要および設定**

https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/7/html/system_administrators_guide/sect-understanding_chrony_and-its_configuration#doc-wrapper

<h2 data-sourcepos="1:1-1:9">
<a href="#%E6%A6%82%E8%A6%81"></a>概要</h2>
諸事情によってRockey Linuxを利用してリモートに開発環境を作成し開発を行っています。
この開発用サーバーからセルフホストのGitLabサーバーへ通信する際にAWS SSMを立ち上げています。
<div class="code-frame" data-lang="jsx" data-sourcepos="6:1-8:3"><div class="highlight"><pre><code>aws ssm start-session --target i-xxxxxxxxxxxxx --document-name AWS-StartPortForwardingSession --parameters portNumber="xxx",localPortNumber="xxxxx"
</code></pre></div></div>
このようなコマンドを実行すると403エラーが発生していました。
<div class="code-frame" data-lang="jsx" data-sourcepos="12:1-14:3"><div class="highlight"><pre><code>An error occurred (403) when calling the StartSession operation: Server authentication failed: &lt;UnauthorizedRequest xmlns=""&gt;&lt;message&gt;Forbidden.&lt;/message&gt;&lt;/UnauthorizedRequest&gt;
</code></pre></div></div>
この解決にLinuxサーバーのローカルタイムゾーンの設定が原因だと判断するまでに時間がかかってしまったので備忘録として残します
<h2 data-sourcepos="18:1-18:9">
<a href="#%E7%92%B0%E5%A2%83"></a>環境</h2>
<div class="code-frame" data-lang="bash" data-sourcepos="20:1-39:3"><div class="highlight"><pre><code>$ cat /etc/os-release
NAME="Rocky Linux"
VERSION="9.3 (Blue Onyx)"
ID="rocky"
ID_LIKE="rhel centos fedora"
VERSION_ID="9.3"
PLATFORM_ID="platform:el9"
PRETTY_NAME="Rocky Linux 9.3 (Blue Onyx)"
ANSI_COLOR="0;32"
LOGO="fedora-logo-icon"
CPE_NAME="cpe:/o:rocky:rocky:9::baseos"
HOME_URL="https://rockylinux.org/"
BUG_REPORT_URL="https://bugs.rockylinux.org/"
SUPPORT_END="2032-05-31"
ROCKY_SUPPORT_PRODUCT="Rocky-Linux-9"
ROCKY_SUPPORT_PRODUCT_VERSION="9.3"
REDHAT_SUPPORT_PRODUCT="Rocky Linux"
REDHAT_SUPPORT_PRODUCT_VERSION="9.3"
</code></pre></div></div>
IAMユーザーの権限などには問題がない状態。
<h2 data-sourcepos="43:1-43:12">
<a href="#%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>解決策</h2>
<div class="code-frame" data-lang="bash" data-sourcepos="45:1-49:3"><div class="highlight"><pre><code>sudo yum update
sudo systemctl start chronyd
sudo reboot
</code></pre></div></div>
Chronydが有効化されておらず、ローカルタイムゾーンが8時間以上ずれていた。
Chronydによって時間を同期させることでSSMのエラーを解決することができました。
<h2 data-sourcepos="55:1-55:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
【RHEL8/CentOS8】NTPは死んだ。時代はChrony。
<iframe id="qiita-embed-content__0d1a7c0dad641b2a0d76ade626a550a2" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__0d1a7c0dad641b2a0d76ade626a550a2" data-content="https%3A%2F%2Fqiita.com%2Fthzking%2Fitems%2Fc2bcf7d60963b4dab7b6" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

chrony の概要および設定
<iframe id="qiita-embed-content__d65e918344181433fbabe4e7c3428878" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__d65e918344181433fbabe4e7c3428878" data-content="https%3A%2F%2Faccess.redhat.com%2Fdocumentation%2Fja-jp%2Fred_hat_enterprise_linux%2F7%2Fhtml%2Fsystem_administrators_guide%2Fsect-understanding_chrony_and-its_configuration%23doc-wrapper" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

サーバーのタイムゾーン設定が原因でSSMがエラーになっていた

## 概要

mp4ファイルをアップロードしたときに、2段階でWAFのルールセットによりブロックされた。

対応策についてまとめる。

## 1つ目`SizeRestrictions_BODY`

これはWAFのコアルールセットが8KBを超えるボディを持つリクエストをはじくということ。

動画ファイルは5Mくらいあったため、`SizeRestrictions_BODY`に引っかかっていた。

デフォルトアクションがBlockのため一時的に`SizeRestrictions_BODY`のみCountにオーバーライドして動作を検証した。

## 2つ目`CrossSiteScripting_BODY`

アップロードしようとしたmp4のファイルが引っかかってしまった。

https://tech.isid.co.jp/entry/8_things_i_wanted_to_know_about_aws_waf

こちらの記事を参考にすると、ファイルアップロード処理では`CrossSiteScripting_BODY` 以外にも `SQLi_BODY`、`WindowsShellCommands_BODY`、`GenericLFI_BODY`、`SizeRestrictions_BODY` ルールによってブロックされる可能性があるらしい。

こちらもCountにオーバーライドすると一応動作し、ファイルをアプリからS3へ送信できることが確認できた。

## 対応

https://tech.isid.co.jp/entry/8_things_i_wanted_to_know_about_aws_waf

https://mazyu36.hatenablog.com/entry/2023/02/21/191736

参考にした上記記事で紹介されている、特定のURIパスではないときのみブロックを発動させる方法をとる。

参考：https://mazyu36.hatenablog.com/entry/2023/02/21/092008

WAFの例外設定である、「スコープダウンステートメント」を行う

WAFのルールセットの編集画面で以下の画像のように設定することで/uploadというパスからのファイルアップロードに対してルールを除外できる

![rapture_20231225101910.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/e1868e49-8fe0-4b6e-ebd4-7b21990f09f2.jpeg)

## 参考

https://sadayoshi-tada.hatenablog.com/entry/2022/10/05/235119

https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/waf-rule-scope-down-statements.html

https://mazyu36.hatenablog.com/entry/2023/02/21/092008

https://mazyu36.hatenablog.com/entry/2023/02/21/191736

https://repost.aws/ja/knowledge-center/waf-upload-blocked-files

https://tech.isid.co.jp/entry/8_things_i_wanted_to_know_about_aws_waf

https://blog.denet.co.jp/aws-waflog/


<h2 data-sourcepos="1:1-1:9">
<a href="#%E6%A6%82%E8%A6%81"></a>概要</h2>
mp4ファイルをアップロードしたときに、2段階でWAFのルールセットによりブロックされた。
対応策についてまとめる。
<h2 data-sourcepos="7:1-7:33">
<a href="#1%E3%81%A4%E7%9B%AEsizerestrictions_body"></a>1つ目<code>SizeRestrictions_BODY</code>
</h2>
これはWAFのコアルールセットが8KBを超えるボディを持つリクエストをはじくということ。
動画ファイルは5Mくらいあったため、<code>SizeRestrictions_BODY</code>に引っかかっていた。
デフォルトアクションがBlockのため一時的に<code>SizeRestrictions_BODY</code>のみCountにオーバーライドして動作を検証した。
<h2 data-sourcepos="15:1-15:35">
<a href="#2%E3%81%A4%E7%9B%AEcrosssitescripting_body"></a>2つ目<code>CrossSiteScripting_BODY</code>
</h2>
アップロードしようとしたmp4のファイルが引っかかってしまった。
<iframe id="qiita-embed-content__d56d03dd651e3374c3e4f15592a1b017" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__d56d03dd651e3374c3e4f15592a1b017" data-content="https%3A%2F%2Ftech.isid.co.jp%2Fentry%2F8_things_i_wanted_to_know_about_aws_waf" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

こちらの記事を参考にすると、ファイルアップロード処理では<code>CrossSiteScripting_BODY</code> 以外にも <code>SQLi_BODY</code>、<code>WindowsShellCommands_BODY</code>、<code>GenericLFI_BODY</code>、<code>SizeRestrictions_BODY</code> ルールによってブロックされる可能性があるらしい。
こちらもCountにオーバーライドすると一応動作し、ファイルをアプリからS3へ送信できることが確認できた。
<h2 data-sourcepos="25:1-25:9">
<a href="#%E5%AF%BE%E5%BF%9C"></a>対応</h2>
<iframe id="qiita-embed-content__b7032414e518bc02916c4a8eb25ef1f5" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__b7032414e518bc02916c4a8eb25ef1f5" data-content="https%3A%2F%2Ftech.isid.co.jp%2Fentry%2F8_things_i_wanted_to_know_about_aws_waf" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__0f1ced7adcd3922db55982e363b792fd" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__0f1ced7adcd3922db55982e363b792fd" data-content="https%3A%2F%2Fmazyu36.hatenablog.com%2Fentry%2F2023%2F02%2F21%2F191736" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

参考にした上記記事で紹介されている、特定のURIパスではないときのみブロックを発動させる方法をとる。
参考：<a href="https://mazyu36.hatenablog.com/entry/2023/02/21/092008" class="autolink" rel="nofollow noopener" target="_blank">https://mazyu36.hatenablog.com/entry/2023/02/21/092008</a>
WAFの例外設定である、「スコープダウンステートメント」を行う
WAFのルールセットの編集画面で以下の画像のように設定することで/uploadというパスからのファイルアップロードに対してルールを除外できる
<a href="https://camo.qiitausercontent.com/1b37a9423f407223cca3c78ea807222a34e39c45/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3738313233322f65313836386534392d386665302d346236652d656264342d3762323139393066303966322e6a706567" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fe1868e49-8fe0-4b6e-ebd4-7b21990f09f2.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=cbe4b7caaef6a67b64bb9d4bba7496fe" alt="rapture_20231225101910.jpg" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/e1868e49-8fe0-4b6e-ebd4-7b21990f09f2.jpeg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fe1868e49-8fe0-4b6e-ebd4-7b21990f09f2.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=5d61bc9d4add1a61e4aa1760cb88463e 1x" loading="lazy"></a>
<h2 data-sourcepos="41:1-41:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<iframe id="qiita-embed-content__2cd0edbedf27825e4c8a28302493fb4b" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__2cd0edbedf27825e4c8a28302493fb4b" data-content="https%3A%2F%2Fsadayoshi-tada.hatenablog.com%2Fentry%2F2022%2F10%2F05%2F235119" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__97b558f7d99e1ecba25d3290231d8531" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__97b558f7d99e1ecba25d3290231d8531" data-content="https%3A%2F%2Fdocs.aws.amazon.com%2Fja_jp%2Fwaf%2Flatest%2Fdeveloperguide%2Fwaf-rule-scope-down-statements.html" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__3dce6dd5a4b2977650287ff5c5f2615a" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__3dce6dd5a4b2977650287ff5c5f2615a" data-content="https%3A%2F%2Fmazyu36.hatenablog.com%2Fentry%2F2023%2F02%2F21%2F092008" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__a8bdbf57ec8b862fa93b6a4c1cb91fc9" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__a8bdbf57ec8b862fa93b6a4c1cb91fc9" data-content="https%3A%2F%2Fmazyu36.hatenablog.com%2Fentry%2F2023%2F02%2F21%2F191736" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__ca8aada2d299f4f5748e661561cc2b6a" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__ca8aada2d299f4f5748e661561cc2b6a" data-content="https%3A%2F%2Frepost.aws%2Fja%2Fknowledge-center%2Fwaf-upload-blocked-files" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__ea172026925a8462a1556012a7f6f5b6" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__ea172026925a8462a1556012a7f6f5b6" data-content="https%3A%2F%2Ftech.isid.co.jp%2Fentry%2F8_things_i_wanted_to_know_about_aws_waf" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__46721e086f44cb48723191946e4624eb" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__46721e086f44cb48723191946e4624eb" data-content="https%3A%2F%2Fblog.denet.co.jp%2Faws-waflog%2F" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

AWS WAF 動画ファイルアップロード処理で誤検出されてしまう問題への対応

## はじめに

AWS Certified Developer - Associate(DVA-C02)に2023年12月15日に合格しました。
ここでは私の学習方法や勉強時間などをまとめておきます。

## 筆者に関連する情報

AWS DVAの学習時点でAWS認定はCLF,SAA,SOA認定をすでに取得しています。
業務としてはアプリケーションエンジニアとしてLaravelをメインとして担当しています。
最近AWS認定の取得を認めていただいたのかAWS構築の業務にも携わらせてもらうことができています。一番直近ではAWS CodeシリーズやECR、GitLab CIを組み合わせたEC2上で動作するアプリケーションのCICDの構築を担当しました。
DVA認定の試験範囲内にガッツリと入っているため、業務と試験対策がお互いを補完しあうような状況で非常に幸運でした。
得点に関しても725/1000と合格の特典率72％に対してギリギリのレベルですのでこれもかなりラッキーです。

## 学習方法
CloudTechの問題集の周回と解説の読み込み、解説に張られた技術記事で対策しました。
最終的に4周しました。
1周目はほとんどわからない前提で問題の傾向に慣れることと、正解の選択肢の解説・解説に付録している図の確認を意識して問題を解きました。
2週目からはしっかりと正答率を意識し、すべての問題の不正解の選択肢の解説も読むようにしています。ただし、２回目はリンクが張られた記事の確認はスキップしています。（面倒だったため）
CloudTechの問題集は10問ごとにセクションが分かれていて、正答が8問以上であった場合は色がつく仕様になっています。
3, 4周目は色がついていない（正答率が8割以下だったセクション）のみに絞って対策しました。後述しますが、これはあまりやるべきではありませんでした。
4周目が終わった時点でもいくつかのセクションに色がついていない状態でしたが、諦めの気持ちで受験し、運よくギリで合格しました。

## 学習時間・期間
合計で約30時間です。11月の頭から学習を開始しました。
11月中旬に趣味のキックボクシングの試合があり、約2週間は減量と練習に専念していたので実質1ヵ月程度の学習期間を取りました。

## 反省点
ギリギリの合格となってしまったことでいくつか反省点があります。
1つは問題集を解き始める前に基礎知識を書籍などでインプットしなかったことです。
AWSの業務を行うようになったのは本当に最近の話なので知識は今まで取得した認定試験（CLF,SAA,SOA）のものとわずかばかりの業務で触った知識のみです。問題集の1,2週目は問題も読むのもつらく、心理的にもストレスでした。体系的にまとまった書籍が出版されているのでそれを一度読んでから問題集に着手するべきだったと思っています。

2つ目は3, 4周目の問題を正答率が8割以下のセクションに絞って回答したことになります。
試験中、問題集ではやったはずなのに選択肢を絞り込めない問題がいくつかあり、それが3,4週目に飛ばした問題に近い内容だったと感じています。このやり方は、短期集中的な試験対策には向いていると思いますが、私のように1ヵ月半とまとまった対策期間をとった場合、穴が多すぎる対策方法だったと思っています。

## 次の目標

ギリギリとはいえ、合格しAssociate3冠を達成しました。
AWS認定の合格記事でいくつかDOP認定がDVA認定と試験範囲が近くて学習しやすいと目にしたのと、今担当している業務がCICD関連であり親和性が高いため、次はDOP認定を取得するために勉強します。

DOPの対策にもDVAの書籍がおすすめされていたので、復習もかねてまずはそちらをやろうと思います。
目標は年始の業務開始までに取得すること。頑張ります。


<h2 data-sourcepos="1:1-1:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
AWS Certified Developer - Associate(DVA-C02)に2023年12月15日に合格しました。 
ここでは私の学習方法や勉強時間などをまとめておきます。
<h2 data-sourcepos="6:1-6:30">
<a href="#%E7%AD%86%E8%80%85%E3%81%AB%E9%96%A2%E9%80%A3%E3%81%99%E3%82%8B%E6%83%85%E5%A0%B1"></a>筆者に関連する情報</h2>
AWS DVAの学習時点でAWS認定はCLF,SAA,SOA認定をすでに取得しています。 
業務としてはアプリケーションエンジニアとしてLaravelをメインとして担当しています。 
最近AWS認定の取得を認めていただいたのかAWS構築の業務にも携わらせてもらうことができています。一番直近ではAWS CodeシリーズやECR、GitLab CIを組み合わせたEC2上で動作するアプリケーションのCICDの構築を担当しました。 
DVA認定の試験範囲内にガッツリと入っているため、業務と試験対策がお互いを補完しあうような状況で非常に幸運でした。 
得点に関しても725/1000と合格の特典率72％に対してギリギリのレベルですのでこれもかなりラッキーです。
<h2 data-sourcepos="14:1-14:15">
<a href="#%E5%AD%A6%E7%BF%92%E6%96%B9%E6%B3%95"></a>学習方法</h2>
CloudTechの問題集の周回と解説の読み込み、解説に張られた技術記事で対策しました。 
最終的に4周しました。 
1周目はほとんどわからない前提で問題の傾向に慣れることと、正解の選択肢の解説・解説に付録している図の確認を意識して問題を解きました。 
2週目からはしっかりと正答率を意識し、すべての問題の不正解の選択肢の解説も読むようにしています。ただし、２回目はリンクが張られた記事の確認はスキップしています。（面倒だったため） 
CloudTechの問題集は10問ごとにセクションが分かれていて、正答が8問以上であった場合は色がつく仕様になっています。 
3, 4周目は色がついていない（正答率が8割以下だったセクション）のみに絞って対策しました。後述しますが、これはあまりやるべきではありませんでした。 
4周目が終わった時点でもいくつかのセクションに色がついていない状態でしたが、諦めの気持ちで受験し、運よくギリで合格しました。
<h2 data-sourcepos="23:1-23:24">
<a href="#%E5%AD%A6%E7%BF%92%E6%99%82%E9%96%93%E6%9C%9F%E9%96%93"></a>学習時間・期間</h2>
合計で約30時間です。11月の頭から学習を開始しました。 
11月中旬に趣味のキックボクシングの試合があり、約2週間は減量と練習に専念していたので実質1ヵ月程度の学習期間を取りました。
<h2 data-sourcepos="27:1-27:12">
<a href="#%E5%8F%8D%E7%9C%81%E7%82%B9"></a>反省点</h2>
ギリギリの合格となってしまったことでいくつか反省点があります。 
1つは問題集を解き始める前に基礎知識を書籍などでインプットしなかったことです。 
AWSの業務を行うようになったのは本当に最近の話なので知識は今まで取得した認定試験（CLF,SAA,SOA）のものとわずかばかりの業務で触った知識のみです。問題集の1,2週目は問題も読むのもつらく、心理的にもストレスでした。体系的にまとまった書籍が出版されているのでそれを一度読んでから問題集に着手するべきだったと思っています。
2つ目は3, 4周目の問題を正答率が8割以下のセクションに絞って回答したことになります。 
試験中、問題集ではやったはずなのに選択肢を絞り込めない問題がいくつかあり、それが3,4週目に飛ばした問題に近い内容だったと感じています。このやり方は、短期集中的な試験対策には向いていると思いますが、私のように1ヵ月半とまとまった対策期間をとった場合、穴が多すぎる対策方法だったと思っています。
<h2 data-sourcepos="35:1-35:15">
<a href="#%E6%AC%A1%E3%81%AE%E7%9B%AE%E6%A8%99"></a>次の目標</h2>
ギリギリとはいえ、合格しAssociate3冠を達成しました。 
AWS認定の合格記事でいくつかDOP認定がDVA認定と試験範囲が近くて学習しやすいと目にしたのと、今担当している業務がCICD関連であり親和性が高いため、次はDOP認定を取得するために勉強します。
DOPの対策にもDVAの書籍がおすすめされていたので、復習もかねてまずはそちらをやろうと思います。 
目標は年始の業務開始までに取得すること。頑張ります。

AWS DVA(DVA-C02)合格体験記

## GitLab Runnerとは
GitLabで定義されたCI/CDジョブを実行するもの。
インフラ上、Dockerコンテナ内、またはKubernetesクラスタへデプロイしインストールする。
Goで書かれているOSS。
GitLabインスタンスへ登録することで実行される。

## Runnerの種類
### 共有Runner
Gitlabインスタンス内のすべてのプロジェクトで使用できる。
デフォルトでは有効になっている。セルフホストのインスタンスであれば新しいプロジェクトでも有効となる。
### グループRunner
グループ内のプロジェクトで有効化できる。
FIFOキューを使用してJobを処理する。
### プロジェクトRunner
特定のプロジェクトでRunnnerを利用する場合に使用する。
プロジェクトごとの設定から有効化する必要がある。

### 参考
[https://archives.docs.gitlab.com/15.11/ee/ci/runners/runners_scope.html](https://archives.docs.gitlab.com/15.11/ee/ci/runners/runners_scope.html)

今回はすべてのプロジェクトで有効化したいため、共有Runnerを設定する。
## 環境
Runner用EC2インスタンス：Linux /amazon linux 2023/ t3.small

## 大まかな手順
1. Runners用インスタンスにDockerおよびGitlab Runnerをインストールする
2. セルフホストのGitlabに管理者権限でログイン後Runner設定ページを開く
3. GitlabのUIに表示されるトークンをGitlab Runnerへ登録

[https://docs.gitlab.com/runner/install/docker.html](https://docs.gitlab.com/runner/install/docker.html)

## 1. Runners用インスタンスにDockerおよびGitlab Runnerをインストールする
- **Dockerのインストール**
`sudo dnf install -y docker`

- Dockerサービスの自動起動有効化

`sudo systemctl enable --now docker`
 
- **GitLab Runnerのインストール**

[https://gitlab-docs.creationline.com/runner/install/docker.html#option-1-use-local-system-volume-mounts-to-start-the-runner-container](https://gitlab-docs.creationline.com/runner/install/docker.html#option-1-use-local-system-volume-mounts-to-start-the-runner-container)

以下を実行する。

```bash
sudo docker run -d --name gitlab-runner --restart always \
 -v /srv/gitlab-runner/config:/etc/gitlab-runner \
 -v /var/run/docker.sock:/var/run/docker.sock \
 gitlab/gitlab-runner:latest
``` 

## 2. セルフホストGitLabでRunner用設定ページを開く

1. 管理者権限のアカウントでログインする。
2. {GitLabServerIP}/admin/runners にアクセスする。
3. トークンを取得し、控える

## 3. GitlabのUIに表示されるトークンをGitlab Runnerへ登録

[https://gitlab-docs.creationline.com/runner/register/index.html#docker](https://gitlab-docs.creationline.com/runner/register/index.html#docker)

1. ローカルシステムのボリュームマウントに基づいてresisterコマンドを実行
`sudo docker run --rm -it -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register`
2. GitlabインスタンスのURLを入力する
`http://xxx.xx.x.xx/`
3. GitlabのUIから取得したトークンを入力
4. ランナーの説明を入力（Gitlabから変更可能）
5. タグを入力（スキップ）
6. メンテナンスノートを入力（スキップ）
7. ランナーのExecuterにDockerを入力
8. デフォルトのdockerイメージを指定

<details>
 <summary>ログ</summary>
 
 ```
 [ec2-user@ip-xxx-xx-x-xxx ~]$ sudo docker run --rm -it -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register
 Runtime platform arch=amd64 os=linux pid=7 revision=3046fee8 version=16.6.0
 Running in system-mode.
 
 Enter the GitLab instance URL (for example, https://gitlab.com/):
 http://172.31.4.15/
 Enter the registration token:
 -ED9omstpktCJV98bAfK
 Enter a description for the runner:
 [d5ce86fb472d]: gitlab runner for fsworks-prd-gitlab_server_seisanweb
 Enter tags for the runner (comma-separated):
 
 Enter optional maintenance note for the runner:
 
 WARNING: Support for registration tokens and runner parameters in the 'register' command has been deprecated in GitLab Runner 15.6 and will be replaced with support for authentication tokens. For more information, see https://docs.gitlab.com/ee/ci/runners/new_creation_workflow
 Registering runner... succeeded runner=-ED9omst
 Enter an executor: ssh, docker-autoscaler, docker+machine, instance, kubernetes, custom, docker-windows, parallels, docker, shell, virtualbox:
 docker
 Enter the default Docker image (for example, ruby:2.7):
 
 Enter the default Docker image (for example, ruby:2.7):
 php:8.2-cli
 Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!
 
 Configuration (with the authentication token) was saved in "/etc/gitlab-runner/config.toml"
 ```

</details>

 

## 構築が完了できているか確認

**GitLab管理者エリア（http://{GitLabServerIP}/admin/runners）で確認**

![rapture_20231121152142.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/ba7fd9ca-94d6-7db6-bbc6-124fcc99923f.jpeg)

**プロジェクトで利用できるか確認**

新規ブランチを作成し`.gitlab-ci.yml`をプロジェクトルートに作成

mainへのMRを作成し左サイドバーの「CICD」から実行されていることを確認。

![rapture_20231122080106.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/9d429b83-2f51-9b5e-70c5-4974b215d9b3.jpeg)

<h2 data-sourcepos="1:1-1:22">
<a href="#gitlab-runner%E3%81%A8%E3%81%AF"></a>GitLab Runnerとは</h2>
GitLabで定義されたCI/CDジョブを実行するもの。 
インフラ上、Dockerコンテナ内、またはKubernetesクラスタへデプロイしインストールする。 
Goで書かれているOSS。 
GitLabインスタンスへ登録することで実行される。
<h2 data-sourcepos="7:1-7:18">
<a href="#runner%E3%81%AE%E7%A8%AE%E9%A1%9E"></a>Runnerの種類</h2>
<h3 data-sourcepos="8:1-8:16">
<a href="#%E5%85%B1%E6%9C%89runner"></a>共有Runner</h3>
Gitlabインスタンス内のすべてのプロジェクトで使用できる。 
デフォルトでは有効になっている。セルフホストのインスタンスであれば新しいプロジェクトでも有効となる。
<h3 data-sourcepos="11:1-11:22">
<a href="#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97runner"></a>グループRunner</h3>
グループ内のプロジェクトで有効化できる。 
FIFOキューを使用してJobを処理する。
<h3 data-sourcepos="14:1-14:28">
<a href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88runner"></a>プロジェクトRunner</h3>
特定のプロジェクトでRunnnerを利用する場合に使用する。 
プロジェクトごとの設定から有効化する必要がある。
<h3 data-sourcepos="18:1-18:10">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h3>
<a href="https://archives.docs.gitlab.com/15.11/ee/ci/runners/runners_scope.html" rel="nofollow noopener" target="_blank">https://archives.docs.gitlab.com/15.11/ee/ci/runners/runners_scope.html</a>
今回はすべてのプロジェクトで有効化したいため、共有Runnerを設定する。
<h2 data-sourcepos="22:1-22:9">
<a href="#%E7%92%B0%E5%A2%83"></a>環境</h2>
Runner用EC2インスタンス：Linux /amazon linux 2023/ t3.small
<h2 data-sourcepos="25:1-25:21">
<a href="#%E5%A4%A7%E3%81%BE%E3%81%8B%E3%81%AA%E6%89%8B%E9%A0%86"></a>大まかな手順</h2>
<ol data-sourcepos="26:1-29:0">
<li data-sourcepos="26:1-26:89">Runners用インスタンスにDockerおよびGitlab Runnerをインストールする</li>
<li data-sourcepos="27:1-27:96">セルフホストのGitlabに管理者権限でログイン後Runner設定ページを開く</li>
<li data-sourcepos="28:1-29:0">GitlabのUIに表示されるトークンをGitlab Runnerへ登録</li>
</ol>
<a href="https://docs.gitlab.com/runner/install/docker.html" rel="nofollow noopener" target="_blank">https://docs.gitlab.com/runner/install/docker.html</a>
<h2 data-sourcepos="32:1-32:92">
<a href="#1-runners%E7%94%A8%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%ABdocker%E3%81%8A%E3%82%88%E3%81%B3gitlab-runner%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B"></a>1. Runners用インスタンスにDockerおよびGitlab Runnerをインストールする</h2>
<ul data-sourcepos="33:1-37:0">
<li data-sourcepos="33:1-35:0">
Dockerのインストール 
<code>sudo dnf install -y docker</code>
</li>
<li data-sourcepos="36:1-37:0">
Dockerサービスの自動起動有効化
</li>
</ul>
<code>sudo systemctl enable --now docker</code>
<ul data-sourcepos="40:1-41:0">
<li data-sourcepos="40:1-41:0">GitLab Runnerのインストール</li>
</ul>
<a href="https://gitlab-docs.creationline.com/runner/install/docker.html#option-1-use-local-system-volume-mounts-to-start-the-runner-container" rel="nofollow noopener" target="_blank">https://gitlab-docs.creationline.com/runner/install/docker.html#option-1-use-local-system-volume-mounts-to-start-the-runner-container</a>
以下を実行する。
<div class="code-frame" data-lang="bash" data-sourcepos="46:1-51:4"><div class="highlight"><pre><code>sudo docker run -d --name gitlab-runner --restart always \
 -v /srv/gitlab-runner/config:/etc/gitlab-runner \
 -v /var/run/docker.sock:/var/run/docker.sock \
 gitlab/gitlab-runner:latest
</code></pre></div></div>
<h2 data-sourcepos="53:1-53:66">
<a href="#2-%E3%82%BB%E3%83%AB%E3%83%95%E3%83%9B%E3%82%B9%E3%83%88gitlab%E3%81%A7runner%E7%94%A8%E8%A8%AD%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E9%96%8B%E3%81%8F"></a>2. セルフホストGitLabでRunner用設定ページを開く</h2>
<ol data-sourcepos="55:1-58:0">
<li data-sourcepos="55:1-55:60">管理者権限のアカウントでログインする。</li>
<li data-sourcepos="56:1-56:58">{GitLabServerIP}/admin/runners にアクセスする。</li>
<li data-sourcepos="57:1-58:0">トークンを取得し、控える</li>
</ol>
<h2 data-sourcepos="59:1-59:72">
<a href="#3-gitlab%E3%81%AEui%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92gitlab-runner%E3%81%B8%E7%99%BB%E9%8C%B2"></a>3. GitlabのUIに表示されるトークンをGitlab Runnerへ登録</h2>
<a href="https://gitlab-docs.creationline.com/runner/register/index.html#docker" rel="nofollow noopener" target="_blank">https://gitlab-docs.creationline.com/runner/register/index.html#docker</a>
<ol data-sourcepos="63:1-73:0">
<li data-sourcepos="63:1-64:104">ローカルシステムのボリュームマウントに基づいてresisterコマンドを実行 
<code>sudo docker run --rm -it -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register</code>
</li>
<li data-sourcepos="65:1-66:21">GitlabインスタンスのURLを入力する 
<code>http://xxx.xx.x.xx/</code>
</li>
<li data-sourcepos="67:1-67:53">GitlabのUIから取得したトークンを入力</li>
<li data-sourcepos="68:1-68:63">ランナーの説明を入力（Gitlabから変更可能）</li>
<li data-sourcepos="69:1-69:36">タグを入力（スキップ）</li>
<li data-sourcepos="70:1-70:57">メンテナンスノートを入力（スキップ）</li>
<li data-sourcepos="71:1-71:44">ランナーのExecuterにDockerを入力</li>
<li data-sourcepos="72:1-73:0">デフォルトのdockerイメージを指定</li>
</ol>
<details>
 <summary>ログ</summary>
<div class="code-frame" data-lang="text" data-sourcepos="77:5-104:0"><div class="highlight"><pre><code>```
[ec2-user@ip-xxx-xx-x-xxx ~]$ sudo docker run --rm -it -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register
Runtime platform arch=amd64 os=linux pid=7 revision=3046fee8 version=16.6.0
Running in system-mode.

Enter the GitLab instance URL (for example, https://gitlab.com/):
http://172.31.4.15/
Enter the registration token:
-ED9omstpktCJV98bAfK
Enter a description for the runner:
[d5ce86fb472d]: gitlab runner for fsworks-prd-gitlab_server_seisanweb
Enter tags for the runner (comma-separated):

Enter optional maintenance note for the runner:

WARNING: Support for registration tokens and runner parameters in the 'register' command has been deprecated in GitLab Runner 15.6 and will be replaced with support for authentication tokens. For more information, see https://docs.gitlab.com/ee/ci/runners/new_creation_workflow
Registering runner... succeeded runner=-ED9omst
Enter an executor: ssh, docker-autoscaler, docker+machine, instance, kubernetes, custom, docker-windows, parallels, docker, shell, virtualbox:
docker
Enter the default Docker image (for example, ruby:2.7):

Enter the default Docker image (for example, ruby:2.7):
php:8.2-cli
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

Configuration (with the authentication token) was saved in "/etc/gitlab-runner/config.toml"
```
</code></pre></div></div>
</details>
<h2 data-sourcepos="109:1-109:42">
<a href="#%E6%A7%8B%E7%AF%89%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E7%A2%BA%E8%AA%8D"></a>構築が完了できているか確認</h2>
GitLab管理者エリア（http://{GitLabServerIP}/admin/runners）で確認
<a href="https://camo.qiitausercontent.com/f51b937a8fedb95c1f7679cb1351a400db676dc2/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3738313233322f62613766643963612d393464362d376462362d626263362d3132346663633939393233662e6a706567" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fba7fd9ca-94d6-7db6-bbc6-124fcc99923f.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=59ec23d3d1bc1c146dfe3bd7ea77abe0" alt="rapture_20231121152142.jpg" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/ba7fd9ca-94d6-7db6-bbc6-124fcc99923f.jpeg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fba7fd9ca-94d6-7db6-bbc6-124fcc99923f.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a7e4680957550b010b12b7012c6e303a 1x" loading="lazy"></a>
プロジェクトで利用できるか確認
新規ブランチを作成し<code>.gitlab-ci.yml</code>をプロジェクトルートに作成
mainへのMRを作成し左サイドバーの「CICD」から実行されていることを確認。
<a href="https://camo.qiitausercontent.com/c3ed9536221bf2268bef13c35fd4dde7f442073a/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3738313233322f39643432396238332d326635312d396235652d373063352d3439373462323135643962332e6a706567" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2F9d429b83-2f51-9b5e-70c5-4974b215d9b3.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=911e063affa882ed1263bddf4bed07f3" alt="rapture_20231122080106.jpg" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/9d429b83-2f51-9b5e-70c5-4974b215d9b3.jpeg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2F9d429b83-2f51-9b5e-70c5-4974b215d9b3.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=0a4199d6bc0dde23836fa541fe99ce2d 1x" loading="lazy"></a>

Gitlab Runnerのインストールと初期設定

## 参考

## コレクション

- `Illuminate\Support\Collection`クラス
 - 配列データを操作するためのラッパー
 
 ```php
 $collection = collect(['taylor', 'abigail', null])->map(function (string $name) {
 return strtoupper($name);
 })->reject(function (string $name) {
 return empty($name);
 });
 ```
 
 - 上記の例の場合、元のコレクションは不変ですべてのCollctionメソッドは新しいCollectionインスタンスを返す。
- コレクション生成
 - 指定された配列をもとに`Illuminate\Support\Collection`インスタンスを返す。
 - Eloquentのクエリ結果は常にCollectionインスタンス
- コレクションの拡張
 - コレクションはマクロ化可能で実行時にCollectionクラスへメソッドを追加可能
 - **`macro`**メソッド
 - 呼び出し時に実行するクロージャを引数にとる。
 
 ```php
 use Illuminate\Support\Collection;
 use Illuminate\Support\Str;
 
 // macro化
 Collection::macro('toUpper', function () {
 	 // クロージャ
 return $this->map(function (string $value) {
 return Str::upper($value);
 });
 });
 
 $collection = collect(['first', 'second']);
 
 $upper = $collection->toUpper();
 
 // ['FIRST', 'SECOND']
 ```
 
 - 通常、コレクションマクロは[サービスプロバイダ](https://readouble.com/laravel/10.x/ja/providers.html)の`boot`メソッドで宣言する必要がある
 - この書き方に出会ったことがない…
- 利用可能なメソッド
 - かなり多い。
 - 随時確認。
- メソッド一覧（の中で気になったもの）
 - `chunk()`
 - 指定したサイズで小さなコレクションに分割する
 
 ```php
 $collection = collect([1, 2, 3, 4, 5, 6, 7]);
 $chunks = $collection->chunk(4);
 $chunks->all(); // [[1, 2, 3, 4], [5, 6, 7]]
 ```
 
 - グリッドシステムを操作する時にViewで特に役に立つ
 
 ```php
 @foreach ($products->chunk(3) as $chunk)
 <div class="row">
 @foreach ($chunk as $product)
 <div class="col-xs-4">{{ $product->name }}</div>
 @endforeach
 </div>
 @endforeach
 ```
 
 - `contains()`
 - コレクションに指定したアイテムが含まれるか判定する
 - クロージャを渡す
 
 ```php
 $collection = collect([1, 2, 3, 4, 5]);
 // 5よりも大きい値を含むか？
 $collection->contains(function (int $value, int $key) {
 return $value > 5;
 });
 // false
 ```
 
 - `contain()`は緩い比較。厳密に比較するなら`containStrict()`
 - `dd()`, `dump()`
 - ddは実行を停止し、dumpは止めない。
 - `duplicates()`
 - 重複値を返す
 - `lazy()`
 - アイテムの配列から新しいレイジーコレクションインスタンスを返す
 - 巨大なデータセットをメモリを抑えて利用できる
 - `only()`
 - コレクションの指定したアイテムだけを返す
 
 ```php
 $collection = collect([
 'product_id' => 1,
 'name' => 'Desk',
 'price' => 100,
 'discount' => false
 ]);
 
 $filtered = $collection->only(['product_id', 'name']);
 
 $filtered->all();
 
 // ['product_id' => 1, 'name' => 'Desk']
 ```
 
 - `plunk()`
 - 指定したキーの全コレクション値を取得する
 
 ```php
 $collection = collect([
 ['product_id' => 'prod-100', 'name' => 'Desk'],
 ['product_id' => 'prod-200', 'name' => 'Chair'],
 ]);
 
 $plucked = $collection->pluck('name');
 
 $plucked->all();
 
 // ['Desk', 'Chair']
 ```
 
 - キー項目の指定も可
 
 ```php
 $plucked = $collection->pluck('name', 'product_id');
 $plucked->all();
 // ['prod-100' => 'Desk', 'prod-200' => 'Chair']
 ```
 
 - `push()`
 - コレクションの最後にアイテムを追加
 - `toArray()`
 - コレクションをPHPの「配列」に変換
 - コレクションの裏の素の配列をそのまま取得したい場合は、代わりに`[all](https://readouble.com/laravel/10.x/ja/collections.html#method-all)`メソッドを使用する
 - `unique()`
 - 重複を除いた全アイテムを返す
 - `values()`
 - キーをリセットして連続した整数にした新しいコレクションを返す
- レイジーコレクション
 - 巨大なデータセットをメモリ使用を抑えて利用する目的
 - PHPジェネレータを利用する
 - アプリケーションで数ギガバイトのログを処理する必要があり、ログを解析するためにLaravelのコレクションメソッドを活用するとしましょう。
 - ファイル全体をメモリへ一度で読み込む代わりに、レイジーコレクションなら毎回ファイルの小さな部分だけをメモリに保持するだけで済みます。
 - 通常のコレクションだと一度にすべてをメモリにロードする必要が生まれる
 - レイジーコレクションを活用すると大幅にメモリ使用量

<h2 data-sourcepos="1:1-1:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<h2 data-sourcepos="3:1-3:21">
<a href="#%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3"></a>コレクション</h2>
<ul data-sourcepos="5:1-149:81">
<li data-sourcepos="5:1-16:151">
<code>Illuminate\Support\Collection</code>クラス
<ul data-sourcepos="6:5-7:4">
<li data-sourcepos="6:5-7:4">配列データを操作するためのラッパー</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="8:5-14:7"><div class="highlight"><pre><code>$collection = collect(['taylor', 'abigail', null])-&gt;map(function (string $name) {
 return strtoupper($name);
})-&gt;reject(function (string $name) {
 return empty($name);
});
</code></pre></div></div>
<ul data-sourcepos="16:5-16:151">
<li data-sourcepos="16:5-16:151">上記の例の場合、元のコレクションは不変ですべてのCollctionメソッドは新しいCollectionインスタンスを返す。</li>
</ul>
</li>
<li data-sourcepos="17:1-19:69">
コレクション生成
<ul data-sourcepos="18:5-19:69">
<li data-sourcepos="18:5-18:100">指定された配列をもとに<code>Illuminate\Support\Collection</code>インスタンスを返す。</li>
<li data-sourcepos="19:5-19:69">Eloquentのクエリ結果は常にCollectionインスタンス</li>
</ul>
</li>
<li data-sourcepos="20:1-45:54">
コレクションの拡張
<ul data-sourcepos="21:5-45:54">
<li data-sourcepos="21:5-21:109">
コレクションはマクロ化可能で実行時にCollectionクラスへメソッドを追加可能
</li>
<li data-sourcepos="22:5-43:8">
**<code>macro</code>**メソッド
<ul data-sourcepos="23:9-24:8">
<li data-sourcepos="23:9-24:8">呼び出し時に実行するクロージャを引数にとる。</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="25:9-42:11"><div class="highlight"><pre><code>use Illuminate\Support\Collection;
use Illuminate\Support\Str;

// macro化
Collection::macro('toUpper', function () {
	 // クロージャ
 return $this-&gt;map(function (string $value) {
 return Str::upper($value);
 });
});

$collection = collect(['first', 'second']);

$upper = $collection-&gt;toUpper();

// ['FIRST', 'SECOND']
</code></pre></div></div>
</li>
<li data-sourcepos="44:5-44:179">
通常、コレクションマクロは<a href="https://readouble.com/laravel/10.x/ja/providers.html" rel="nofollow noopener" target="_blank">サービスプロバイダ</a>の<code>boot</code>メソッドで宣言する必要がある
</li>
<li data-sourcepos="45:5-45:54">
この書き方に出会ったことがない…
</li>
</ul>
</li>
<li data-sourcepos="46:1-48:21">
利用可能なメソッド
<ul data-sourcepos="47:5-48:21">
<li data-sourcepos="47:5-47:24">かなり多い。</li>
<li data-sourcepos="48:5-48:21">随時確認。</li>
</ul>
</li>
<li data-sourcepos="49:1-142:100">
メソッド一覧（の中で気になったもの）
<ul data-sourcepos="50:5-142:100">
<li data-sourcepos="50:5-70:8">
<code>chunk()</code>
<ul data-sourcepos="51:9-52:8">
<li data-sourcepos="51:9-52:8">指定したサイズで小さなコレクションに分割する</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="53:9-57:11"><div class="highlight"><pre><code>$collection = collect([1, 2, 3, 4, 5, 6, 7]);
$chunks = $collection-&gt;chunk(4);
$chunks-&gt;all(); // [[1, 2, 3, 4], [5, 6, 7]]
</code></pre></div></div>
<ul data-sourcepos="59:9-60:8">
<li data-sourcepos="59:9-60:8">グリッドシステムを操作する時にViewで特に役に立つ</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="61:9-69:11"><div class="highlight"><pre><code>@foreach ($products-&gt;chunk(3) as $chunk)
 &lt;div class="row"&gt;
 @foreach ($chunk as $product)
 &lt;div class="col-xs-4"&gt;{{ $product-&gt;name }}&lt;/div&gt;
 @endforeach
 &lt;/div&gt;
@endforeach
</code></pre></div></div>
</li>
<li data-sourcepos="71:5-84:83">
<code>contains()</code>
<ul data-sourcepos="72:9-74:8">
<li data-sourcepos="72:9-72:85">コレクションに指定したアイテムが含まれるか判定する</li>
<li data-sourcepos="73:9-74:8">クロージャを渡す</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="75:9-82:11"><div class="highlight"><pre><code>$collection = collect([1, 2, 3, 4, 5]);
// 5よりも大きい値を含むか？
$collection-&gt;contains(function (int $value, int $key) {
 return $value &gt; 5;
});
// false
</code></pre></div></div>
<ul data-sourcepos="84:9-84:83">
<li data-sourcepos="84:9-84:83">
<code>contain()</code>は緩い比較。厳密に比較するなら<code>containStrict()</code>
</li>
</ul>
</li>
<li data-sourcepos="85:5-86:58">
<code>dd()</code>, <code>dump()</code>
<ul data-sourcepos="86:9-86:58">
<li data-sourcepos="86:9-86:58">ddは実行を停止し、dumpは止めない。</li>
</ul>
</li>
<li data-sourcepos="87:5-88:28">
<code>duplicates()</code>
<ul data-sourcepos="88:9-88:28">
<li data-sourcepos="88:9-88:28">重複値を返す</li>
</ul>
</li>
<li data-sourcepos="89:5-91:80">
<code>lazy()</code>
<ul data-sourcepos="90:9-91:80">
<li data-sourcepos="90:9-91:80">アイテムの配列から新しいレイジーコレクションインスタンスを返す
<ul data-sourcepos="91:13-91:80">
<li data-sourcepos="91:13-91:80">巨大なデータセットをメモリを抑えて利用できる</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="92:5-109:8">
<code>only()</code>
<ul data-sourcepos="93:9-94:8">
<li data-sourcepos="93:9-94:8">コレクションの指定したアイテムだけを返す</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="95:9-108:11"><div class="highlight"><pre><code>$collection = collect([
 'product_id' =&gt; 1,
 'name' =&gt; 'Desk',
 'price' =&gt; 100,
 'discount' =&gt; false
]);

$filtered = $collection-&gt;only(['product_id', 'name']);

$filtered-&gt;all();

// ['product_id' =&gt; 1, 'name' =&gt; 'Desk']
</code></pre></div></div>
</li>
<li data-sourcepos="110:5-133:8">
<code>plunk()</code>
<ul data-sourcepos="111:9-112:8">
<li data-sourcepos="111:9-112:8">指定したキーの全コレクション値を取得する</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="113:9-124:11"><div class="highlight"><pre><code>$collection = collect([
 ['product_id' =&gt; 'prod-100', 'name' =&gt; 'Desk'],
 ['product_id' =&gt; 'prod-200', 'name' =&gt; 'Chair'],
]);

$plucked = $collection-&gt;pluck('name');

$plucked-&gt;all();

// ['Desk', 'Chair']
</code></pre></div></div>
<ul data-sourcepos="126:9-127:8">
<li data-sourcepos="126:9-127:8">キー項目の指定も可</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="128:9-132:11"><div class="highlight"><pre><code>$plucked = $collection-&gt;pluck('name', 'product_id');
$plucked-&gt;all();
// ['prod-100' =&gt; 'Desk', 'prod-200' =&gt; 'Chair']
</code></pre></div></div>
</li>
<li data-sourcepos="134:5-135:61">
<code>push()</code>
<ul data-sourcepos="135:9-135:61">
<li data-sourcepos="135:9-135:61">コレクションの最後にアイテムを追加</li>
</ul>
</li>
<li data-sourcepos="136:5-138:204">
<code>toArray()</code>
<ul data-sourcepos="137:9-138:204">
<li data-sourcepos="137:9-137:58">コレクションをPHPの「配列」に変換</li>
<li data-sourcepos="138:9-138:204">コレクションの裏の素の配列をそのまま取得したい場合は、代わりに<code>[all](https://readouble.com/laravel/10.x/ja/collections.html#method-all)</code>メソッドを使用する</li>
</ul>
</li>
<li data-sourcepos="139:5-140:52">
<code>unique()</code>
<ul data-sourcepos="140:9-140:52">
<li data-sourcepos="140:9-140:52">重複を除いた全アイテムを返す</li>
</ul>
</li>
<li data-sourcepos="141:5-142:100">
<code>values()</code>
<ul data-sourcepos="142:9-142:100">
<li data-sourcepos="142:9-142:100">キーをリセットして連続した整数にした新しいコレクションを返す</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="143:1-149:81">
レイジーコレクション
<ul data-sourcepos="144:5-149:81">
<li data-sourcepos="144:5-144:81">巨大なデータセットをメモリ使用を抑えて利用する目的</li>
<li data-sourcepos="145:5-145:42">PHPジェネレータを利用する</li>
<li data-sourcepos="146:5-147:208">アプリケーションで数ギガバイトのログを処理する必要があり、ログを解析するためにLaravelのコレクションメソッドを活用するとしましょう。
<ul data-sourcepos="147:9-147:208">
<li data-sourcepos="147:9-147:208">ファイル全体をメモリへ一度で読み込む代わりに、レイジーコレクションなら毎回ファイルの小さな部分だけをメモリに保持するだけで済みます。</li>
</ul>
</li>
<li data-sourcepos="148:5-148:108">通常のコレクションだと一度にすべてをメモリにロードする必要が生まれる</li>
<li data-sourcepos="149:5-149:81">レイジーコレクションを活用すると大幅にメモリ使用量</li>
</ul>
</li>
</ul>

Laravel学習メモ：コレクション

## HTTPリクエスト

## 参考
[https://readouble.com/laravel/10.x/ja/requests.html](https://readouble.com/laravel/10.x/ja/requests.html)

- Laravelの`Illuminate\Http\Request`クラス
 - アプリケーションが処理している現在のHTTPリクエストを操作
 - リクエストとともに送信される入力、クッキー、およびファイルを取得するオブジェクト指向の手段を提供
- リクエストの操作
 - リクエストへのアクセス
 - DIを使って現在のHTTPリクエストのインスタンスを取得するには
 - ルートクロージャかコントローラメソッドで`Illuminate\Http\Request`をタイプヒントする。
 
 ```php
 // 以下のことを説明している
 public function store(Request $request): RedirectResponse
 {
 ```
 
 - 依存注入とルートパラメータ
 - コントローラメソッドがルートパラメータからの入力も期待している場合は他の依存関係の後にルートパラメータをリストする必要がある
 - idとかを渡すという意味
 
 ```php
 use App\Http\Controllers\UserController;
 
 Route::put('/user/{id}', [UserController::class, 'update']);
 ```
 
 ```php
 <?php
 
 namespace App\Http\Controllers;
 
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 
 class UserController extends Controller
 {
 /**
 * 指定ユーザーを更新
 */
 public function update(Request $request, string $id): RedirectResponse
 {
 // ユーザーの更新処理…
 
 return redirect('/users');
 }
 }
 ```
 
- 重要なメソッド
 - リクエストパスの取得
 
 ```php
 $uri = $request->path();
 ```
 
 - リクエストパス/ルートの検査
 
 ```php
 // ワイルドカード
 if ($request->is('admin/*')) {
 // ...
 }
 
 // 名前付きルートに一致するか
 if ($request->routeIs('admin.*')) {
 // ...
 }
 ```
 
 - リクエストURLの取得
 
 ```php
 // クエリ文字無し
 $url = $request->url();
 // クエリ文字列あり
 $urlWithQueryString = $request->fullUrl();
 
 // クエリ文字列にデータを追加する
 $request->fullUrlWithQuery(['type' => 'phone']);
 ```
 
 - リクエストヘッダ
 
 ```php
 $value = $request->header('X-Header-Name');
 
 $value = $request->header('X-Header-Name', 'default');
 
 // Bearerトークン
 $token = $request->bearerToken();
 ```
 
 - リクエストIPアドレス
 
 ```php
 $ipAddress = $request->ip();
 ```
 
- Inputの取得
 - 全入力データの取得
 
 ```php
 // 配列として取得
 $input = $request->all();
 
 // コレクションとして取り出す
 $input = $request->collect();
 ```
 
 - 単一のデータの取得
 
 ```php
 $name = $request->input('name');
 
 // すべてを連想配列でほしかったら
 $input = $request->input();
 ```
 
 - クエリ文字列の取得
 
 ```php
 $input = $request->input();
 $name = $request->query('name', 'Helen');
 $query = $request->query();
 ```
 
- JSONの取得
 - リクエストの`Content-Type`ヘッダが`application/json`に設定されていたらinputメソッドで取得可能。
 - ドットを利用してネストした値をとれる
 
 ```php
 $name = $request->input('user.name');
 ```
 
- Enum入力値の取得
 - 以下の場合にnullを返す
 - リクエストに指定した名前の入力値が含まれていない場合
 - 入力値にマッチするenumバッキング値をそのenumが持たない場合
 - enumメソッドは入力値の名前とenumクラスを第一引数、第二引数にとる
 
 ```php
 use App\Enums\Status;
 
 $status = $request->enum('status', Status::class);
 ```
 
- 入力の存在の判定
 - hasメソッド
 
 ```php
 // nameに値が存在するか？
 if ($request->has('name')) {
 // ...
 }
 
 // すべてが存在するか？
 if ($request->has(['name', 'email'])) {
 // ...
 }
 ```
 
- 追加入力のマージ
 - mergeメソッド
 - 既存の入力データに追加の入力を自分でマージする。
 
 ```php
 $request->merge(['votes' => 0]);
 ```
 
 - mergeIfMissingメソッド
 
 ```php
 // なければ追加する
 $request->mergeIfMissing(['votes' => 0]);
 ```
 
- セッションへの入力の一時保持
 - `flash`メソッド
 - セッションに現在の入力情報を一時保持する。
 
 ```php
 $request->flush();
 ```
 
 - `flashOnly`メソッドと`flashExcept`メソッド
 
 ```php
 // 配列で指定した値をセッションへ一時保存
 $request->flashOnly(['username', 'email']);
 
 // パスワードを除外
 $request->flashExcept('password');
 ```
 
 - 一時保存した入力の取得: oldメソッド
 
 ```php
 $username = $request->old('username');
 ```
 
 - oldヘルパもある。Bladeで呼び出すこともある
- クッキーの取得
 
 ```php
 $value = $request->cookie('name');
 ```
 
- 入力のトリムと正規化
 - デフォルトで、Laravelはミドルウェアに以下が登録されている。
 - `App\Http\Middleware\TrimStrings`
 - `Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull`
 - App/Http/Kernelクラスで登録されている。
 - 文字列を自動的にトリミングし、空の文字列フィールドを`null`に変換する
 - 無効化したかったら。。。。
 - すべてのリクエストに対して
 - Kernelから２つのミドルウェアを削除
 - 一部のリクエストに対して
 - `skipWhen`メソッドを使用
 - アプリケーションの`AppServiceProvider`の`boot`メソッドで呼び出します。
- ファイル
 - アップロード済みファイルの取得
 
 ```php
 $file = $request->file('photo');
 
 $file = $request->photo;
 ```
 
 - ファイルが存在するか判定
 
 ```php
 if ($request->hasFile('photo')) {
 // ...
 }
 ```
 
 - その他メソッド
 
 ```php
 // バリデーション
 if ($request->file('photo')->isValid()) {
 // ...
 }
 
 // ファイルパスを取得
 $path = $request->photo->path();
 // 拡張子の取得
 $extension = $request->photo->extension();
 
 // 設定済みファイルシステムへ登録
 $path = $request->photo->store('images');
 // 保存先を第２引数で指定
 $path = $request->photo->store('images', 's3');
 
 // ファイル名を指定する場合
 $path = $request->photo->storeAs('images', 'filename.jpg');
 ```
 
- 信頼するプロキシの設定
 - `url`ヘルパを使用するとアプリケーションがHTTPSリンクを生成しないことがある
 - TLS/SSL証明書を末端とするロードバランサーの背後でアプリケーションを実行している場合
 - アプリケーションがポート80でロードバランサーからトラフィックを転送していて、安全なリンクを生成する必要があることを認識していないため。
 - `App\Http\Middleware\TrustProxies`ミドルウェアを使用する
 
 ```php
 <?php
 
 namespace App\Http\Middleware;
 
 use Illuminate\Http\Middleware\TrustProxies as Middleware;
 use Illuminate\Http\Request;
 
 class TrustProxies extends Middleware
 {
 /**
 * このアプリケーションで信頼するプロキシ
 *
 * @var string|array
 */
 protected $proxies = [
 '192.168.1.1',
 '192.168.1.2',
 ];
 
 /**
 * プロキシを検出するために使用すべきヘッダ
 *
 * @var int
 */
 protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO;
 }
 ```
 
 - すべてのプロキシを信頼する場合。（AWSなどのロードバランサを使用するケース）
 - `protected $proxies = '*';`
- 信頼するホストの設定
 - Laravelに特定のホスト名にしか応答しないように指示する必要がある場合は、アプリケーションのミドルウェアである`App\Http\Middleware\TrustHosts`を有効にすることで可能
 
 ```php
 /**
 * 信頼できるホストパターンの取得
 *
 * @return array<int, string>
 */
 public function hosts(): array
 {
 return [
 'laravel.test',
 $this->allSubdomainsOfApplicationUrl(),
 ];
 }
 ```

Laravel学習メモ：Request

## 参考
https://readouble.com/laravel/10.x/ja/facades.html

- ファサードは、アプリケーションの[サービスコンテナ](https://readouble.com/laravel/10.x/ja/container.html)で使用可能なクラスに対して「静的な」インターフェイスを提供
- サービスコンテナ内の基礎となるクラスへの静的プロキシとして機能する
- 従来の静的メソッドに加えてテスト容易性と柔軟性を維持しつつ簡潔で表現力豊か
- Laravelのファサードはすべて、`Illuminate\Support\Facades`名前空間で定義
    
    ```php
    use Illuminate\Support\Facades\Cache;
    use Illuminate\Support\Facades\Route;
    
    Route::get('/cache', function () {
        return Cache::get('key');
    });
    ```
    
- ヘルパ関数
    - ファサードを補完するためにグローバルなヘルパ機能が提供される
    - `view`, `response`, `url`, `config`などが一般的
- ファサードを利用する注意点
    - ファサードの危険性
        - スコープクリープ
            - 1つのクラスで多くのファサードを利用するのは簡単だが
            - クラスが大きくなりすぎる
    - クラスのサイズに注意して責任範囲が狭くなるようにすること


<h2 data-sourcepos="1:1-1:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<iframe id="qiita-embed-content__285519be8954e5853628e08383039181" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__285519be8954e5853628e08383039181" data-content="https%3A%2F%2Freadouble.com%2Flaravel%2F10.x%2Fja%2Ffacades.html" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<ul data-sourcepos="4:1-26:90">
<li data-sourcepos="4:1-4:217">
ファサードは、アプリケーションの<a href="https://readouble.com/laravel/10.x/ja/container.html" rel="nofollow noopener" target="_blank">サービスコンテナ</a>で使用可能なクラスに対して「静的な」インターフェイスを提供
</li>
<li data-sourcepos="5:1-5:101">
サービスコンテナ内の基礎となるクラスへの静的プロキシとして機能する
</li>
<li data-sourcepos="6:1-6:113">
従来の静的メソッドに加えてテスト容易性と柔軟性を維持しつつ簡潔で表現力豊か
</li>
<li data-sourcepos="7:1-17:4">
Laravelのファサードはすべて、<code>Illuminate\Support\Facades</code>名前空間で定義
<div class="code-frame" data-lang="php" data-sourcepos="9:5-16:7"><div class="highlight"><pre><code>use Illuminate\Support\Facades\Cache;
use Illuminate\Support\Facades\Route;

Route::get('/cache', function () {
 return Cache::get('key');
});
</code></pre></div></div>
</li>
<li data-sourcepos="18:1-20:59">
ヘルパ関数
<ul data-sourcepos="19:5-20:59">
<li data-sourcepos="19:5-19:96">ファサードを補完するためにグローバルなヘルパ機能が提供される</li>
<li data-sourcepos="20:5-20:59">
<code>view</code>, <code>response</code>, <code>url</code>, <code>config</code>などが一般的</li>
</ul>
</li>
<li data-sourcepos="21:1-26:90">
ファサードを利用する注意点
<ul data-sourcepos="22:5-26:90">
<li data-sourcepos="22:5-25:50">ファサードの危険性
<ul data-sourcepos="23:9-25:50">
<li data-sourcepos="23:9-25:50">スコープクリープ
<ul data-sourcepos="24:13-25:50">
<li data-sourcepos="24:13-24:90">1つのクラスで多くのファサードを利用するのは簡単だが</li>
<li data-sourcepos="25:13-25:50">クラスが大きくなりすぎる</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="26:5-26:90">クラスのサイズに注意して責任範囲が狭くなるようにすること</li>
</ul>
</li>
</ul>

Laravel学習メモ：ファサード

## サービスプロバイダ

[https://readouble.com/laravel/10.x/ja/providers.html](https://readouble.com/laravel/10.x/ja/providers.html)

- サービスプロバイダとは
 - Laravelアプリケーション起動処理の初め。
 - サービスコンテナによる結合やイベントリスナ・フィルター・ルートを登録すること
- サービスプロバイダの記述
 - すべてのサービスプロバイダは`Illuminate\Support\ServiceProvider`クラスを拡張する
 - `register`と`boot`メソッドをもつ
 - `register`メソッドの中では**サービスコンテナへの登録だけ**を行う
 - コマンドでひな形を作成可能 `php artisan make:provider RiakServiceProvider`
- プロバイダの登録
 - サービスプロバイダは`config/app.php`で登録される
 - サービスプロバイダの名前をリストしているproviders配列に追加する
- 遅延プロバイダ
 - サービスコンテナへコンテナ結合を登録する**だけ**であるなら、その結合が実際に必要になるまで登録を遅らせる方が良い
 - 、`\Illuminate\Contracts\Support\DeferrableProvider`インターフェイスを実装し、`provides`メソッドを定義する
 
 ```php
 <?php
 
 namespace App\Providers;
 
 use App\Services\Riak\Connection;
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Contracts\Support\DeferrableProvider;
 use Illuminate\Support\ServiceProvider;
 
 class RiakServiceProvider extends ServiceProvider implements DeferrableProvider
 {
 /**
 * 全アプリケーションサービスの登録
 */
 public function register(): void
 {
 $this->app->singleton(Connection::class, function (Application $app) {
 return new Connection($app['config']['riak']);
 });
 }
 
 /**
 * このプロバイダにより提供されるサービスの取得
 *
 * @return array<int, string>
 */
 public function provides(): array
 {
 return [Connection::class];
 }
 }
 ```

<h2 data-sourcepos="1:1-1:30">
<a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80"></a>サービスプロバイダ</h2>
<a href="https://readouble.com/laravel/10.x/ja/providers.html" rel="nofollow noopener" target="_blank">https://readouble.com/laravel/10.x/ja/providers.html</a>
<ul data-sourcepos="5:1-53:1">
<li data-sourcepos="5:1-7:120">サービスプロバイダとは
<ul data-sourcepos="6:5-7:120">
<li data-sourcepos="6:5-6:61">Laravelアプリケーション起動処理の初め。</li>
<li data-sourcepos="7:5-7:120">サービスコンテナによる結合やイベントリスナ・フィルター・ルートを登録すること</li>
</ul>
</li>
<li data-sourcepos="8:1-12:93">サービスプロバイダの記述
<ul data-sourcepos="9:5-12:93">
<li data-sourcepos="9:5-9:108">すべてのサービスプロバイダは<code>Illuminate\Support\ServiceProvider</code>クラスを拡張する</li>
<li data-sourcepos="10:5-11:99">
<code>register</code>と<code>boot</code>メソッドをもつ
<ul data-sourcepos="11:9-11:99">
<li data-sourcepos="11:9-11:99">
<code>register</code>メソッドの中ではサービスコンテナへの登録だけを行う</li>
</ul>
</li>
<li data-sourcepos="12:5-12:93">コマンドでひな形を作成可能 <code>php artisan make:provider RiakServiceProvider</code>
</li>
</ul>
</li>
<li data-sourcepos="13:1-15:96">プロバイダの登録
<ul data-sourcepos="14:5-15:96">
<li data-sourcepos="14:5-14:70">サービスプロバイダは<code>config/app.php</code>で登録される</li>
<li data-sourcepos="15:5-15:96">サービスプロバイダの名前をリストしているproviders配列に追加する</li>
</ul>
</li>
<li data-sourcepos="16:1-53:1">遅延プロバイダ
<ul data-sourcepos="17:5-53:1">
<li data-sourcepos="17:5-53:1">
サービスコンテナへコンテナ結合を登録するだけであるなら、その結合が実際に必要になるまで登録を遅らせる方が良い
<ul data-sourcepos="18:9-19:8">
<li data-sourcepos="18:9-19:8">、<code>\Illuminate\Contracts\Support\DeferrableProvider</code>インターフェイスを実装し、<code>provides</code>メソッドを定義する</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="20:9-52:11"><div class="highlight"><pre><code>&lt;?php

namespace App\Providers;

use App\Services\Riak\Connection;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\Support\DeferrableProvider;
use Illuminate\Support\ServiceProvider;

class RiakServiceProvider extends ServiceProvider implements DeferrableProvider
{
 /**
 * 全アプリケーションサービスの登録
 */
 public function register(): void
 {
 $this-&gt;app-&gt;singleton(Connection::class, function (Application $app) {
 return new Connection($app['config']['riak']);
 });
 }

 /**
 * このプロバイダにより提供されるサービスの取得
 *
 * @return array&lt;int, string&gt;
 */
 public function provides(): array
 {
 return [Connection::class];
 }
}
</code></pre></div></div>
</li>
</ul>
</li>
</ul>

Laravel学習メモ：サービスプロバイダ

[サービスコンテナ 10.x Laravel](https://readouble.com/laravel/10.x/ja/container.html)

- Laravelサービスコンテナはクラスの依存関係の管理と注入を実行するための機能
- コンストラクタまたは場合によってはセッターメソッドを介してクラスに「注入」される。
- クラスに依存関係がない場合か他の具象クラスのみに依存している場合は依存解決の方法をコンテナに指示する必要はない。
 
 ```php
 <?php
 
 class Service
 {
 // ...
 }
 
 Route::get('/', function (Service $service) {
 die($service::class);
 });
 ```
 
- コンテナを使うタイミング
 - ルート定義で依存関係に注入可能（バックグラウンドで管理されている状況）
 - 手作業でコンテナ操作をするのは…
 - クラスコンストラクタ
 - コンテナにそのインターフェイスを解決する方法を指示する
 - パッケージのサービスをコンテナに結合する必要あり
- 結合の基本
 - サービスプロバイダ内では常に`$this→app`プロパティを使用してコンテナにアクセスできる。
 - `bind`メソッドを使用して結合を登録できる。
 - 登録するクラスまたはインターフェイス名をクラスのイインスタンスを返すクロージャとともに渡す
 
 ```php
 use App\Services\Transistor;
 use App\Services\PodcastParser;
 use Illuminate\Contracts\Foundation\Application;
 
 $this->app->bind(Transistor::class, function (Application $app) {
 return new Transistor($app->make(PodcastParser::class));
 });
 ```
 
 - リゾルバの引数としてコンテナ自体を受け取ることに注意する。
 - 通常はサービスプロバイダ内のコンテナの中で操作するが、外部でコンテナとやり取りがしたい
 - `App`ファサードを使用して操作する。
 
 ```php
 use App\Services\Transistor;
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Support\Facades\App;
 
 App::bind(Transistor::class, function (Application $app) {
 // ...
 });
 ```
 
 - bindIfメソッドを利用すれば指定するタイプに対する結合がまだ登録されていない場合にのみ登録できる。
 - Note:
 - クラスがどのインターフェイスにも依存しない場合、クラスをコンテナに結合する必要はありません。
- シングルトンの結合
 - `singleton`メソッドはクラスまたはインターフェイスを１回のみコンテナに結合する
- コンテキストによる結合
 - 同じインターフェイスを利用する２つのクラスがある場合、各クラスに異なる実装を依存注入したい場合がある。
 
 ```php
 use App\Http\Controllers\PhotoController;
 use App\Http\Controllers\UploadController;
 use App\Http\Controllers\VideoController;
 use Illuminate\Contracts\Filesystem\Filesystem;
 use Illuminate\Support\Facades\Storage;
 
 $this->app->when(PhotoController::class)
 ->needs(Filesystem::class)
 ->give(function () {
 return Storage::disk('local');
 });
 
 $this->app->when([VideoController::class, UploadController::class])
 ->needs(Filesystem::class)
 ->give(function () {
 return Storage::disk('s3');
 });
 ```
 
- 依存解決
 - `make`メソッド
 - コンテナからクラスインスタンスを解決する。
 
 ```php
 use App\Services\Transistor;
 
 $transistor = $this->app->make(Transistor::class);
 ```
 
 - クラスの依存関係の一部がコンテナを介して解決できない場合はmakeWithメソッドに渡すことで依存注入できる
 - サービスプロバイダの外部で、`$app`変数にアクセスできないコードの場所では、`App`[ファサード](https://readouble.com/laravel/10.x/ja/facades.html)、`app`[ヘルパ](https://readouble.com/laravel/10.x/ja/helpers.html#method-app)を使用してコンテナからクラスインスタンスを依存解決します。
 
 ```php
 use App\Services\Transistor;
 use Illuminate\Support\Facades\App;
 
 $transistor = App::make(Transistor::class);
 $transistor = app(Transistor::class);
 ```

<a href="https://readouble.com/laravel/10.x/ja/container.html" rel="nofollow noopener" target="_blank">サービスコンテナ 10.x Laravel</a>
<ul data-sourcepos="3:1-102:11">
<li data-sourcepos="3:1-3:108">
Laravelサービスコンテナはクラスの依存関係の管理と注入を実行するための機能
</li>
<li data-sourcepos="4:1-4:125">
コンストラクタまたは場合によってはセッターメソッドを介してクラスに「注入」される。
</li>
<li data-sourcepos="5:1-19:4">
クラスに依存関係がない場合か他の具象クラスのみに依存している場合は依存解決の方法をコンテナに指示する必要はない。
<div class="code-frame" data-lang="php" data-sourcepos="7:5-18:7"><div class="highlight"><pre><code>&lt;?php

class Service
{
 // ...
}

Route::get('/', function (Service $service) {
 die($service::class);
});
</code></pre></div></div>
</li>
<li data-sourcepos="20:1-25:86">
コンテナを使うタイミング
<ul data-sourcepos="21:5-25:86">
<li data-sourcepos="21:5-21:111">ルート定義で依存関係に注入可能（バックグラウンドで管理されている状況）</li>
<li data-sourcepos="22:5-25:86">手作業でコンテナ操作をするのは…
<ul data-sourcepos="23:9-25:86">
<li data-sourcepos="23:9-25:86">クラスコンストラクタ
<ul data-sourcepos="24:13-25:86">
<li data-sourcepos="24:13-24:95">コンテナにそのインターフェイスを解決する方法を指示する</li>
<li data-sourcepos="25:13-25:86">パッケージのサービスをコンテナに結合する必要あり</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="26:1-57:148">
結合の基本
<ul data-sourcepos="27:5-57:148">
<li data-sourcepos="27:5-41:97">
サービスプロバイダ内では常に<code>$this→app</code>プロパティを使用してコンテナにアクセスできる。
<ul data-sourcepos="28:9-30:8">
<li data-sourcepos="28:9-28:70">
<code>bind</code>メソッドを使用して結合を登録できる。</li>
<li data-sourcepos="29:9-30:8">登録するクラスまたはインターフェイス名をクラスのイインスタンスを返すクロージャとともに渡す</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="31:9-39:11"><div class="highlight"><pre><code>use App\Services\Transistor;
use App\Services\PodcastParser;
use Illuminate\Contracts\Foundation\Application;

$this-&gt;app-&gt;bind(Transistor::class, function (Application $app) {
 return new Transistor($app-&gt;make(PodcastParser::class));
});
</code></pre></div></div>
<ul data-sourcepos="41:9-41:97">
<li data-sourcepos="41:9-41:97">リゾルバの引数としてコンテナ自体を受け取ることに注意する。</li>
</ul>
</li>
<li data-sourcepos="42:5-55:151">
通常はサービスプロバイダ内のコンテナの中で操作するが、外部でコンテナとやり取りがしたい
<ul data-sourcepos="43:9-44:8">
<li data-sourcepos="43:9-44:8">
<code>App</code>ファサードを使用して操作する。</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="45:9-53:11"><div class="highlight"><pre><code>use App\Services\Transistor;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Support\Facades\App;

App::bind(Transistor::class, function (Application $app) {
 // ...
});
</code></pre></div></div>
<ul data-sourcepos="55:9-55:151">
<li data-sourcepos="55:9-55:151">bindIfメソッドを利用すれば指定するタイプに対する結合がまだ登録されていない場合にのみ登録できる。</li>
</ul>
</li>
<li data-sourcepos="56:5-57:148">
Note:
<ul data-sourcepos="57:9-57:148">
<li data-sourcepos="57:9-57:148">クラスがどのインターフェイスにも依存しない場合、クラスをコンテナに結合する必要はありません。</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="58:1-59:116">
シングルトンの結合
<ul data-sourcepos="59:5-59:116">
<li data-sourcepos="59:5-59:116">
<code>singleton</code>メソッドはクラスまたはインターフェイスを１回のみコンテナに結合する</li>
</ul>
</li>
<li data-sourcepos="60:1-82:4">
コンテキストによる結合
<ul data-sourcepos="61:5-62:4">
<li data-sourcepos="61:5-62:4">同じインターフェイスを利用する２つのクラスがある場合、各クラスに異なる実装を依存注入したい場合がある。</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="63:5-81:7"><div class="highlight"><pre><code>use App\Http\Controllers\PhotoController;
use App\Http\Controllers\UploadController;
use App\Http\Controllers\VideoController;
use Illuminate\Contracts\Filesystem\Filesystem;
use Illuminate\Support\Facades\Storage;

$this-&gt;app-&gt;when(PhotoController::class)
 -&gt;needs(Filesystem::class)
 -&gt;give(function () {
 return Storage::disk('local');
 });

$this-&gt;app-&gt;when([VideoController::class, UploadController::class])
 -&gt;needs(Filesystem::class)
 -&gt;give(function () {
 return Storage::disk('s3');
 });
</code></pre></div></div>
</li>
<li data-sourcepos="83:1-102:11">
依存解決
<ul data-sourcepos="84:5-102:11">
<li data-sourcepos="84:5-102:11">
<code>make</code>メソッド
<ul data-sourcepos="85:9-86:8">
<li data-sourcepos="85:9-86:8">コンテナからクラスインスタンスを解決する。</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="87:9-91:11"><div class="highlight"><pre><code>use App\Services\Transistor;

$transistor = $this-&gt;app-&gt;make(Transistor::class);
</code></pre></div></div>
<ul data-sourcepos="93:9-95:8">
<li data-sourcepos="93:9-93:156">クラスの依存関係の一部がコンテナを介して解決できない場合はmakeWithメソッドに渡すことで依存注入できる</li>
<li data-sourcepos="94:9-95:8">サービスプロバイダの外部で、<code>$app</code>変数にアクセスできないコードの場所では、<code>App</code><a href="https://readouble.com/laravel/10.x/ja/facades.html" rel="nofollow noopener" target="_blank">ファサード</a>、<code>app</code><a href="https://readouble.com/laravel/10.x/ja/helpers.html#method-app" rel="nofollow noopener" target="_blank">ヘルパ</a>を使用してコンテナからクラスインスタンスを依存解決します。</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="96:9-102:11"><div class="highlight"><pre><code>use App\Services\Transistor;
use Illuminate\Support\Facades\App;

$transistor = App::make(Transistor::class);
$transistor = app(Transistor::class);
</code></pre></div></div>
</li>
</ul>
</li>
</ul>

Laravel学習メモ：サービスコンテナ

## ライフサイクル概論


- リクエストのエントリポイントは`public/index.php`
    - Nginx等から送信される
    - このファイルはComposerで生成したオートローダ定義をロードしLaravelアプリケーションインスタンスをbootstrap/index.phpから取得
    - 最初のアクションはアプリケーション/サービスコンテナのインスタンス生成
- リクエストタイプに応じて…
    - HTTPカーネルかコンソールカーネルへ送信
    - **HTTPカーネルに注目**
        - リクエストが実行される前に実行されるbootstrappersの配列を定義する。
        - エラー処理の構成、ログの構成、などの内部設定を処理する
        - ミドルウェアを定義する
        - 最終的にはResponseを返すブラックボックスとして表現されている
- サービスプロバイダ
    - カーネルの初期起動処理アクションの1つ
    - `config/app.php`の`providers`配列で構成されている
        - Laravelがこのプロバイダのリストを繰り返し処理しインスタンス化する
        - registerメソッドを呼び出し
        - プロバイダを登録し、
        - 各プロバイダでbootメソッドを呼び出す
    - Laravelが提供する基本的なすべての主機能はサービスプロバイダによって初期起動および設定される。
- `RouteServiceProvider`
    - `Request`がルータに渡されてディスパッチされる
    - ルータはルートまたはコントローラへリクエストをディスパッチし
    - ルート固有のミドルウェアを実行
- ルートかコントローラメソッドがレスポンスを返すと…
    - レスポンスはルートのミドルウェアを介して外側へ戻る
    - アプリケーションに送信レスポンスを変更または検査する機会を与える
        - `http`カーネルの`handle`メソッドがレスポンスオブジェクトを返し
        - `index.php`ファイルが`send`メソッドを呼ぶ
            - レスポンスコンテンツをユーザのブラウザに返す。
- `AppServiceProvider`
    - アプリケーション独自の初期起動処理およびサービスコンテナ結合を追加する最適な場所
    - 大規模アプリケーションなら特定のサービスに対し、より細かく初期処理を備えたものを作成するべき。

## 参考
https://www.notion.so/9ca1674c2bfe4629b27ffac451f677d6?pvs=21


<h2 data-sourcepos="1:1-1:30">
<a href="#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E6%A6%82%E8%AB%96"></a>ライフサイクル概論</h2>
<ul data-sourcepos="4:1-36:0">
<li data-sourcepos="4:1-7:109">リクエストのエントリポイントは<code>public/index.php</code>
<ul data-sourcepos="5:5-7:109">
<li data-sourcepos="5:5-5:35">Nginx等から送信される</li>
<li data-sourcepos="6:5-6:172">このファイルはComposerで生成したオートローダ定義をロードしLaravelアプリケーションインスタンスをbootstrap/index.phpから取得</li>
<li data-sourcepos="7:5-7:109">最初のアクションはアプリケーション/サービスコンテナのインスタンス生成</li>
</ul>
</li>
<li data-sourcepos="8:1-14:96">リクエストタイプに応じて…
<ul data-sourcepos="9:5-14:96">
<li data-sourcepos="9:5-9:61">HTTPカーネルかコンソールカーネルへ送信</li>
<li data-sourcepos="10:5-14:96">
HTTPカーネルに注目
<ul data-sourcepos="11:9-14:96">
<li data-sourcepos="11:9-11:104">リクエストが実行される前に実行されるbootstrappersの配列を定義する。</li>
<li data-sourcepos="12:9-12:91">エラー処理の構成、ログの構成、などの内部設定を処理する</li>
<li data-sourcepos="13:9-13:43">ミドルウェアを定義する</li>
<li data-sourcepos="14:9-14:96">最終的にはResponseを返すブラックボックスとして表現されている</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="15:1-22:142">サービスプロバイダ
<ul data-sourcepos="16:5-22:142">
<li data-sourcepos="16:5-16:61">カーネルの初期起動処理アクションの1つ</li>
<li data-sourcepos="17:5-21:62">
<code>config/app.php</code>の<code>providers</code>配列で構成されている
<ul data-sourcepos="18:9-21:62">
<li data-sourcepos="18:9-18:104">Laravelがこのプロバイダのリストを繰り返し処理しインスタンス化する</li>
<li data-sourcepos="19:9-19:45">registerメソッドを呼び出し</li>
<li data-sourcepos="20:9-20:40">プロバイダを登録し、</li>
<li data-sourcepos="21:9-21:62">各プロバイダでbootメソッドを呼び出す</li>
</ul>
</li>
<li data-sourcepos="22:5-22:142">Laravelが提供する基本的なすべての主機能はサービスプロバイダによって初期起動および設定される。</li>
</ul>
</li>
<li data-sourcepos="23:1-26:51">
<code>RouteServiceProvider</code>
<ul data-sourcepos="24:5-26:51">
<li data-sourcepos="24:5-24:69">
<code>Request</code>がルータに渡されてディスパッチされる</li>
<li data-sourcepos="25:5-25:96">ルータはルートまたはコントローラへリクエストをディスパッチし</li>
<li data-sourcepos="26:5-26:51">ルート固有のミドルウェアを実行</li>
</ul>
</li>
<li data-sourcepos="27:1-32:83">ルートかコントローラメソッドがレスポンスを返すと…
<ul data-sourcepos="28:5-32:83">
<li data-sourcepos="28:5-28:81">レスポンスはルートのミドルウェアを介して外側へ戻る</li>
<li data-sourcepos="29:5-32:83">アプリケーションに送信レスポンスを変更または検査する機会を与える
<ul data-sourcepos="30:9-32:83">
<li data-sourcepos="30:9-30:96">
<code>http</code>カーネルの<code>handle</code>メソッドがレスポンスオブジェクトを返し</li>
<li data-sourcepos="31:9-32:83">
<code>index.php</code>ファイルが<code>send</code>メソッドを呼ぶ
<ul data-sourcepos="32:13-32:83">
<li data-sourcepos="32:13-32:83">レスポンスコンテンツをユーザのブラウザに返す。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li data-sourcepos="33:1-36:0">
<code>AppServiceProvider</code>
<ul data-sourcepos="34:5-36:0">
<li data-sourcepos="34:5-34:126">アプリケーション独自の初期起動処理およびサービスコンテナ結合を追加する最適な場所</li>
<li data-sourcepos="35:5-36:0">大規模アプリケーションなら特定のサービスに対し、より細かく初期処理を備えたものを作成するべき。</li>
</ul>
</li>
</ul>
<h2 data-sourcepos="37:1-37:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<iframe id="qiita-embed-content__d4643408b4bb353626328b5853830c50" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__d4643408b4bb353626328b5853830c50" data-content="https%3A%2F%2Fwww.notion.so%2F9ca1674c2bfe4629b27ffac451f677d6%3Fpvs%3D21" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

Laravel学習メモ：リクエストのライフサイクル


## 直面したエラー
オンプレサーバーの中でDockerを利用した開発環境を作成するために`docker compose build --no-cache`を多用していたところ、以下のエラーに直面しました。
```
// 略

#0 30.63 Error Summary
#0 30.63 -------------
#0 30.63 Disk Requirements:
#0 30.63    At least 346MB more space needed on the / filesystem.
```

## ディスク利用状況の確認
Dockerのディスク利用状況を確認してみると。。。
```
$ docker system df
TYPE            TOTAL     ACTIVE    SIZE      RECLAIMABLE
Images          41        2         13.91GB   13.24GB (95%)
Containers      2         2         187.7kB   0B (0%)
Local Volumes   16        1         1.285GB   930.4MB (72%)
Build Cache     435       0         12.66GB   12.66GB
```

不要なImagesとcacheがたまってそれぞれ13.91GB, 12.666GBを食っていました。

## Volumesを整理
Volumsの整理用のコマンドを実行することで解決しました。
```
$ docker system prune -a --volumes
```


## 参考
https://qiita.com/shione/items/dfa956a47b6632d8b3b3


<h2 data-sourcepos="2:1-2:24">
<a href="#%E7%9B%B4%E9%9D%A2%E3%81%97%E3%81%9F%E3%82%A8%E3%83%A9%E3%83%BC"></a>直面したエラー</h2>
オンプレサーバーの中でDockerを利用した開発環境を作成するために<code>docker compose build --no-cache</code>を多用していたところ、以下のエラーに直面しました。
<div class="code-frame" data-lang="text" data-sourcepos="4:1-11:3"><div class="highlight"><pre><code>// 略

#0 30.63 Error Summary
#0 30.63 -------------
#0 30.63 Disk Requirements:
#0 30.63 At least 346MB more space needed on the / filesystem.
</code></pre></div></div>
<h2 data-sourcepos="13:1-13:36">
<a href="#%E3%83%87%E3%82%A3%E3%82%B9%E3%82%AF%E5%88%A9%E7%94%A8%E7%8A%B6%E6%B3%81%E3%81%AE%E7%A2%BA%E8%AA%8D"></a>ディスク利用状況の確認</h2>
Dockerのディスク利用状況を確認してみると。。。
<div class="code-frame" data-lang="text" data-sourcepos="15:1-22:3"><div class="highlight"><pre><code>$ docker system df
TYPE TOTAL ACTIVE SIZE RECLAIMABLE
Images 41 2 13.91GB 13.24GB (95%)
Containers 2 2 187.7kB 0B (0%)
Local Volumes 16 1 1.285GB 930.4MB (72%)
Build Cache 435 0 12.66GB 12.66GB
</code></pre></div></div>
不要なImagesとcacheがたまってそれぞれ13.91GB, 12.666GBを食っていました。
<h2 data-sourcepos="26:1-26:19">
<a href="#volumes%E3%82%92%E6%95%B4%E7%90%86"></a>Volumesを整理</h2>
Volumsの整理用のコマンドを実行することで解決しました。
<div class="code-frame" data-lang="text" data-sourcepos="28:1-30:3"><div class="highlight"><pre><code>$ docker system prune -a --volumes
</code></pre></div></div>
<h2 data-sourcepos="33:1-33:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<iframe id="qiita-embed-content__ef6e376336aeb2bb0ee3917b0908169c" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__ef6e376336aeb2bb0ee3917b0908169c" data-content="https%3A%2F%2Fqiita.com%2Fshione%2Fitems%2Fdfa956a47b6632d8b3b3" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

DockerのImagesを作りすぎて新しいDocker環境がつくれなくなった

## はじめに
下記記事でDockerで作成した開発環境の中でSSRを導入する。
前提条件は一緒

https://qiita.com/ryosuke-horie/items/4ee6eb332a7041426a9c


1. SSRに必要な追加の依存関係をインストールする必要がある。
	```
	npm install @vue/server-renderer
	```

	```
	composer require inertiajs/inertia-laravel
	```
2. SSRエントリポイントとして機能するファイルを作成する。(resource/js/ssr.js)
	```js
	import { createInertiaApp } from '@inertiajs/vue3'
	import createServer from '@inertiajs/vue3/server'
	import { renderToString } from '@vue/server-renderer'
	import { createSSRApp, h } from 'vue' 
	
	createServer(page =>
		createInertiaApp({
			page,
			render: renderToString,
			resolve: name => {
				const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
				return pages[`./Pages/${name}.vue`]
			},
			setup({ App, props, plugin }) { 
				return createSSRApp({
					render: () => h(App, props),
				}).use(plugin)
			},
		}),
	)
	```

3. viteの設定を更新
```js
export default defineConfig({
	plugins: [
		laravel({
			input: ['resources/css/app.css', 'resources/js/app.js'],
			ssr: 'resources/js/ssr.js',
			refresh: true,
		}),
		// ...
	],
})
```

4. npmスクリプトを更新する
```json
"scripts": { 
	"dev": "vite",
	"build": "vite build && vite build --ssr"
},
```

5. Build
```
npm run build
```

6. SSRサーバーの実行
```
php artisan inertia:start-ssr
```



<h2 data-sourcepos="1:1-1:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
下記記事でDockerで作成した開発環境の中でSSRを導入する。 
前提条件は一緒
<iframe id="qiita-embed-content__04242130f3f92fe5c1a6b2bcb9315c21" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__04242130f3f92fe5c1a6b2bcb9315c21" data-content="https%3A%2F%2Fqiita.com%2Fryosuke-horie%2Fitems%2F4ee6eb332a7041426a9c" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<ol data-sourcepos="8:1-40:25">
<li data-sourcepos="8:1-15:4">
SSRに必要な追加の依存関係をインストールする必要がある。
<div class="code-frame" data-lang="text" data-sourcepos="9:2-11:4"><div class="highlight"><pre><code>npm install @vue/server-renderer
</code></pre></div></div>
<div class="code-frame" data-lang="text" data-sourcepos="13:2-15:4"><div class="highlight"><pre><code>composer require inertiajs/inertia-laravel
</code></pre></div></div>
</li>
<li data-sourcepos="16:1-39:0">
SSRエントリポイントとして機能するファイルを作成する。(resource/js/ssr.js)
<div class="code-frame" data-lang="js" data-sourcepos="17:2-38:4"><div class="highlight"><pre><code>import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue' 

createServer(page =&gt;
	createInertiaApp({
		page,
		render: renderToString,
		resolve: name =&gt; {
			const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
			return pages[`./Pages/${name}.vue`]
		},
		setup({ App, props, plugin }) { 
			return createSSRApp({
				render: () =&gt; h(App, props),
			}).use(plugin)
		},
	}),
)
</code></pre></div></div>
</li>
<li data-sourcepos="40:1-40:25">
viteの設定を更新
</li>
</ol>
<div class="code-frame" data-lang="js" data-sourcepos="41:1-52:3"><div class="highlight"><pre><code>export default defineConfig({
	plugins: [
		laravel({
			input: ['resources/css/app.css', 'resources/js/app.js'],
			ssr: 'resources/js/ssr.js',
			refresh: true,
		}),
		// ...
	],
})
</code></pre></div></div>
<ol data-sourcepos="54:1-54:36">
<li data-sourcepos="54:1-54:36">npmスクリプトを更新する</li>
</ol>
<div class="code-frame" data-lang="json" data-sourcepos="55:1-60:3"><div class="highlight"><pre><code>"scripts": { 
	"dev": "vite",
	"build": "vite build &amp;&amp; vite build --ssr"
},
</code></pre></div></div>
<ol data-sourcepos="62:1-62:8">
<li data-sourcepos="62:1-62:8">Build</li>
</ol>
<div class="code-frame" data-lang="text" data-sourcepos="63:1-65:3"><div class="highlight"><pre><code>npm run build
</code></pre></div></div>
<ol data-sourcepos="67:1-67:27">
<li data-sourcepos="67:1-67:27">SSRサーバーの実行</li>
</ol>
<div class="code-frame" data-lang="text" data-sourcepos="68:1-70:3"><div class="highlight"><pre><code>php artisan inertia:start-ssr
</code></pre></div></div>

Laravel + Vue + Vite + Inertia.js環境にSSRを導入する

## はじめに
この記事で構築するDocker環境は前回作った記事で構築した開発環境をDockerを利用して作り直したものになります。
前提条件は前回までと一緒です。

https://qiita.com/ryosuke-horie/items/f27e36f44be8ec11b2f5

## 構成
```
- docker
 - app
	 - Dockerfile
	 - php.ini
	 - www.conf
 - nginx
	 - default.conf
	 - Dockerfile
	 - nginx.conf
 - postgresql
	 - Dockerfile
	 - postgresql.conf
- src
- composer.yml
```


## 構築手順
1. Dockerfileを作成
	app(アプリケーションコンテナ用)
	```Dockerfile
	# コンテナのベースとしてamazonlinux:2023を指定
	FROM amazonlinux:2023
	
	RUN dnf -y update
	
	RUN dnf -y install unzip \
 wget
	
	# php、モジュール関連インストール
	RUN dnf -y install php less php-intl \
 php-cli php-json php-common php-devel php-fpm \
 php-gd php-mysqlnd php-mbstring php-pdo php-xml
	
	# unix socket
	RUN mkdir /var/run/php-fpm
	VOLUME [ "/var/run/php-fpm" ]

	EXPOSE 9000
	
	ENTRYPOINT /usr/sbin/php-fpm -F
	
	# composerインストール
	RUN curl -sS https://getcomposer.org/installer | php
	RUN mv composer.phar /usr/local/bin/composer
	RUN composer self-update
	
	# nodeのインストール
	RUN curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
	RUN dnf -y install nodejs
	
	# コンテナのディレクトリ指定
	WORKDIR /var/www/html
	```
	web(nginxコンテナ用)
	```Dockerfile
	# コンテナのベースとしてamazonlinux:2023を指定
	FROM amazonlinux:2023
	
	# nginxインストール
	RUN dnf -y update
	RUN dnf -y install nginx
	
	EXPOSE 5173
	
	ENTRYPOINT ["/usr/sbin/nginx", "-g", "daemon off;"]
	```
	postgres
	```Dockerfile
	FROM postgres:15.2-alpine
	```

2. compose.yml作成
	```yml
	services:
	  web:
	    container_name: web-laravel_vue
	    build:
	      context: ./docker/nginx/
	    ports:
	      - "8000:80"
	    volumes:
	      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
	      - ./src:/var/www/html
	    depends_on:
	      - app
	      - db
	
	  app:
	    container_name: app-laravel_vue
	    build:
	      context: ./docker/app/
	    ports:
	      - "5173:5173"
	    volumes:
	      - ./src:/var/www/html/
	      - ./docker/app/www.conf:/etc/php-fpm.d/www.conf
	      - ./docker/app/php.ini:/etc/php.ini
	  db:
	    container_name: pgdb-laravel_vue
	    image: postgres:latest
	    ports:
	      - "5432:5432"
	    volumes:
	      - ./docker/postgresql/postgresql.conf:/etc/postgresql/postgresql.conf
	      - pgdb-laravel_vue-volume:/var/lib/postgresql/data
	    environment:
	      POSTGRES_DB: laravel
	      POSTGRES_USER: laravel
	      POSTGRES_PASSWORD: laravel
	volumes:
	  pgdb-laravel_vue-volume:
	```

3. defalt.conf, www.conf nginx・php.ini・postgresql.confを作成
4. dockerコマンドでコンテナを作成
	```
	dokcer compose build
	docker compose up -d
	```
5. appコンテナ内でプロジェクト作成
	```
	$ docker exec app-laravel_vue bash
	
	# cd /var/www/html
	# composer create-project laravel/laravel .
	```
6. vue関連のインストール(appコンテナ内)
	```
	npm install --save-dev vue
	npm install --save-dev @vitejs/plugin-vue
	npm install --save-dev 
	```
7.viteの設定(vite.config.js)

 ```
	import { defineConfig } from 'vite';
	import laravel from 'laravel-vite-plugin';
	import vue from '@vitejs/plugin-vue';
	
	export default defineConfig({
 plugins: [
 vue(),
 laravel({
 input: ['resources/css/app.css', 'resources/js/app.js'],
 refresh: true,
 }),
 ],
 server: {
 host: '0.0.0.0',
 hmr: {
 host: '192.168.100.230',
 },
 watch: {
 usePolling: true,
 },
 port:5173
 }
 });
 ```

8. Inertia.jsの導入・設定
	```
	# インストール
	composer require inertiajs/inertia-laravel
	
	# Inertiaのミドルウェア作成
	php artisan inertia:middleware 
	```
	/app/Http/Kernel.phpに登録（webの中）
	```
	\App\Http\Middleware\HandleInertiaRequests::class,
	```
9. CreateInertiaAppの作成
	resources/js/app.js
	```js
	import { createApp, h } from "vue";
	import { createInertiaApp } from "@inertiajs/inertia-vue3";
	import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; 
	createInertiaApp({
		resolve: (name) =>
			resolvePageComponent(
				`./Pages/${name}.vue`,
				import.meta.glob("./Pages/**/*.vue")
			),
		setup({ el, App, props, plugin }) {
			createApp({ render: () => h(App, props) })
				.use(plugin)
				.mount(el);
		},
	});
	```

10. app.blade.phpとvueの連携
	```php
	<!DOCTYPE html>
	<html>
	
	<head>
	 <meta charset="utf-8" />
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	 @inertiaHead
	 @vite(['resources/css/app.css', 'resources/js/app.js'])
	</head>
	
	<body>
	 @inertia
	</body>
	
	</html>
	```
11. ルーティング設定
	```php
	<?php
	
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;
	
	/*
	|--------------------------------------------------------------------------
	| Web Routes
	|--------------------------------------------------------------------------
	|
	| Here is where you can register web routes for your application. These
	| routes are loaded by the RouteServiceProvider within a group which
	| contains the "web" middleware group. Now create something great!
	|
	*/
	
	Route::get('/', function () {
	 return Inertia::render('hello-world');
	});
	```
12. Hello World表示用のVueファイルを作成
	`resources/js/Pages/hello-world.vue`
	```vue
	<script>
	export default {
	 data() {
	 return {
	 greeting: "Hello World!",
	 };
	 },
	};
	</script>
	
	<template>
	 {{ greeting }}
	</template>
	
	<style>
	.greeting {
	 color: red;
	 font-weight: bold;
	}
	</style>
	```
13. 動作確認(コンテナ内でそれぞれ実行)
```
php artisan serve --host 0.0.0.0
```

```
npm install && npm run dev
```



## おまけ
### 同一IPでの開発環境の複製について
以下3ファイルを修正する
- compose.yml
- /docker/nginx/default.conf
- /src/vite.config.js

compose.yml でportとコンテナ名の重複を防ぐ
```yml
services:
  web:
    container_name: web-laravel_vue2
    build:
      context: ./docker/nginx/
    ports:
      - "8083:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./src:/var/www/html
    depends_on:
      - app
      - db
 
  app:
    container_name: app-laravel_vue2
    build:
      context: ./docker/app/
    ports:
      - "5174:5174"
    volumes:
      - ./src:/var/www/html/
      - ./docker/app/www.conf:/etc/php-fpm.d/www.conf
      - ./docker/app/php.ini:/etc/php.ini

  db:
    container_name: pgdb-laravel_vue2
    image: postgres:latest
    ports:
      - "5436:5432"
    volumes:
      - ./docker/postgresql/postgresql.conf:/etc/postgresql/postgresql.conf
      - pgdb-laravel_vue2-volume:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: laravel_db
      POSTGRES_USER: tanimoto
      POSTGRES_PASSWORD: Kazumakouki1

volumes:
  pgdb-laravel_vue2-volume:
```

/docker/nginx/default.conf portとコンテナ名を変更
```
// 略

location /devserver/ {
        proxy_pass http://app-laravel_vue2:5174/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

 // 略
```

/src/vite.config.js　portを変更
```javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],

    server: {
        host: '0.0.0.0',
        hmr: {
            host: '192.168.100.230',
        },
        watch: {
            usePolling: true,
        },
        port:5174
    }
});
```

Laravel + Vue + Vite + Inertia.js Docker開発環境の構築

## はじめに
[前々回記事](https://qiita.com/ryosuke-horie/items/d1047a1f69ca219bfc5e)、[前回記事](https://qiita.com/ryosuke-horie/items/335b8f1962048b720d8c)でVue, Vite, Laravelの開発環境をオンプレのVMware上に構築しました。
上記の知識を活用しつつ、同様にオンプレのVM上に「Laravel + Vue + Vite + inertia.js」を利用した構成で開発環境を立てようと思います。

今回の記事のゴールは「Laravel + Vue + Vite + inertia.js」の構成を開発環境として最低限レベルで構築して簡易的なアプリが動作するところまでとします。


## 参考
- [LaravelでInertia.jsを使用する方法](https://kinsta.com/jp/blog/laravel-inertia/)
- [ゼロからしっかり理解したい人のLaravel Inertia.jsの基礎(Vue編)](https://reffect.co.jp/laravel/laravel_inertia_js_vue/)
- [Laravel 9 & Vue 3をInertiaを用いて接続する(Vite使用版)](https://qiita.com/reirev2913/items/b4505df08372eed9126d)



## 基礎知識
### Inertiaとは？
クライアントサイドのルーティングライブラリでaタグのラッパー`<Link>`をコンポーネントを使用してページの移動を行う。
サーバーサイドのルーティングとコントローラーを利用してVue,React,Sveltを使用することが可能にできる。
> Inertia.jsを使えば、Laravel開発者はこれまで通り作業が行えます。

### LaravelとVueだけでいいのでは？
LaravelとVueだけでSPAを構築するとフロントエンドはJSだけを使用した形となり操作性がいまいち。
リンクをクリックするたびにページの読み込みでクライアントサイドのFWが再起動する。 



## 手順
1. 各種インストール
	```
	# プロジェクト作成
	composer create-project laravel/laravel laravel10-vue3-inertiajs
	cd laravel10-vue3-inertiajs
	
	# Vue関連のインストール
	npm install --save-dev vue npm install --save-dev @vitejs/plugin-vue npm install --save-dev @inertiajs/inertia-vue3
	```
2. viteの設定(vite.config.js)
	```js
	import { defineConfig } from 'vite';
	import laravel from 'laravel-vite-plugin';
	import vue from '@vitejs/plugin-vue';

	export default defineConfig({
 plugins: [
 vue(),
 laravel({
 input: ['resources/css/app.css', 'resources/js/app.js'],
 refresh: true,
 }),
 ],
 server {
		host:'xxx.xxx.xxx.xxx', // ipを記載する
		port: 5731
	}
	});
	```
3. Inertia.jsの導入・設定
	```
	# インストール
	composer require inertiajs/inertia-laravel
	
	# Inertiaのミドルウェア作成
	php artisan inertia:middleware 
	```
	/app/Http/Kernel.phpに登録（webの中）
	```
	\App\Http\Middleware\HandleInertiaRequests::class,
	```
4. CreateInertiaAppの作成
	resources/js/app.js
	```js
	import { createApp, h } from "vue";
	import { createInertiaApp } from "@inertiajs/inertia-vue3";
	import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; 
	createInertiaApp({
		resolve: (name) =>
			resolvePageComponent(
				`./Pages/${name}.vue`,
				import.meta.glob("./Pages/**/*.vue")
			),
		setup({ el, App, props, plugin }) {
			createApp({ render: () => h(App, props) })
				.use(plugin)
				.mount(el);
		},
	});
	```

5. app.blade.phpとvueの連携
	```php
	<!DOCTYPE html>
	<html>
	
	<head>
	 <meta charset="utf-8" />
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	 @inertiaHead
	 @vite(['resources/css/app.css', 'resources/js/app.js'])
	</head>
	
	<body>
	 @inertia
	</body>
	
	</html>
	
	```
6. ルーティング設定
	```php
	<?php
	
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;
	
	/*
	|--------------------------------------------------------------------------
	| Web Routes
	|--------------------------------------------------------------------------
	|
	| Here is where you can register web routes for your application. These
	| routes are loaded by the RouteServiceProvider within a group which
	| contains the "web" middleware group. Now create something great!
	|
	*/
	
	Route::get('/', function () {
	 return Inertia::render('hello-world');
	});
	```
7. Hello World表示用のVueファイルを作成
	`resources/js/Pages/hello-world.vue`
	```vue
	<script>
	export default {
	 data() {
	 return {
	 greeting: "Hello World!",
	 };
	 },
	};
	</script>
	
	<template>
	 {{ greeting }}
	</template>
	
	<style>
	.greeting {
	 color: red;
	 font-weight: bold;
	}
	</style>
	```
8. 動作確認
```
php artisan serve --host 0.0.0.0
```

```
npm install && npm run dev
```

<h2 data-sourcepos="2:1-2:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
<a href="https://qiita.com/ryosuke-horie/items/d1047a1f69ca219bfc5e" id="reference-a5dd1c40e5b06a3c96c3">前々回記事</a>、<a href="https://qiita.com/ryosuke-horie/items/335b8f1962048b720d8c" id="reference-e3d5c14445cd6246e119">前回記事</a>でVue, Vite, Laravelの開発環境をオンプレのVMware上に構築しました。 
上記の知識を活用しつつ、同様にオンプレのVM上に「Laravel + Vue + Vite + inertia.js」を利用した構成で開発環境を立てようと思います。
今回の記事のゴールは「Laravel + Vue + Vite + inertia.js」の構成を開発環境として最低限レベルで構築して簡易的なアプリが動作するところまでとします。
<h2 data-sourcepos="9:1-9:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<ul data-sourcepos="10:1-15:0">
<li data-sourcepos="10:1-10:90"><a href="https://kinsta.com/jp/blog/laravel-inertia/" rel="nofollow noopener" target="_blank">LaravelでInertia.jsを使用する方法</a></li>
<li data-sourcepos="11:1-11:139"><a href="https://reffect.co.jp/laravel/laravel_inertia_js_vue/" rel="nofollow noopener" target="_blank">ゼロからしっかり理解したい人のLaravel Inertia.jsの基礎(Vue編)</a></li>
<li data-sourcepos="12:1-15:0"><a href="https://qiita.com/reirev2913/items/b4505df08372eed9126d" id="reference-faef56326b75c4f5e702">Laravel 9 &amp; Vue 3をInertiaを用いて接続する(Vite使用版)</a></li>
</ul>
<h2 data-sourcepos="16:1-16:15">
<a href="#%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98"></a>基礎知識</h2>
<h3 data-sourcepos="17:1-17:20">
<a href="#inertia%E3%81%A8%E3%81%AF"></a>Inertiaとは？</h3>
クライアントサイドのルーティングライブラリでaタグのラッパー<code>&lt;Link&gt;</code>をコンポーネントを使用してページの移動を行う。 
サーバーサイドのルーティングとコントローラーを利用してVue,React,Sveltを使用することが可能にできる。
<blockquote data-sourcepos="20:1-20:88">
Inertia.jsを使えば、Laravel開発者はこれまで通り作業が行えます。
</blockquote>
<h3 data-sourcepos="22:1-22:44">
<a href="#laravel%E3%81%A8vue%E3%81%A0%E3%81%91%E3%81%A7%E3%81%84%E3%81%84%E3%81%AE%E3%81%A7%E3%81%AF"></a>LaravelとVueだけでいいのでは？</h3>
LaravelとVueだけでSPAを構築するとフロントエンドはJSだけを使用した形となり操作性がいまいち。 
リンクをクリックするたびにページの読み込みでクライアントサイドのFWが再起動する。
<h2 data-sourcepos="28:1-28:9">
<a href="#%E6%89%8B%E9%A0%86"></a>手順</h2>
<ol data-sourcepos="29:1-155:15">
<li data-sourcepos="29:1-37:4">
各種インストール
<div class="code-frame" data-lang="text" data-sourcepos="30:2-37:4"><div class="highlight"><pre><code># プロジェクト作成
composer create-project laravel/laravel laravel10-vue3-inertiajs
cd laravel10-vue3-inertiajs

# Vue関連のインストール
npm install --save-dev vue npm install --save-dev @vitejs/plugin-vue npm install --save-dev @inertiajs/inertia-vue3
</code></pre></div></div>
</li>
<li data-sourcepos="38:1-57:4">
viteの設定(vite.config.js)
<div class="code-frame" data-lang="js" data-sourcepos="39:2-57:4"><div class="highlight"><pre><code>import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [
 vue(),
 laravel({
 input: ['resources/css/app.css', 'resources/js/app.js'],
 refresh: true,
 }),
],
server {
	host:'xxx.xxx.xxx.xxx', // ipを記載する
	port: 5731
}
});
</code></pre></div></div>
</li>
<li data-sourcepos="58:1-69:4">
Inertia.jsの導入・設定
<div class="code-frame" data-lang="text" data-sourcepos="59:2-65:4"><div class="highlight"><pre><code># インストール
composer require inertiajs/inertia-laravel

# Inertiaのミドルウェア作成
php artisan inertia:middleware 
</code></pre></div></div>
/app/Http/Kernel.phpに登録（webの中）
<div class="code-frame" data-lang="text" data-sourcepos="67:2-69:4"><div class="highlight"><pre><code>\App\Http\Middleware\HandleInertiaRequests::class,
</code></pre></div></div>
</li>
<li data-sourcepos="70:1-89:0">
CreateInertiaAppの作成 
resources/js/app.js
<div class="code-frame" data-lang="js" data-sourcepos="72:2-88:4"><div class="highlight"><pre><code>import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; 
createInertiaApp({
	resolve: (name) =&gt;
		resolvePageComponent(
			`./Pages/${name}.vue`,
			import.meta.glob("./Pages/**/*.vue")
		),
	setup({ el, App, props, plugin }) {
		createApp({ render: () =&gt; h(App, props) })
			.use(plugin)
			.mount(el);
	},
});
</code></pre></div></div>
</li>
<li data-sourcepos="90:1-108:4">
app.blade.phpとvueの連携
<div class="code-frame" data-lang="php" data-sourcepos="91:2-108:4"><div class="highlight"><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /&gt;
 @inertiaHead
 @vite(['resources/css/app.css', 'resources/js/app.js'])
&lt;/head&gt;

&lt;body&gt;
 @inertia
&lt;/body&gt;

&lt;/html&gt;

</code></pre></div></div>
</li>
<li data-sourcepos="109:1-130:4">
ルーティング設定
<div class="code-frame" data-lang="php" data-sourcepos="110:2-130:4"><div class="highlight"><pre><code>&lt;?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
 return Inertia::render('hello-world');
});
</code></pre></div></div>
</li>
<li data-sourcepos="131:1-154:4">
Hello World表示用のVueファイルを作成 
<code>resources/js/Pages/hello-world.vue</code>
<div class="code-frame" data-lang="vue" data-sourcepos="133:2-154:4"><div class="highlight"><pre><code>&lt;script&gt;
export default {
 data() {
 return {
 greeting: "Hello World!",
 };
 },
};
&lt;/script&gt;

&lt;template&gt;
 &lt;p class="greeting"&gt;{{ greeting }}&lt;/p&gt;
&lt;/template&gt;

&lt;style&gt;
.greeting {
 color: red;
 font-weight: bold;
}
&lt;/style&gt;
</code></pre></div></div>
</li>
<li data-sourcepos="155:1-155:15">
動作確認
</li>
</ol>
<div class="code-frame" data-lang="text" data-sourcepos="156:1-158:3"><div class="highlight"><pre><code>php artisan serve --host 0.0.0.0
</code></pre></div></div>
<div class="code-frame" data-lang="text" data-sourcepos="160:1-162:3"><div class="highlight"><pre><code>npm install &amp;&amp; npm run dev
</code></pre></div></div>

Laravel + Vue + Vite + inertia.js 環境構築(IPでアクセスするとき)

## はじめに
Laravel + Vue + Vite の開発環境構築をDockerを利用しないで行う。
最終的にはDockerで構成するが、流れを理解するために初期画面を表示させるところまでをオンプレサーバーのVMware上で行う。
IPでアクセスして表示できるところまでをゴールとする。

## 参考
[Laravel9のVite環境でVue.js 3を利用する方法](https://reffect.co.jp/laravel/laravel9_vite/)

## Github
https://github.com/ryosuke-horie/laravel_vite_vue3

## 実行した内容
1. laravelプロジェクト作成
 ```
 composer create-project laravel/laravel laravel_vite_vue3
 cd laravel_vite_vue3
 ```

2. ライブラリのインストール(Linuxの仮想OSで利用するためにOS上で行わないとエラーが発生する)
 ```
 npm install
 ```

3. Vite で Vue.js を利用するために@vitejs/plugin-vue のインストールと`vite.confirg.js`の追加設定
 ```
 npm i @vitejs/plugin-vue --save-dev
 ```

 ```
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
 plugins: [
 vue(),
 laravel({
 input: ['resources/css/app.css', 'resources/js/app.js'],
 refresh: true,
 }),
 ],
 server: {
 	 host:'xxx.xxx.xxx.xxx', // VMのIPを記載
 	 port:5173
 }
 });
 ```

4. サーバー立ち上げ(エラーが発生しなければOK)
 ```
 npm run dev
 ```

5. app.jsファイルの読みこみ
 ```php:welcome.blade.php
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <title>Laravel Vite React</title>
 @vit_sility e(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 <body>
 <div id="app"></div>
 </body>
 </html>
 ```

6. Laravel開発サーバーを起動
 ```
 php artisan serve --host 0.0.0.0
 ```

7. ブラウザでアクセスして確認する（http://xxx.xxx.xxx.xxx:8000）
8. bootstrap.jsにVue.jsのコードを記載する
 ```js
 import _ from 'lodash';
 window._ = _;

 /**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */
 
 import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 import { createApp } from 'vue';
 
 // vueのインスタンスを作成
 const app = createApp();
 
 console.log(app.version);
 
 // appをマウント
 app.mount('#app');
 ```
 
9. App.vueファイルを作成してimportし表示
 ```vue
 <template>
 <h1>Hello World</h1>
 </template>
 ```

 ```js
 //略
 import { createApp } from 'vue';
 import App from './App.vue';
 
 const app = createApp(App);
 
 app.mount('#app');
 ```

![rapture_20230920153701.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/b179a155-14c0-d96d-7b7e-757c509e6d12.jpeg)

<h2 data-sourcepos="1:1-1:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
Laravel + Vue + Vite の開発環境構築をDockerを利用しないで行う。 
最終的にはDockerで構成するが、流れを理解するために初期画面を表示させるところまでをオンプレサーバーのVMware上で行う。 
IPでアクセスして表示できるところまでをゴールとする。
<h2 data-sourcepos="6:1-6:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<a href="https://reffect.co.jp/laravel/laravel9_vite/" rel="nofollow noopener" target="_blank">Laravel9のVite環境でVue.js 3を利用する方法</a>
<h2 data-sourcepos="9:1-9:9">
<a href="#github"></a>Github</h2>
<iframe id="qiita-embed-content__299296e8849c6ac2b5f3c9a2af5a5296" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__299296e8849c6ac2b5f3c9a2af5a5296" data-content="https%3A%2F%2Fgithub.com%2Fryosuke-horie%2Flaravel_vite_vue3" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<h2 data-sourcepos="12:1-12:21">
<a href="#%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%9F%E5%86%85%E5%AE%B9"></a>実行した内容</h2>
<ol data-sourcepos="13:1-120:0">
<li data-sourcepos="13:1-18:0">
laravelプロジェクト作成
<div class="code-frame" data-lang="text" data-sourcepos="14:5-17:7"><div class="highlight"><pre><code>composer create-project laravel/laravel laravel_vite_vue3
cd laravel_vite_vue3
</code></pre></div></div>
</li>
<li data-sourcepos="19:1-23:0">
ライブラリのインストール(Linuxの仮想OSで利用するためにOS上で行わないとエラーが発生する)
<div class="code-frame" data-lang="text" data-sourcepos="20:5-22:7"><div class="highlight"><pre><code>npm install
</code></pre></div></div>
</li>
<li data-sourcepos="24:1-48:0">
Vite で Vue.js を利用するために@vitejs/plugin-vue のインストールと<code>vite.confirg.js</code>の追加設定
<div class="code-frame" data-lang="text" data-sourcepos="25:5-27:7"><div class="highlight"><pre><code>npm i @vitejs/plugin-vue --save-dev
</code></pre></div></div>
<div class="code-frame" data-lang="text" data-sourcepos="29:5-47:7"><div class="highlight"><pre><code>import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
 plugins: [
 vue(),
 laravel({
 input: ['resources/css/app.css', 'resources/js/app.js'],
 refresh: true,
 }),
 ],
 server: {
	 host:'xxx.xxx.xxx.xxx', // VMのIPを記載
	 port:5173
 }
});
</code></pre></div></div>
</li>
<li data-sourcepos="49:1-53:0">
サーバー立ち上げ(エラーが発生しなければOK)
<div class="code-frame" data-lang="text" data-sourcepos="50:5-52:7"><div class="highlight"><pre><code>npm run dev
</code></pre></div></div>
</li>
<li data-sourcepos="54:1-70:0">
app.jsファイルの読みこみ
<div class="code-frame" data-lang="php" data-sourcepos="55:5-69:7">
<div class="code-lang">welcome.blade.php</div>
<div class="highlight"><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;

 &lt;title&gt;Laravel Vite React&lt;/title&gt;
 @vit_sility e(['resources/css/app.css', 'resources/js/app.js'])
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="app"&gt;&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
</div>
</li>
<li data-sourcepos="71:1-75:0">
Laravel開発サーバーを起動
<div class="code-frame" data-lang="text" data-sourcepos="72:5-74:7"><div class="highlight"><pre><code>php artisan serve --host 0.0.0.0
</code></pre></div></div>
</li>
<li data-sourcepos="76:1-76:81">
ブラウザでアクセスして確認する（<a href="http://xxx.xxx.xxx.xxx:8000%EF%BC%89" class="autolink">http://xxx.xxx.xxx.xxx:8000）</a>
</li>
<li data-sourcepos="77:1-103:4">
bootstrap.jsにVue.jsのコードを記載する
<div class="code-frame" data-lang="js" data-sourcepos="78:5-102:7"><div class="highlight"><pre><code>import _ from 'lodash';
window._ = _;

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import { createApp } from 'vue';

// vueのインスタンスを作成
const app = createApp();

console.log(app.version);

// appをマウント
app.mount('#app');
</code></pre></div></div>
</li>
<li data-sourcepos="104:1-120:0">
App.vueファイルを作成してimportし表示
<div class="code-frame" data-lang="vue" data-sourcepos="105:5-109:7"><div class="highlight"><pre><code>&lt;template&gt;
 &lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/template&gt;
</code></pre></div></div>
<div class="code-frame" data-lang="js" data-sourcepos="111:5-119:7"><div class="highlight"><pre><code>//略
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');
</code></pre></div></div>
</li>
</ol>
<a href="https://camo.qiitausercontent.com/65d7d6bfdd4b02ac335200c719a6990a0f4bd524/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3738313233322f62313739613135352d313463302d643936642d376237652d3735376335303965366431322e6a706567" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fb179a155-14c0-d96d-7b7e-757c509e6d12.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=318c4c66bf31a130e20c3dfc6d160725" alt="rapture_20230920153701.jpg" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/b179a155-14c0-d96d-7b7e-757c509e6d12.jpeg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fb179a155-14c0-d96d-7b7e-757c509e6d12.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=cf0b184f41ccf200273b999d31a21126 1x" loading="lazy"></a>

Laravel + Vue + ViteのIPでアクセスできる開発環境を構築する

## はじめに
DockerでViteとVue3の開発環境を立ち上げる作業を行った。映し出すまでに少し手間どってしまったので、理解を深めるためにもメモを残す。

## ゴール
オンプレサーバー内の仮想OSでDockerを導入していてdocker compose v2なども導入済みです。
今回のゴールはAmazonLinux2023のイメージを利用してVite+Vue3の開発環境を`http://xxx.xxx.xxx.xxx:5173`でアクセスできる状態にすることです。


## 参考：
https://zenn.dev/iloveomelette/scraps/da45d505ffaefc
https://qiita.com/generonishimura/items/88742085294bd0b234a6

## 作業手順
1. 開発用ディレクトリを作成
2. `Dockerfile`と`compose.yml`を作成
```Dockerfile
FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - && \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

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

# ポート番号5173でコンテナを公開
EXPOSE 5173
```

```compose.yml
services:
  frontend:  # サービス名
    build:  # Dockerfileの設定
      context: .  # Dockerfileを置いているディレクトリ
      dockerfile: Dockerfile  # Dockerfileのファイル名
    working_dir: /app  # 作業ディレクトリを指定
    volumes:
      - ./:/app:cached
    tty: true  # コンテナを正常終了するのを防ぐ
    ports:
      - '5173:5173'  # 公開用のポート指定。ホスト側:コンテナ側
    command: npm run dev  # viteの実行コマンド
volumes:  # 名前付きボリュームの設定
  node_modules:
```

3.ホストマシン（仮想OS）でビルド
```
docker compose build
```

4.Dockerコンテナ内でViteを利用してVueアプリを作成（Vueを指定し、プロジェクト名は今回は「vue-vite-sample」とした）
```
docker-compose run frontend npm run vite
```

5.Dockerfileとcompose.ymlに追記する
```Dockerfile
FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - && \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

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

# 追記
# プロジェクトのコピー
COPY vue-vite-sample/ ./

# ポート番号5173でコンテナを公開
EXPOSE 5173
```

```compose.yml
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    volumes:
      - ./vue-vite-sample:/app:cached
      - node_modules:/app/node_modules
    tty: true
    ports:
      - '5173:5173'
    command: npm run dev
volumes:
  node_modules:
```

6.vite.config.tsを書き換え（ホストではなく外部公開するため）
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 外部公開
    host: '0.0.0.0',
    // 立ち上げる際のポートを変更できます。
    port: 5173
  }
})
```

7.再度ビルドする
```
docker compose build --no-cache
```

8.コンテナの立ち上げ
```
docker compose up
```

9.IPとポートを指定してアクセス
```
http://xxx.xxx.xxx.xxx:5173/
```

![rapture_20230920124712.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/d6e20a2f-4fb1-0ae1-4fec-a4c7614bc03e.jpeg)


<h2 data-sourcepos="1:1-1:15">
<a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"></a>はじめに</h2>
DockerでViteとVue3の開発環境を立ち上げる作業を行った。映し出すまでに少し手間どってしまったので、理解を深めるためにもメモを残す。
<h2 data-sourcepos="4:1-4:12">
<a href="#%E3%82%B4%E3%83%BC%E3%83%AB"></a>ゴール</h2>
オンプレサーバー内の仮想OSでDockerを導入していてdocker compose v2なども導入済みです。 
今回のゴールはAmazonLinux2023のイメージを利用してVite+Vue3の開発環境を<code>http://xxx.xxx.xxx.xxx:5173</code>でアクセスできる状態にすることです。
<h2 data-sourcepos="9:1-9:12">
<a href="#%E5%8F%82%E8%80%83"></a>参考：</h2>
<a href="https://zenn.dev/iloveomelette/scraps/da45d505ffaefc" class="autolink" rel="nofollow noopener" target="_blank">https://zenn.dev/iloveomelette/scraps/da45d505ffaefc</a> 
<a href="https://qiita.com/generonishimura/items/88742085294bd0b234a6" class="autolink" id="reference-4901991a427bac59b836">https://qiita.com/generonishimura/items/88742085294bd0b234a6</a>
<h2 data-sourcepos="13:1-13:15">
<a href="#%E4%BD%9C%E6%A5%AD%E6%89%8B%E9%A0%86"></a>作業手順</h2>
<ol data-sourcepos="14:1-15:40">
<li data-sourcepos="14:1-14:39">開発用ディレクトリを作成</li>
<li data-sourcepos="15:1-15:40">
<code>Dockerfile</code>と<code>compose.yml</code>を作成</li>
</ol>
<div class="code-frame" data-lang="Dockerfile" data-sourcepos="16:1-34:3"><div class="highlight"><pre><code>FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - &amp;&amp; \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

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

# ポート番号5173でコンテナを公開
EXPOSE 5173
</code></pre></div></div>
<div class="code-frame" data-lang="yaml" data-sourcepos="36:1-51:3">
<div class="code-lang">compose.yml</div>
<div class="highlight"><pre><code>services:
  frontend:  # サービス名
    build:  # Dockerfileの設定
      context: .  # Dockerfileを置いているディレクトリ
      dockerfile: Dockerfile  # Dockerfileのファイル名
    working_dir: /app  # 作業ディレクトリを指定
    volumes:
      - ./:/app:cached
    tty: true  # コンテナを正常終了するのを防ぐ
    ports:
      - '5173:5173'  # 公開用のポート指定。ホスト側:コンテナ側
    command: npm run dev  # viteの実行コマンド
volumes:  # 名前付きボリュームの設定
  node_modules:
</code></pre></div>
</div>
3.ホストマシン（仮想OS）でビルド
<div class="code-frame" data-lang="text" data-sourcepos="54:1-56:3"><div class="highlight"><pre><code>docker compose build
</code></pre></div></div>
4.Dockerコンテナ内でViteを利用してVueアプリを作成（Vueを指定し、プロジェクト名は今回は「vue-vite-sample」とした）
<div class="code-frame" data-lang="text" data-sourcepos="59:1-61:3"><div class="highlight"><pre><code>docker-compose run frontend npm run vite
</code></pre></div></div>
5.Dockerfileとcompose.ymlに追記する
<div class="code-frame" data-lang="Dockerfile" data-sourcepos="64:1-86:3"><div class="highlight"><pre><code>FROM amazonlinux:2023

# dnfのアップデート
RUN dnf update -y

# Node.jsのインストール
RUN curl -sL https://rpm.nodesource.com/setup_20.x | bash - &amp;&amp; \
    dnf install -y nodejs

# Viteのインストール
RUN npm install -g vite

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

# 追記
# プロジェクトのコピー
COPY vue-vite-sample/ ./

# ポート番号5173でコンテナを公開
EXPOSE 5173
</code></pre></div></div>
<div class="code-frame" data-lang="yaml" data-sourcepos="88:1-104:3">
<div class="code-lang">compose.yml</div>
<div class="highlight"><pre><code>services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    volumes:
      - ./vue-vite-sample:/app:cached
      - node_modules:/app/node_modules
    tty: true
    ports:
      - '5173:5173'
    command: npm run dev
volumes:
  node_modules:
</code></pre></div>
</div>
6.vite.config.tsを書き換え（ホストではなく外部公開するため）
<div class="code-frame" data-lang="typescript" data-sourcepos="107:1-121:3"><div class="highlight"><pre><code>import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 外部公開
    host: '0.0.0.0',
    // 立ち上げる際のポートを変更できます。
    port: 5173
  }
})
</code></pre></div></div>
7.再度ビルドする
<div class="code-frame" data-lang="text" data-sourcepos="124:1-126:3"><div class="highlight"><pre><code>docker compose build --no-cache
</code></pre></div></div>
8.コンテナの立ち上げ
<div class="code-frame" data-lang="text" data-sourcepos="129:1-131:3"><div class="highlight"><pre><code>docker compose up
</code></pre></div></div>
9.IPとポートを指定してアクセス
<div class="code-frame" data-lang="text" data-sourcepos="134:1-136:3"><div class="highlight"><pre><code>http://xxx.xxx.xxx.xxx:5173/
</code></pre></div></div>
<a href="https://camo.qiitausercontent.com/dd2f4108b7383d62da116291d7bf0fb4ee6da2d4/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3738313233322f64366532306132662d346662312d306165312d346665632d6134633736313462633033652e6a706567" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fd6e20a2f-4fb1-0ae1-4fec-a4c7614bc03e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e796b03a424c67ca427df2dd15de1777" alt="rapture_20230920124712.jpg" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/d6e20a2f-4fb1-0ae1-4fec-a4c7614bc03e.jpeg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F781232%2Fd6e20a2f-4fb1-0ae1-4fec-a4c7614bc03e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=dbc1393b26ce11dec97c63fcccb31485 1x" loading="lazy"></a>

Vue3 + Viteを仮想OS上でDockerを利用して作成

## 概要
Next.js（v13.4.12）の環境でMiddlewareを利用してIP制限をかける方法を共有します。

## サンプルコード
```TypeScript:/src/middleware.ts
import { NextRequest, NextResponse } from 'next/server'

// IPホワイトリスト
const IP_WHITELIST = ['xxx.xxx.xxx.xxx', 'yyy.yyy.yyy.yyy']; // IPアドレスをマスクしています。

export async function middleware(request: NextRequest) {
  const res = NextResponse.next();

  // IPアドレスを取得
  let ip: string = request.ip ?? request.headers.get('x-real-ip') ?? '';

  // プロキシ経由の場合、x-forwarded-forヘッダーからIPアドレスを取得
  if(!ip && forwardedFor){
    const forwardedFor = request.headers.get('x-forwarded-for');
    ip = forwardedFor.split(',').at(0) ?? 'Unknown';
  }

  // 取得したIPアドレスがホワイトリストに含まれているかチェックし、含まれていない場合はアクセス拒否
  if(!IP_WHITELIST.includes(ip)){
      return NextResponse.redirect('https://example.com/access-denied'); // アクセス拒否のページにリダイレクト
  }

  return res;
}
```

## 実装の背景
実装するアプリは想定している使用者が限定的でサービスとして利用者を伸ばすものではなかったため、簡単にセキュリティを堅牢にするためにホワイトリスト形式でIP制限をかけることになりました。

実際に実装を進めると、IPの取得にてこずりました。

## サンプルリポジトリ・サンプルアプリケーション
https://github.com/ryosuke-horie/middleware-ip-limit

Vercelへデプロイしました。
https://middleware-ip-limit-one.vercel.app/

ホワイトリストに指定したIPからアクセスするとNextjsのWelcomeページが表示できますが、それ以外のIPから遷移すれば、「Access Denied」と表示されるようになります。


<h2 data-sourcepos="1:1-1:9">
<a href="#%E6%A6%82%E8%A6%81"></a>概要</h2>
Next.js（v13.4.12）の環境でMiddlewareを利用してIP制限をかける方法を共有します。
<h2 data-sourcepos="4:1-4:24">
<a href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89"></a>サンプルコード</h2>
<div class="code-frame" data-lang="TypeScript" data-sourcepos="5:1-30:3">
<div class="code-lang">/src/middleware.ts</div>
<div class="highlight"><pre><code>import { NextRequest, NextResponse } from 'next/server'

// IPホワイトリスト
const IP_WHITELIST = ['xxx.xxx.xxx.xxx', 'yyy.yyy.yyy.yyy']; // IPアドレスをマスクしています。

export async function middleware(request: NextRequest) {
 const res = NextResponse.next();

 // IPアドレスを取得
 let ip: string = request.ip ?? request.headers.get('x-real-ip') ?? '';

 // プロキシ経由の場合、x-forwarded-forヘッダーからIPアドレスを取得
 if(!ip &amp;&amp; forwardedFor){
 const forwardedFor = request.headers.get('x-forwarded-for');
 ip = forwardedFor.split(',').at(0) ?? 'Unknown';
 }

 // 取得したIPアドレスがホワイトリストに含まれているかチェックし、含まれていない場合はアクセス拒否
 if(!IP_WHITELIST.includes(ip)){
 return NextResponse.redirect('https://example.com/access-denied'); // アクセス拒否のページにリダイレクト
 }

 return res;
}
</code></pre></div>
</div>
<h2 data-sourcepos="32:1-32:18">
<a href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E8%83%8C%E6%99%AF"></a>実装の背景</h2>
実装するアプリは想定している使用者が限定的でサービスとして利用者を伸ばすものではなかったため、簡単にセキュリティを堅牢にするためにホワイトリスト形式でIP制限をかけることになりました。
実際に実装を進めると、IPの取得にてこずりました。
<h2 data-sourcepos="37:1-37:69">
<a href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3"></a>サンプルリポジトリ・サンプルアプリケーション</h2>
<iframe id="qiita-embed-content__c2dc28287ec39689d7762c4a3124caf3" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__c2dc28287ec39689d7762c4a3124caf3" data-content="https%3A%2F%2Fgithub.com%2Fryosuke-horie%2Fmiddleware-ip-limit" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

Vercelへデプロイしました。 
<a href="https://middleware-ip-limit-one.vercel.app/" class="autolink" rel="nofollow noopener" target="_blank">https://middleware-ip-limit-one.vercel.app/</a>
ホワイトリストに指定したIPからアクセスするとNextjsのWelcomeページが表示できますが、それ以外のIPから遷移すれば、「Access Denied」と表示されるようになります。

Next.jsでホワイトリスト形式のIP制限をかける


## pm2を利用した手順

1. `pm2`のインストール
	```
	npm install -g pm2 
	```

2. Nestjsを`pm2`で起動
	```
	pm2 start npm --name your-app-name -- run start
	```
3.  `pm2` のプロセスリストを確認してアプリケーションが実行されていることを確認
	```
	pm2 list
	```
4.  `pm2` で起動したアプリケーションを自動的に再起動するように設定(コマンドを実行するように指示を受けるのでコピペして実行する)
	```
	pm2 startup
	```
5. 現在の `pm2` のプロセスリストを保存
	```
	pm2 save
	```
## pm2とは?
Node.jsをバックグラウンドで永続的に実行するためのプロセスマネージャ。
以下の特徴を持つ。
1. **永続性**: システムが再起動した後でも、`pm2` で管理されているアプリケーションは自動的に再起動されます。
2. **クラッシュリカバリ**: アプリケーションが何らかの理由でクラッシュした場合、自動的に再起動されます。
3. **ロードバランサ**: 複数のプロセスインスタンスを起動してロードバランシングを実施することができます。
4. **ログ管理**: アプリケーションのログを一元的に取得・管理することができます。
5. **モニタリング**: 実行中のアプリケーションのパフォーマンスやリソースの利用状況をリアルタイムで監視できます 

## Gitで更新を行う場合
1. `git pull origin main`
2. `npm install`
3. `pm2 restart your-app-name`
*pm2で永続化しているため、pm2をリスタートしないと変更が適用されない。


<h2 data-sourcepos="2:1-2:27">
<a href="#pm2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E6%89%8B%E9%A0%86"></a>pm2を利用した手順</h2>
<ol data-sourcepos="4:1-24:4">
<li data-sourcepos="4:1-8:0">
<code>pm2</code>のインストール
<div class="code-frame" data-lang="text" data-sourcepos="5:2-7:4"><div class="highlight"><pre><code>npm install -g pm2 
</code></pre></div></div>
</li>
<li data-sourcepos="9:1-12:4">
Nestjsを<code>pm2</code>で起動
<div class="code-frame" data-lang="text" data-sourcepos="10:2-12:4"><div class="highlight"><pre><code>pm2 start npm --name your-app-name -- run start
</code></pre></div></div>
</li>
<li data-sourcepos="13:1-16:4">
<code>pm2</code> のプロセスリストを確認してアプリケーションが実行されていることを確認
<div class="code-frame" data-lang="text" data-sourcepos="14:2-16:4"><div class="highlight"><pre><code>pm2 list
</code></pre></div></div>
</li>
<li data-sourcepos="17:1-20:4">
<code>pm2</code> で起動したアプリケーションを自動的に再起動するように設定(コマンドを実行するように指示を受けるのでコピペして実行する)
<div class="code-frame" data-lang="text" data-sourcepos="18:2-20:4"><div class="highlight"><pre><code>pm2 startup
</code></pre></div></div>
</li>
<li data-sourcepos="21:1-24:4">
現在の <code>pm2</code> のプロセスリストを保存
<div class="code-frame" data-lang="text" data-sourcepos="22:2-24:4"><div class="highlight"><pre><code>pm2 save
</code></pre></div></div>
</li>
</ol>
<h2 data-sourcepos="25:1-25:13">
<a href="#pm2%E3%81%A8%E3%81%AF"></a>pm2とは?</h2>
Node.jsをバックグラウンドで永続的に実行するためのプロセスマネージャ。 
以下の特徴を持つ。
<ol data-sourcepos="28:1-33:0">
<li data-sourcepos="28:1-28:153">
永続性: システムが再起動した後でも、<code>pm2</code> で管理されているアプリケーションは自動的に再起動されます。</li>
<li data-sourcepos="29:1-29:150">
クラッシュリカバリ: アプリケーションが何らかの理由でクラッシュした場合、自動的に再起動されます。</li>
<li data-sourcepos="30:1-30:150">
ロードバランサ: 複数のプロセスインスタンスを起動してロードバランシングを実施することができます。</li>
<li data-sourcepos="31:1-31:114">
ログ管理: アプリケーションのログを一元的に取得・管理することができます。</li>
<li data-sourcepos="32:1-33:0">
モニタリング: 実行中のアプリケーションのパフォーマンスやリソースの利用状況をリアルタイムで監視できます</li>
</ol>
<h2 data-sourcepos="34:1-34:30">
<a href="#git%E3%81%A7%E6%9B%B4%E6%96%B0%E3%82%92%E8%A1%8C%E3%81%86%E5%A0%B4%E5%90%88"></a>Gitで更新を行う場合</h2>
<ol data-sourcepos="35:1-38:100">
<li data-sourcepos="35:1-35:25"><code>git pull origin main</code></li>
<li data-sourcepos="36:1-36:16"><code>npm install</code></li>
<li data-sourcepos="37:1-38:100">
<code>pm2 restart your-app-name</code> 
*pm2で永続化しているため、pm2をリスタートしないと変更が適用されない。</li>
</ol>

Blog

Qiita Posts