<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Docker | きいちログ</title>
	<atom:link href="https://wptech.kiichiro.work/tag/docker/feed/" rel="self" type="application/rss+xml" />
	<link>https://wptech.kiichiro.work</link>
	<description>WordPressとかAWSとかPHPとか</description>
	<lastBuildDate>Thu, 14 Nov 2024 13:15:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>【WordPress】ホストネットワーキングモードでWP-Cronをちゃんと動かす</title>
		<link>https://wptech.kiichiro.work/793kyf6xrh/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Wed, 18 Sep 2024 15:46:05 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=3256</guid>

					<description><![CDATA[先日、Docker Desktop でもホストネットワーキングモードがサポートされたようです。 Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>先日、Docker Desktop でもホストネットワーキングモードがサポートされたようです。</p>




<a rel="noopener" href="https://www.publickey1.jp/blog/24/docker_desktoplocalhostwsl2docker_desktop_434.html" title="Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小など新機能、Docker Desktop 4.34正式リリース" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://www.publickey1.jp/2024/docker434ga01.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Docker Desktop内のコンテナに対して「localhost」でアクセス可能に、WSL2のストレージ領域を自動で縮小など新機能、Docker Desktop 4.34正式リリース</div><div class="blogcard-snippet external-blogcard-snippet">Docker社は、WindowsやMac、Linuxに手軽にDockerコンテナ環境を導入し利用できるソフトウェアであるDocker Desktopの最新版「Docker Desktop 4.34」正式版のリリースを発表しました。 Dock...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://www.publickey1.jp/blog/24/docker_desktoplocalhostwsl2docker_desktop_434.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">www.publickey1.jp</div></div></div></div></a>



<p>どのようなときにホストネットワーキングモードの恩恵を受けられるか考えていたのですが、ローカル環境かつ Nginx + PHP-FPM 構成で WP-Cron を使った時に良さそうだなと思ったのでやってみました。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">WP-Cron が機能しない問題</a></li><li><a href="#toc2" tabindex="0">やってみた</a></li><li><a href="#toc3" tabindex="0">まとめと感想</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">WP-Cron が機能しない問題</span></h2>



<p>ローカル環境で Nginx + PHP-FPM 構成で WordPress を動かそうとすると、WP-Cron が機能しなくなるというのは、誰もが一度は通った道かと思います。</p>



<p>WP-Cron が機能しなくなる理由を簡単に説明すると、以下のような流れになります。</p>



<ol class="wp-block-list">
<li><strong>WP-Cron は WordPress へのリクエストによってトリガーされる</strong><br>WP-Cron はページへのアクセスがあった際にスケジュールを確認し、必要があれば <code>site_url</code> 配下のエンドポイントへ HTTP リクエストを送信します。</li>



<li><strong>site_url がローカル環境では localhost になる</strong><br>ローカル環境で WordPress を実行しているため、<code>site_url</code> は <code>http://localhost</code> になることが多いです。そのため、WP-Cron は <code>localhost</code> に対してリクエストを送信することになります。</li>



<li><strong>PHP-FPM コンテナで localhost にリクエストをすると、自分自身に送信される</strong><br>Docker コンテナで <code>localhost</code> はコンテナ自身を示します。</li>



<li><strong>PHP-FPM コンテナには HTTP サーバーは開かれていない</strong><br>PHP-FPM コンテナは HTTP リクエストを受け付けるポート (通常は 80 番) が開かれていません。よって、リクエストが失敗し、WP-Cron が実行できなくなります。</li>
</ol>



<p>要するに、<code>localhost</code> が示す先がコンテナ自身になってしまうということが原因ですので、WordPress を実行するサーバーの IP アドレスにドメインが関連付けられている場合 (本番環境など) では発生し得ません。</p>



<p>WP-Cron が機能していないことは管理画面の通知から窺い知ることが出来ます。<a href="https://ja.wordpress.org/plugins/wp-crontrol/">WP Crontrol</a> をインストールした環境であれば設定画面で確認出来ます。</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="195" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1024x195.png" alt="WP Crontrol の通知で、WP-Cron が機能しないことを示す「cURL error 7: Failed to connect to localhost port 80 after 0 ms: Couldn't connect to server。」が表示されている" class="wp-image-3309" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1024x195.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-300x57.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-768x146.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-1536x292.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/3369aed6f02f6b45398f6124399a98a1-2048x389.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>cURL error 7: Failed to connect to localhost port 80 after 0 ms: Couldn&#39;t connect to server。</code></pre></div>



<p>この事象の回避方法としては、HTTP リクエストを投げる先を <code>cron_request</code> フィルターフックで指定しているので、<code>host.docker.internal</code> などに書き換えるなどがあります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="cron.php" data-lang="PHP" data-line="4"><code>$cron_request = apply_filters(
	&#39;cron_request&#39;,
	array(
		&#39;url&#39;  =&gt; add_query_arg( &#39;doing_wp_cron&#39;, $doing_wp_cron, site_url( &#39;wp-cron.php&#39; ) ),
		&#39;key&#39;  =&gt; $doing_wp_cron,
		&#39;args&#39; =&gt; array(
			&#39;timeout&#39;   =&gt; 0.01,
			&#39;blocking&#39;  =&gt; false,
			/** This filter is documented in wp-includes/class-wp-http-streams.php */
			&#39;sslverify&#39; =&gt; apply_filters( &#39;https_local_ssl_verify&#39;, false ),
		),
	),
	$doing_wp_cron
);</code></pre></div>



<p>ただ、ローカル環境のみで発生する事象に対して手を加えるのは、若干の気持ち悪さが残ります。</p>



<p>Docker のホストネットワーキングモードを使用すれば、<code>localhost</code> はホストを指すことになるので、上記の問題が解消しそうです。</p>



<h2 class="wp-block-heading"><span id="toc2">やってみた</span></h2>



<p>まずは、ホストネットワーキングモードを Docker Desktop 側で有効化します。手順は以下を参考にしました。</p>




<a rel="noopener" href="https://docs.docker.com/engine/network/drivers/host/#docker-desktop" title="Host network driver" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://docs.docker.com/images/thumbnail.webp" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Host network driver</div><div class="blogcard-snippet external-blogcard-snippet">All about exposing containers on the Docker host&#039;s network</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.docker.com/engine/network/drivers/host/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.docker.com</div></div></div></div></a>



<p>次に、Docker で Nginx + PHP-FPM + WordPress の環境を作ってみます。compose.yaml は以下です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="compose.yaml" data-line="11,21,27"><code>services:
   db:
     image: mysql:8.0
     volumes:
       - db_data:/var/lib/mysql
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
     network_mode: &quot;host&quot;

   nginx:
    image: nginx:1.27.1-bookworm
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    volumes_from:
      - wordpress-fpm
    depends_on:
      - wordpress-fpm
    network_mode: &quot;host&quot;

   wordpress-fpm:
     image: wordpress:6.6.2-php8.1-fpm
     depends_on:
       - db
     network_mode: &quot;host&quot;

volumes:
    db_data:
</code></pre></div>



<p>ここで <code>network_mode: "host"</code> を指定することでホストネットワーキングモードが利用できます。</p>



<p>Nginx の default.conf は以下を用意しました。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="default.conf" data-line="23"><code>server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    root /var/www/html;
    index index.php;

    location / {
        index  index.php;
    }

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php$ {
        fastcgi_pass   localhost:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}</code></pre></div>



<p>上記のファイルを作成出来たら <code>docker compose up</code> で立ち上げ、ブラウザから <code>localhost</code> にアクセスします。あとは適当にポチポチと設定をしてログインします。</p>



<p>データベースの設定での注意点として、ホスト名は <code>localhost</code> ではなく <code>127.0.0.1</code> を指定してください。</p>




<a rel="noopener" href="https://dev.mysql.com/doc/refman/8.0/ja/connecting.html" title="MySQL :: MySQL 8.0 &#12522;&#12501;&#12449;&#12524;&#12531;&#12473;&#12510;&#12491;&#12517;&#12450;&#12523; :: 4.2.4 &#12467;&#12510;&#12531;&#12489;&#12458;&#12503;&#12471;&#12519;&#12531;&#12434;&#20351;&#29992;&#12375;&#12383; MySQL Server &#12408;&#12398;&#25509;&#32154;" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdev.mysql.com%2Fdoc%2Frefman%2F8.0%2Fja%2Fconnecting.html?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">MySQL :: MySQL 8.0 &#12522;&#12501;&#12449;&#12524;&#12531;&#12473;&#12510;&#12491;&#12517;&#12450;&#12523; :: 4.2.4 &#12467;&#12510;&#12531;&#12489;&#12458;&#12503;&#12471;&#12519;&#12531;&#12434;&#20351;&#29992;&#12375;&#12383; MySQL Server &#12408;&#12398;&#25509;&#32154;</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://dev.mysql.com/doc/refman/8.0/ja/connecting.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">dev.mysql.com</div></div></div></div></a>



<p>ログインしてダッシュボードまで辿り着いたら、WP-Cron の確認をします。WP Crontrol をインストールして設定画面を見てみると「cURL error 7: ~」のメッセージが表示されていないことが確認出来ます。</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="173" data-id="3336" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1024x173.png" alt="WP Crontrol の Cron イベント画面でエラー通知が表示されていない" class="wp-image-3336" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1024x173.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-300x51.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-768x130.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-1536x260.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/9bee04000217b9bc26441371a8ca5acd-2048x347.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</figure>



<p>一覧から適当なイベントの「今すぐ実行」をクリックすると通知が表示され、正常に実行されたことが確認出来ます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="187" src="https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1024x187.png" alt="WP Crontrol の Cron イベント画面で正常終了した通知メッセージが表示されている" class="wp-image-3337" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1024x187.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-300x55.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-768x141.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-1536x281.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/09/6f9e18e0d3dee9917f96a7c456ae717b-2048x375.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading"><span id="toc3">まとめと感想</span></h2>



<p>Docker Desktop でホストネットワーキングモードがサポートされたと聞いたときに真っ先にこのネタが浮かびましたが、一般的には安定感の無い WP-Cron をここまでして使いたいモチベーションは無いだろうなとも思いました。個人的には長年抱え続けてきた気持ち悪さが解決したので満足度は高いです。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Lambda Web AdapterでRemixアプリケーションをサーバーレス化してCDKでデプロイする</title>
		<link>https://wptech.kiichiro.work/617bivwxur/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Thu, 11 Jul 2024 09:08:50 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[AWS]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Lambda]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[Remix]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=3178</guid>

					<description><![CDATA[既存の Web フレームワークを Lambda に組み込む方法として Lambda Web Adapter というのがあります。 Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化す [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>既存の Web フレームワークを Lambda に組み込む方法として Lambda Web Adapter というのがあります。</p>




<a rel="noopener" href="https://aws.amazon.com/jp/builders-flash/202301/lambda-web-adapter" title="Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する (2025 年改訂版)  - 変化を求めるデベロッパーを応援するウェブマガジン | AWS" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/2025/202504/thumb_lambda-web-adapter_2025.eaa3dee4029c2885d864b4da103ab18cd6b2b4f9.jpg" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する (2025 年改訂版)  - 変化を求めるデベロッパーを応援するウェブマガジン | AWS</div><div class="blogcard-snippet external-blogcard-snippet">VM やコンテナ用に実装されたウェブアプリを、ほとんどそのまま Lambda でも動かせる AWS Lambda Web Adapter について、新しい実装パターンを含めた使い方、仕組みや対応する Web フレームワーク、性能をご紹介しま...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://aws.amazon.com/jp/builders-flash/202301/lambda-web-adapter/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">aws.amazon.com</div></div></div></div></a>




<a rel="noopener" href="https://github.com/awslabs/aws-lambda-web-adapter" title="GitHub - awslabs/aws-lambda-web-adapter: Run web applications on AWS Lambda" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://opengraph.githubassets.com/d477a0d6d3e245d785d915f1b8b645c121d6d8cd3e618243358d4ae6e1b114cb/awslabs/aws-lambda-web-adapter" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">GitHub - awslabs/aws-lambda-web-adapter: Run web applications on AWS Lambda</div><div class="blogcard-snippet external-blogcard-snippet">Run web applications on AWS Lambda. Contribute to awslabs/aws-lambda-web-adapter development by creating an account on G...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/awslabs/aws-lambda-web-adapter" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<p>その仕組みですが、API Gateway などの統合先から受信したイベントをフレームワークの手前にある Lambda Web Adapter のエントリポイントが HTTP リクエストに変換して、フレームワークに渡してくれる、というイメージで良さそうです。</p>



<p>公式の実装例では、Node.js であれば Next.js と Express.js が対応していますが、HTTP であればどのようなフレームワークも動作するはずです。</p>



<p>今回はこれを使って Remix アプリをサーバーレス化してみました。既に作ったものは GitHub にあげてあります。</p>




<a rel="noopener" href="https://github.com/ShotaroMuraoka/cdk-serverless-remix" title="GitHub - ShotaroMuraoka/cdk-serverless-remix: Remix アプリケーションを Lambda Web Adapter でサーバーレス化した CDK" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://opengraph.githubassets.com/7e2f8909af7deb175a15b54c16dbbb4c74009bec87bc2f528dea48788888602f/ShotaroMuraoka/cdk-serverless-remix" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">GitHub - ShotaroMuraoka/cdk-serverless-remix: Remix アプリケーションを Lambda Web Adapter でサーバーレス化した CDK</div><div class="blogcard-snippet external-blogcard-snippet">Remix アプリケーションを Lambda Web Adapter でサーバーレス化した CDK. Contribute to ShotaroMuraoka/cdk-serverless-remix development by crea...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/ShotaroMuraoka/cdk-serverless-remix" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">CDKの準備</a></li><li><a href="#toc2" tabindex="0">Remixアプリケーションの作成</a></li><li><a href="#toc3" tabindex="0">デプロイ</a></li><li><a href="#toc4" tabindex="0">参考資料</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">CDKの準備</span></h2>



<p>デプロイの方法は CDK にしました。init で新しいプロジェクトを作成しておきます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>$ cdk --version
2.148.0 (build e5740c0)

$ cdk init app --language typescript</code></pre></div>



<p>今回は HTTP リクエストを受け付けるので、API Gateway と統合します。Stack は以下からお借りしました。</p>



<figure class="wp-block-embed is-type-rich is-provider-hatena-blog wp-block-embed-hatena-blog"><div class="wp-block-embed__wrapper">
<iframe title="AWS Lambda Web AdapterでServerless Next.jsを実現する  - Activ8 Tech Blog" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fsynamon.hatenablog.com%2Fentry%2F2023%2F07%2F18%2F080000" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
</div></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-ts" data-file="my-lambda-stack.ts" data-lang="TypeScript"><code>import * as cdk from &#39;aws-cdk-lib&#39;;
import { Construct } from &#39;constructs&#39;;
import * as lambda from &#39;aws-cdk-lib/aws-lambda&#39;;
import { Platform } from &#39;aws-cdk-lib/aws-ecr-assets&#39;;
import * as apigw from &#39;aws-cdk-lib/aws-apigatewayv2&#39;;
import { HttpLambdaIntegration } from &#39;aws-cdk-lib/aws-apigatewayv2-integrations&#39;;

export class MyLambdaStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const handler = new lambda.DockerImageFunction(this, &#39;Handler&#39;, {
      code: lambda.DockerImageCode.fromImageAsset(&#39;./my-remix&#39;, { // Remix アプリケーションのディレクトリ名とする
        platform: Platform.LINUX_AMD64,
      }),
      memorySize: 256,
      timeout: cdk.Duration.seconds(30),
    });

    new apigw.HttpApi(this, &#39;Api&#39;, {
      apiName: &#39;MyLambdaRemix&#39;,
      defaultIntegration: new HttpLambdaIntegration(&#39;Integration&#39;, handler),
    });
  }
}
</code></pre></div>



<h2 class="wp-block-heading"><span id="toc2">Remixアプリケーションの作成</span></h2>



<p>CDK のプロジェクトルートで Remix アプリを作成します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>$ npx create-remix@latest</code></pre></div>



<p>Remix アプリのルートに Dockerfile を作成します。Remix に対応した Dockerfile を作成したことがなかったので、以下を参考にそれっぽく書いてみました。</p>




<a rel="noopener" href="https://github.com/clintonwoo/hackernews-remix-react/blob/main/Dockerfile" title="hackernews-remix-react/Dockerfile at main · clintonwoo/hackernews-remix-react" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://opengraph.githubassets.com/9f4b585a4145808d862d74acfde120c24aa19eb58f0d39f34c2549a48ecc5e13/clintonwoo/hackernews-remix-react" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">hackernews-remix-react/Dockerfile at main · clintonwoo/hackernews-remix-react</div><div class="blogcard-snippet external-blogcard-snippet">Hacker News clone written with universal TypeScript, using React and Remix. - clintonwoo/hackernews-remix-react</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/clintonwoo/hackernews-remix-react/blob/main/Dockerfile" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash" data-line="23, 40"><code>FROM node:22-bookworm-slim AS base

FROM base AS deps
RUN mkdir /app
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

FROM base AS builder

RUN mkdir /app
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NODE_ENV production
RUN npm run build

FROM base AS runner

# lambda-web-adapter
COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:0.5.0 /lambda-adapter /opt/extensions/lambda-adapter

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 remix

RUN mkdir /app
WORKDIR /app

RUN chown remix:nodejs ./
USER remix

COPY --from=builder --chown=remix:nodejs /app/node_modules ./node_modules
COPY --from=builder --chown=remix:nodejs /app/build ./build
COPY --from=builder --chown=remix:nodejs /app/public ./public
COPY --from=builder --chown=remix:nodejs /app/package.json /app/package-lock.json ./

ENV NODE_ENV production
ENV PORT 3000
EXPOSE 3000

CMD [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]</code></pre></div>



<p>ここでは Lambda Web Adapter のために難しい記述をする必要はありません。ローカルでも ECS でも動くコンテナイメージであれば、Lambda Web Adapter で動作するようです。</p>



<p>追記が必要なのは Lambda の extension を追加するというところのみです。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:0.5.0 /lambda-adapter /opt/extensions/lambda-adapter</code></pre></div>



<p>また、デフォルトでは 8080 でポートを Listen しているので、変更する場合は PORT を指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>ENV PORT 3000</code></pre></div>



<h2 class="wp-block-heading"><span id="toc3">デプロイ</span></h2>



<p>CDK のルートディレクトリでデプロイを実行します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>$ cdk deploy</code></pre></div>



<p>管理コンソールから API Gateway の画面を確認すると、作成した API Gateway のエンドポイントが作成されています。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="384" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-1024x384.png" alt="AWS の管理コンソールで API Gateway &gt; API &gt; MyLambdaRemixの画面を開いている。エンドポイントが有効になっており、リンクが表示されている" class="wp-image-3225" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-1024x384.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-300x112.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-768x288.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-1536x576.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/24ba3ff1ffab27bfd8a591fc1c9770c3-2048x768.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>デフォルトのエンドポイントの URL をクリックして Remix アプリの画面が表示されていれば OK です。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="952" height="502" src="https://wptech.kiichiro.work/wp-content/uploads/2024/07/5a7c608aaf71c8c8671576d79db1798d.png" alt="Remix の初期の画面で、Welcome to Remix と表示されている" class="wp-image-3228" srcset="https://wptech.kiichiro.work/wp-content/uploads/2024/07/5a7c608aaf71c8c8671576d79db1798d.png 952w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/5a7c608aaf71c8c8671576d79db1798d-300x158.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2024/07/5a7c608aaf71c8c8671576d79db1798d-768x405.png 768w" sizes="(max-width: 952px) 100vw, 952px" /></figure>



<h2 class="wp-block-heading"><span id="toc4">参考資料</span></h2>




<a rel="noopener" href="https://serverless.co.jp/blog/g30vzpio0ww" title="Dockerを使わない、Remix / Next.js 14 など最新ウェブフレームワークのAWS完全サーバーレス構成と環境構築方法 | ブログ | Serverless Operations" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://images.microcms-assets.io/assets/7c0b324145eb4ee6bd26d44022795cf4/219c94fc1d5b45038289ecdb40b09463/overview.png?w=1200&#038;fm=webp&#038;q=80" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Dockerを使わない、Remix / Next.js 14 など最新ウェブフレームワークのAWS完全サーバーレス構成と環境構築方法 | ブログ | Serverless Operations</div><div class="blogcard-snippet external-blogcard-snippet">（※ 2025/01/31 追記）この記事の後続編として、React Router v7 と Next.js 15 を利用する構成の詳細な構築手順について、こちらの記事（</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://serverless.co.jp/blog/g30vzpio0ww" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">serverless.co.jp</div></div></div></div></a>



<p></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>PhpStormで「Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?」が出たときの対処法</title>
		<link>https://wptech.kiichiro.work/37c8w1j5zy/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Tue, 30 May 2023 08:39:18 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[PHP]]></category>
		<guid isPermaLink="false">https://wptech.kiichiro.work/?p=1634</guid>

					<description><![CDATA[Docker Desktop for Macを使っている場合の話。 目次 問題結論と解決策参考リンク 問題 PhpStormでDocker用にインタプリターを構成してPHPUnitを実行したところ、以下のメッセージが表示 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Docker Desktop for Macを使っている場合の話。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-6" checked><label class="toc-title" for="toc-checkbox-6">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">問題</a></li><li><a href="#toc2" tabindex="0">結論と解決策</a></li><li><a href="#toc3" tabindex="0">参考リンク</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">問題</span></h2>



<p>PhpStormでDocker用にインタプリターを構成してPHPUnitを実行したところ、以下のメッセージが表示されました。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="142" src="https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334-1024x142.png" alt="Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? が発生し、phpunitが失敗する" class="wp-image-1637" srcset="https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334-1024x142.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334-300x42.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334-768x107.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334-1536x213.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/18f11e571a133aee218caef83066b334.png 1614w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?</code></pre></div>



<p>PhpStorm側の設定は何も変えておらず、解決に少し時間がかかったので備忘録として残しておきます。</p>



<h2 class="wp-block-heading"><span id="toc2">結論と解決策</span></h2>



<p>「Enable default Docker socket」 にチェックを入れてDocker Desktopを再起動してください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="402" src="https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-1024x402.png" alt="Docker Desktop Advanced settings" class="wp-image-1641" srcset="https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-1024x402.png 1024w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-300x118.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-768x301.png 768w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-1536x602.png 1536w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/3f5841b30d8bf84bc824b128ad6a5ea0-2048x803.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>PhpStormなどのツールとDockerを統合するには、Docker socketへのアクセスが必要となるそうです。Docker Desktop 4.18以降では、これの有効/無効を拡張設定から行うことができます。</p>



<figure class="wp-block-image aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2023/05/d00a043a755fb073264ea11a51e1890b.png" alt="phpunit成功" class="wp-image-1643" width="737" height="344" srcset="https://wptech.kiichiro.work/wp-content/uploads/2023/05/d00a043a755fb073264ea11a51e1890b.png 982w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/d00a043a755fb073264ea11a51e1890b-300x140.png 300w, https://wptech.kiichiro.work/wp-content/uploads/2023/05/d00a043a755fb073264ea11a51e1890b-768x358.png 768w" sizes="(max-width: 737px) 100vw, 737px" /></figure>



<p>設定を変更してPHPUnitを実行すると正常に終了しました。</p>



<h2 class="wp-block-heading"><span id="toc3">参考リンク</span></h2>



<ul class="wp-block-list">
<li><a href="https://docs.docker.com/desktop/mac/permission-requirements/">https://docs.docker.com/desktop/mac/permission-requirements/</a></li>



<li><a href="https://www.docker.com/blog/docker-desktop-4-18/">https://www.docker.com/blog/docker-desktop-4-18/</a></li>



<li><a href="https://www.techtarget.com/searchitoperations/tip/Get-informed-of-the-risks-associated-with-dockersock#:~:text=A%20socket%20is%20an%20endpoint,sock%20file.">https://www.techtarget.com/searchitoperations/tip/Get-informed-of-the-risks-associated-with-dockersock#:~:text=A%20socket%20is%20an%20endpoint,sock%20file.</a></li>
</ul>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Laravel】CorcelでWordPressの投稿をLaravelで使う</title>
		<link>https://wptech.kiichiro.work/81qpjbjun6/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Sun, 13 Nov 2022 16:44:14 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Laravel]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=647</guid>

					<description><![CDATA[WordPressの投稿をLaravelで扱ってみます。 Corcel GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP appl [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPressの投稿をLaravelで扱ってみます。</p>



<h1 class="wp-block-heading">Corcel</h1>




<a rel="noopener" href="https://github.com/corcel/corcel" title="GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP application" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/cocoon-resources/blog-card-cache/44ee7dbcd5b1b2946474fc25612012fd." alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">GitHub - corcel/corcel: Use WordPress backend with Laravel or any PHP application</div><div class="blogcard-snippet external-blogcard-snippet">Use WordPress backend with Laravel or any PHP application - corcel/corcel</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/corcel/corcel" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<p>CorcelはEloquent ORMを利用してWordPressのデータを操作するインタフェースを提供しています。WordPresのデータベースへは直接接続することになります。<br>これまで、静的化WordPressの文脈でwp-json(WP REST API)を利用したデータ操作は見たことがありましたが、Corcelであればwp-jsonの仕様を意識することなく利用することが可能なようです。</p>



<h1 class="wp-block-heading">環境構築</h1>



<p>LaravelとWordPressの環境をそれぞれ構築する必要があります。構築が楽なのでDockerを利用します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-8" checked><label class="toc-title" for="toc-checkbox-8">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"></li><li><a href="#toc1" tabindex="0">Laravel</a></li><li><a href="#toc2" tabindex="0">WordPress</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Laravel</span></h2>



<p>Laravelのプロジェクトを新規に作成します (割愛)。</p>



<p>composerでCorcelをinstallします。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ composer require jgrossi/corcel</code></pre></div>



<p>serveはsailで実施するとdocker-compose.ymlで必要なnetworksを定義してくれるので、それを使うのが良いかと思います。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ ./vendor/bin/sail up -d
$ ./vendor/bin/sail artisan sail:publish</code></pre></div>



<p>configは <code>corcel.php</code> と <code>database.php</code> を修正します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="config/corcel.php" data-lang="PHP"><code>&#39;connection&#39; =&gt; &#39;wordpress&#39;,</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="config/database.php" data-lang="PHP"><code>// &#39;connections&#39; に以下を追加
&#39;wordpress&#39; =&gt; [
    &#39;driver&#39; =&gt; &#39;mysql&#39;,
    &#39;host&#39; =&gt; env(&#39;WP_DB_HOST&#39;, &#39;127.0.0.1&#39;),
    &#39;port&#39; =&gt; env(&#39;WP_DB_PORT&#39;, &#39;3306&#39;),
    &#39;database&#39; =&gt; env(&#39;WP_DB_DATABASE&#39;, &#39;wordpress&#39;),
    &#39;username&#39; =&gt; env(&#39;WP_DB_USERNAME&#39;, &#39;wordpress&#39;),
    &#39;password&#39; =&gt; env(&#39;WP_DB_PASSWORD&#39;, &#39;&#39;),
    &#39;charset&#39; =&gt; &#39;utf8&#39;,
    &#39;collation&#39; =&gt; &#39;utf8_unicode_ci&#39;,
    &#39;prefix&#39; =&gt; &#39;wp_&#39;,
    &#39;strict&#39; =&gt; false,
    &#39;engine&#39; =&gt; null,
],</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env"><code>WP_DB_CONNECTION=mysql
WP_DB_HOST=db
WP_DB_PORT=3306
WP_DB_DATABASE=wordpress
WP_DB_USERNAME=wordpress
WP_DB_PASSWORD=wordpress</code></pre></div>



<h2 class="wp-block-heading"><span id="toc2">WordPress</span></h2>



<p>公式にWordPressのクイックスタートがあるのでそれを利用します。</p>




<a rel="noopener" href="https://docs.docker.jp/compose/wordpress.html" title="&#12463;&#12451;&#12483;&#12463;&#12473;&#12479;&#12540;&#12488;: Compose &#12392; WordPress &mdash; Docker-docs-ja 24.0 &#12489;&#12461;&#12517;&#12513;&#12531;&#12488;" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fdocs.docker.jp%2Fcompose%2Fwordpress.html?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">&#12463;&#12451;&#12483;&#12463;&#12473;&#12479;&#12540;&#12488;: Compose &#12392; WordPress &mdash; Docker-docs-ja 24.0 &#12489;&#12461;&#12517;&#12513;&#12531;&#12488;</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://docs.docker.jp/compose/wordpress.html" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">docs.docker.jp</div></div></div></div></a>



<p>networksは <code><strong>{Laravelのディレクトリ名}_sail</strong></code> を指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>version: &#39;3&#39;

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - external

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - &quot;8000:80&quot;
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    networks:
      - external
networks:
  external:
    driver: bridge
    name: {Laravelのディレクトリ名}_sail
volumes:
  db_data:</code></pre></div>



<h1 class="wp-block-heading">実行</h1>



<p>リクエストに対してWordPressの投稿を出力させてみます。コンテンツはWordPressの初期コンテンツを利用します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="routes/web.php" data-lang="PHP"><code>Route::get(&#39;posts/{post_id}&#39;, function (int $postId) {
    $post = Post::query()-&gt;find($postId);
    return view(&#39;posts.show&#39;, compact(&#39;post&#39;));
});</code></pre></div>



<p>WordPressの投稿は <code>post_content</code> にHTMLがそのまま入っているのでそのまま出力します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="resources/views/posts/show.blade.php" data-lang="PHP"><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;{{ str_replace(&#39;_&#39;, &#39;-&#39;, app()-&gt;getLocale()) }}&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;{{ $post-&gt;post_title }}&lt;/title&gt;
    &lt;body&gt;
        &lt;div&gt;
            {!! $post-&gt;post_content !!}
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre></div>



<p>ブラウザでアクセスすると、投稿を取得できていることが確認できます。</p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" src="https://wptech.kiichiro.work/wp-content/uploads/2022/11/251804846e95cfed0ddb7d673c51af77-1024x50.png" alt="ブラウザの表示"/></figure>



<p>curlするとブロックエディタ用の <code>&lt;! -- wp:paragraph --&gt;</code> も取得できていることがわかります。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ curl http://localhost/posts/1
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;Hello world!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;!-- wp:paragraph --&gt;
&lt;p&gt;WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。&lt;/p&gt;
&lt;!-- /wp:paragraph --&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre></div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Laravel】Laravel SailでMySQLからPostgresに変更する方法</title>
		<link>https://wptech.kiichiro.work/4771lv37ot/</link>
		
		<dc:creator><![CDATA[むらおか]]></dc:creator>
		<pubDate>Wed, 17 Mar 2021 14:52:22 +0000</pubDate>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Laravel]]></category>
		<category><![CDATA[PHP]]></category>
		<guid isPermaLink="false">http://13.115.157.198/?p=180</guid>

					<description><![CDATA[Laravelの環境をDockerで立ち上げるのに便利なLaravel Sailですが、同時に立ち上げるサービスを指定することができるようです。 目次 Laravel Sail起動するサービスの一覧MySQLからPost [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Laravelの環境をDockerで立ち上げるのに便利なLaravel Sailですが、同時に立ち上げるサービスを指定することができるようです。</p>



<span id="more-180"></span>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-10" checked><label class="toc-title" for="toc-checkbox-10">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Laravel Sail</a></li><li><a href="#toc2" tabindex="0">起動するサービスの一覧</a></li><li><a href="#toc3" tabindex="0">MySQLからPostgresに変更する</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Laravel Sail</span></h2>



<p><a rel="noopener" href="https://laravel.com/docs/8.x/sail#installing-sail-into-existing-applications" target="_blank">Laravel Sail</a>は Laravel に同梱されたDockerの開発環境を操作するためのコマンドです。<br>自前でDockerfileやdocker-compose.ymlを用意することなくローカル環境の構築が可能です。<br>また、artisanコマンドをラップしているため、コンテナを意識することなく操作することが可能となっています。</p>



<h2 class="wp-block-heading"><span id="toc2">起動するサービスの一覧</span></h2>



<p>公式ドキュメントの Installation &amp; Setup を行った際に立ち上がるサービスは以下の6点です。</p>



<ul class="wp-block-list">
<li>Laravel (PHP)</li>



<li>MySQL</li>



<li>Selenium</li>



<li>MailHog</li>



<li>Redis</li>



<li>MeiliSearch</li>
</ul>



<p>サービスをもう少し減らしたい &amp; MySQLをPostgresに変更したいという要望はありそうですが、ちゃんとそのあたりのカスタマイズもできるようになっています。</p>



<h2 class="wp-block-heading"><span id="toc3">MySQLからPostgresに変更する</span></h2>



<p>以下でできます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ sail artisan sail:install --with=pgsql</code></pre></div>



<p>artisanコマンドに <code>sail:install</code> が追加されているので、ヘルプを見てみると良いでしょう。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ sail artisan help sail:install
Description:
  Install Laravel Sail&#39;s default Docker Compose file

Usage:
  sail:install [options]

Options:
      --with[=WITH]     The services that should be included in the installation
  -h, --help            Display help for the given command. When no command is given display help for the list command
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi            Force ANSI output
      --no-ansi         Disable ANSI output
  -n, --no-interaction  Do not ask any interactive question
      --env[=ENV]       The environment the command should run under
  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
</code></pre></div>



<p><code>--with</code> オプションで追加できるサービスは <code>/vendor/laravel/sail/src/Console/InstallCommand.php</code> に記載されていました。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="InstallCommand.php " data-lang="PHP"><code>/**
 * Gather the desired Sail services using a Symfony menu.
 *
 * @return array
 */
protected function gatherServicesWithSymfonyMenu()
{
    return $this-&gt;choice(&#39;Which services would you like to install?&#39;, [
         &#39;mysql&#39;,
         &#39;pgsql&#39;,
         &#39;redis&#39;,
         &#39;memcached&#39;,
         &#39;meilisearch&#39;,
         &#39;mailhog&#39;,
         &#39;selenium&#39;,
     ], 0, null, true);
}</code></pre></div>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
