<h1 id="%E7%B5%8C%E7%B7%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 経緯</h1>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c8c5f978dcbdb" src="https://embed.zenn.studio/card#zenn-embedded__c8c5f978dcbdb" data-content="https%3A%2F%2Fzenn.dev%2Fkarabiner_inc%2Farticles%2Fb411b73fe81f24" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/karabiner_inc/articles/b411b73fe81f24" style="display:none" target="_blank">https://zenn.dev/karabiner_inc/articles/b411b73fe81f24</a><br style="display:none">
こちらの記事の続きです。</p>
<p data-line="5" class="code-line">続きと言っても、やってることは前回と全然別の内容になるので、読まなくても大丈夫です。</p>
<h1 id="%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%83%BB%E5%89%8D%E6%8F%90" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%83%BB%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 動作環境・前提</h1>
<p data-line="9" class="code-line">CloudRunのマルチコンテナ（サイドカー）で、NginxとPHPの２つのコンテナを立てています。</p>
<table data-line="11" class="code-line">
<thead data-line="11" class="code-line">
<tr data-line="11" class="code-line">
<th></th>
<th>バージョン</th>
</tr>
</thead>
<tbody data-line="13" class="code-line">
<tr data-line="13" class="code-line">
<td>PHP</td>
<td>8.3.6</td>
</tr>
<tr data-line="14" class="code-line">
<td>Nginx</td>
<td>1.29.0</td>
</tr>
</tbody>
</table>
<h1 id="%E5%AF%BE%E8%B1%A1%E8%80%85" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E5%AF%BE%E8%B1%A1%E8%80%85" aria-hidden="true"></a> 対象者</h1>
<ul data-line="18" class="code-line">
<li data-line="18" class="code-line">サイズの大きいファイルをアップロードしようとした時、ローカル環境だと成功するのに本番環境だと失敗する方</li>
<li data-line="19" class="code-line">CloudRunの設定の仕方がわからない方</li>
</ul>
<h1 id="%E6%9C%AC%E9%A1%8C" data-line="21" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%AC%E9%A1%8C" aria-hidden="true"></a> 本題</h1>
<p data-line="23" class="code-line">最初に、以下のドキュメントに次のような記述があるのをご確認ください。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__faffcb9492466" src="https://embed.zenn.studio/card#zenn-embedded__faffcb9492466" data-content="https%3A%2F%2Fcloud.google.com%2Frun%2Fquotas%3Fhl%3Dja%23request_limits" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://cloud.google.com/run/quotas?hl=ja#request_limits" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://cloud.google.com/run/quotas?hl=ja#request_limits</a></p>
<table data-line="26" class="code-line">
<thead data-line="26" class="code-line">
<tr data-line="26" class="code-line">
<th>説明</th>
<th>上限</th>
</tr>
</thead>
<tbody data-line="28" class="code-line">
<tr data-line="28" class="code-line">
<td>HTTP/1 リクエストの最大サイズ</td>
<td>HTTP/1サーバーを使用する場合は32 MiB。HTTP/2サーバーを使用する場合は無制限。</td>
</tr>
</tbody>
</table>
<p data-line="30" class="code-line">「HTTP/2サーバーを使用する場合は無制限」だそうです。つまり、HTTP/2サーバーが使えれば、サイズの大きいファイルもアップロードできるはず。</p>
<p data-line="32" class="code-line">というわけで、今回の問題は、CloudRunの設定で<strong>HTTP/2サーバーを使用するよう強制</strong>すれば解決します。</p>
<p data-line="34" class="code-line">単純にCloudRunの設定だけ変えてもダメで、Nginxの設定も合わせて変更して再デプロイする必要があります。</p>
<h2 id="cloudrun%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="36" class="code-line">
<a class="header-anchor-link" href="#cloudrun%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> CloudRunの設定</h2>
<p data-line="38" class="code-line">Cloud ConsoleからCloudRunの画面を開いて設定します。</p>
<p data-line="40" class="code-line">「新しいリビジョンの編集とデプロイ」を押してください。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ZHQuGAL1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/776b38919290963f083d2c0b.png%3Fsha%3D659058cee7c5229f0fa3c80bd6e0244880f2b9ac" class="md-img" loading="lazy"></p>
<p data-line="43" class="code-line">すると、CloudRunサービスの細かい設定変更ができる画面が出てくるので、その中の「ネットワーキング」のタブを開きます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--1RNurvWL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d9ad9ee009b4356caae00ed9.png%3Fsha%3Dde20fbedd011c792f13575bfbf0c042ab9518922" class="md-img" loading="lazy"></p>
<p data-line="46" class="code-line">このタブの中にある「HTTP/2 エンドツーエンドを使用する」にチェックを入れてください。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--4qWxx45Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8205c707b79730660aa7f91e.png%3Fsha%3Db4d7b1b495fc71f2374b11ebb7aa1195b331a378" class="md-img" loading="lazy"></p>
<p data-line="49" class="code-line">これで、CloudRunの設定は完了です。</p>
<h2 id="nginx%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="51" class="code-line">
<a class="header-anchor-link" href="#nginx%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Nginxの設定</h2>
<p data-line="53" class="code-line">続いて、Nginxの設定をしていきます。<br>
NginxがHTTP/2でのアクセスを受け取れるように設定ファイルを修正して、再デプロイします。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">default.conf</span></div>
<pre class="language-smarty"><code class="language-smarty code-line" data-line="56">server <span class="token smarty language-smarty"><span class="token delimiter punctuation">{</span>
    listen <span class="token number">8080</span> http2;
    # 以下省略
<span class="token delimiter punctuation">}</span></span>
</code></pre>
</div><p data-line="63" class="code-line">listenするポートを設定しているところに、<code>http2</code>というワードを追記します。<br>
これで、NginxがHTTP/2によるアクセスを受け取れるようになりました。</p>
<p data-line="66" class="code-line">上記のCloudRunとNginxの設定は、どちらからやっても問題ありません。<br>
ただ、どちらかの設定を反映した時点でもう一方の設定が噛み合わなくなり、その間WebページやAPIにはアクセスできなくなる場合があります。<br>
なので、作業するときは出来るだけ同じタイミングでやるのが望ましいと思います。</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p data-line="72" class="code-line">この記事の内容、やってること自体はとても簡単なので知ってたら一発だと思うんですが、僕の場合はなかなか自分の環境に合った内容の記事やドキュメントが見つからなくて苦戦してしまいました、、</p>
<p data-line="74" class="code-line">参考にさせてもらった記事（<a href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE">参考文献</a>をご参照ください）ではNginxの設定が僕の記事と違うんですが、これは僕の環境で同様の設定にするとデプロイに失敗してしまうためです。<br>
環境が同じでもデプロイ方法が違うとかで上手くいかない場合があるかもしれないので、もしこの記事の方法で試して上手くいかなければそういうことかなと思って別のやり方を探してみてください。<br>
そして、ぜひ「この環境だとこういう方法・こういう設定じゃないと無理だった」みたいな話があったらコメントで教えてください。</p>
<h1 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" data-line="78" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h1>
<p data-line="80" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__65a25caf30eec" src="https://embed.zenn.studio/card#zenn-embedded__65a25caf30eec" data-content="https%3A%2F%2Fqiita.com%2Fomillefeuillebot%2Fitems%2Fab8e2ad972df1dcfe3fa" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/omillefeuillebot/items/ab8e2ad972df1dcfe3fa" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/omillefeuillebot/items/ab8e2ad972df1dcfe3fa</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e921a4e95e13a" src="https://embed.zenn.studio/card#zenn-embedded__e921a4e95e13a" data-content="https%3A%2F%2Fcloud.google.com%2Frun%2Fquotas%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://cloud.google.com/run/quotas?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://cloud.google.com/run/quotas?hl=ja</a></p>


Nginx+PHPの環境でサイズの大きいファイルをアップロードする ~CloudRun編~

Discussion