<p><a href="https://github.com/nuxt/http">https://github.com/nuxt/http</a> は実質 <a href="https://github.com/nuxt-community/axios-module">https://github.com/nuxt-community/axios-module</a> の後継に当たるもので、fetch <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>をベースにした <a href="https://github.com/sindresorhus/ky">https://github.com/sindresorhus/ky</a> を利用しています。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Fil-m-yamagishi%2Fitems%2Fa823c1afbdf253e84a34" title="nuxt.js は axios を捨てて ky になる様子 - Qiita" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://qiita.com/il-m-yamagishi/items/a823c1afbdf253e84a34">qiita.com</a></cite></p>

<p><a href="https://http.nuxtjs.org/migration">Migration Guides - Http Module</a> を見てわかる通り、axios-module と比較しても名前が変わっただけのような作りになっており、置換だけでほぼ完全に移行することができますが、nuxt/http では <code>credentials: true</code> オプションが削除されています。今回はこれをどうしたらいいのかという話になります。</p>

<h1>そもそも axios-module の <code>credentials: true</code> とは？</h1>

<p>axios-module の <code>credentials: true</code> は、 <a class="keyword" href="http://d.hatena.ne.jp/keyword/XMLHttpRequest">XMLHttpRequest</a> に対し <code>withCredentials = true</code> をデフォルトで設定するためのオプションです。クロス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Cookie">Cookie</a>等の資格情報をXHR経由で渡す時に設定するものです。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fyamory.io%2Fblog%2Fabout-cors%2F" title="CORS &amp; Same Origin Policy 入門 | yamory Blog" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://yamory.io/blog/about-cors/">yamory.io</a></cite></p>

<p><code>withCredentials</code> オプションは XHR 固有のもののため、fetch <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> には存在しません。代わりに <code>credentials = 'omit' | 'same-origin' | 'include'</code> というオプションが存在します。</p>

<ul>
<li><code>omit</code> : 同一<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>上でも資格情報が送られない</li>
<li><code>same-origin</code> : 同一<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>上でのみ資格情報が送られる</li>
<li><code>include</code> : 全ての<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>で資格情報が送られる</li>
</ul>


<p>XHR での <code>withCredentials = false</code> が 'same-origin' で、 <code>withCredentials = true</code> が 'include' に該当します。（ただし polyfill を使うと <code>omit</code> に該当する XHR のオプションが存在しないために同一<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%E1%A5%A4%A5%F3">ドメイン</a>上では資格情報の送信が行われます）
なおサーバー側の <code>Access-Control-Allow-Credentials</code> 等は状況に応じて別途必要です。</p>

<h1>nuxt/http で再現する</h1>

<p>該当のオプションが存在しない nuxt/http で再現するには、デフォルト値を無理やり書き換える必要があります。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>で対応します。参考：<a href="https://github.com/nuxt/http/issues/92">Globally set options.Credentials &middot; Issue #92 &middot; nuxt/http &middot; GitHub</a></p>

<pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">export</span> <span class="synStatement">default</span> ( <span class="synIdentifier">{</span> $http <span class="synIdentifier">}</span> ) =&gt; <span class="synIdentifier">{</span>
    $http._defaults.credentials = <span class="synConstant">'include'</span>; 
<span class="synIdentifier">}</span>
</pre>


<p>TypeScriptではプロパティにアクセスができないので、型を破壊して強引にプロパティを変更します。</p>

<pre class="code lang-typescript" data-lang="typescript" data-unlink><span class="synStatement">import</span> <span class="synIdentifier">{</span> defineNuxtPlugin <span class="synIdentifier">}</span> <span class="synStatement">from</span> <span class="synConstant">'@nuxtjs/composition-api'</span><span class="synStatement">;</span>
<span class="synStatement">import</span> <span class="synIdentifier">{</span> Context <span class="synIdentifier">}</span> <span class="synStatement">from</span> <span class="synConstant">'@nuxt/types/app'</span><span class="synStatement">;</span>

<span class="synStatement">export</span> <span class="synStatement">default</span> defineNuxtPlugin<span class="synStatement">((</span><span class="synIdentifier">{</span> $http <span class="synIdentifier">}</span>: Context<span class="synStatement">)</span> <span class="synStatement">=&gt;</span> <span class="synIdentifier">{</span>
  <span class="synStatement">(</span>$http <span class="synStatement">as</span> <span class="synType">any</span><span class="synStatement">)</span>._defaults.credentials <span class="synStatement">=</span> <span class="synConstant">'include'</span><span class="synStatement">;</span>
<span class="synIdentifier">}</span><span class="synStatement">);</span>
</pre>


<h1>まとめ</h1>

<p>セキュリティ上の懸念点があるためにこのような対応が行われていると思いますので、強引に変えるのは良くないのではないかと思います。</p>

<p>nuxt/http では <code>setToken()</code> というメソッドが用意されており、 <code>Authorization</code> ヘッダをこちらでグローバルに指定することが可能です。こちらで資格情報を管理するのが良いのではないかと思いますが、axios-module と互換性があると言うのであれば credentials 指定があっても良かったのではないかと思います。</p>


https://github.com/nuxt/http は実質 https://github.com/nuxt-community/axios-module の後継に当たるもので、fetch APIをベースにした https://github.com/sindresorhus/ky を利用しています。

qiita.com

Migration Guides - Http Module を見てわかる通り、axios-module と比較しても名前が変わっただけのような作りになっており、置換だけでほぼ完全に移行することができますが、nuxt/http では credentials: true オプションが削除されています。今回はこれをどうしたらいいのかという話になります。

そもそも axios-module の credentials: true とは？

axios-module の credentials: true は、 XMLHttpRequest に対し withCredentials = true をデフォルトで設定するためのオプションです。クロスドメインでCookie等の資格情報をXHR経由で渡す時に設定するものです。

yamory.io

withCredentials オプションは XHR 固有のもののため、fetch API には存在しません。代わりに credentials = 'omit' | 'same-origin' | 'include' というオプションが存在します。


omit : 同一ドメイン上でも資格情報が送られない
same-origin : 同一ドメイン上でのみ資格情報が送られる
include : 全てのドメインで資格情報が送られる



XHR での withCredentials = false が 'same-origin' で、 withCredentials = true が 'include' に該当します。（ただし polyfill を使うと omit に該当する XHR のオプションが存在しないために同一ドメイン上では資格情報の送信が行われます）
なおサーバー側の Access-Control-Allow-Credentials 等は状況に応じて別途必要です。

nuxt/http で再現する

該当のオプションが存在しない nuxt/http で再現するには、デフォルト値を無理やり書き換える必要があります。プラグインで対応します。参考：Globally set options.Credentials &middot; Issue #92 &middot; nuxt/http &middot; GitHub

export default ( { $http } ) => {
    $http._defaults.credentials = 'include'; 
}



TypeScriptではプロパティにアクセスができないので、型を破壊して強引にプロパティを変更します。

import { defineNuxtPlugin } from '@nuxtjs/composition-api';
import { Context } from '@nuxt/types/app';

export default defineNuxtPlugin(({ $http }: Context) => {
  ($http as any)._defaults.credentials = 'include';
});



まとめ

セキュリティ上の懸念点があるためにこのような対応が行われていると思いますので、強引に変えるのは良くないのではないかと思います。

nuxt/http では setToken() というメソッドが用意されており、 Authorization ヘッダをこちらでグローバルに指定することが可能です。こちらで資格情報を管理するのが良いのではないかと思いますが、axios-module と互換性があると言うのであれば credentials 指定があっても良かったのではないかと思います。

nuxt/http で axios-module の credentials: true を再現する

  <a href="https://gist.github.com/nazo/400638c53982b485b4865e3b2361ab45#file-gistfile1-txt">gistfile1.txt</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-gistfile1-txt" class="file my-2">
    

  <div itemprop="text" class="Box-body p-0 blob-wrapper data type-text  ">
      
<table class="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip>
      <tr>
        <td id="file-gistfile1-txt-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-gistfile1-txt-LC1" class="blob-code blob-code-inner js-file-line">https://github.com/nuxt/nuxt.js/tree/dev/packages/types/app</td>
      </tr>
      <tr>
        <td id="file-gistfile1-txt-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-gistfile1-txt-LC2" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-gistfile1-txt-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-gistfile1-txt-LC3" class="blob-code blob-code-inner js-file-line">ここにある</td>
      </tr>
</table>


  </div>

  </div>
</div>



gistfile1.txt
  
  
    

  
      

      
        
        https://github.com/nuxt/nuxt.js/tree/dev/packages/types/app
      
      
        
        

      
      
        
        ここにある

Nuxt.jsの型定義ファイル

  <a href="https://gist.github.com/nazo/d2f765da5942b8d71797b188f20c4bb0#file-wsl2-md">wsl2.md</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-wsl2-md" class="file my-2">
    
  <div id="file-wsl2-md-readme" class="Box-body readme blob js-code-block-container p-5 p-xl-6 ">
    <article class="markdown-body entry-content container-lg" itemprop="text"><h1><a id="user-content-wsl2でシェル補完が遅い時" class="anchor" aria-hidden="true" href="#wsl2でシェル補完が遅い時"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>WSL2でシェル補完が遅い時</h1>
<p><a href="https://github.com/microsoft/WSL/issues/4234">https://github.com/microsoft/WSL/issues/4234</a></p>
<p>/etc/wsl.conf に以下を記述する</p>
<pre><code>[interop]
appendWindowsPath = false
</code></pre>
<h1><a id="user-content-windows起動時にwsl2を起動しないようにする" class="anchor" aria-hidden="true" href="#windows起動時にwsl2を起動しないようにする"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Windows起動時にWSL2を起動しないようにする</h1>
<p>できなさそうなのでスタートアップに適当なバッチファイルを作って <code>wsl --shutdown</code> と書いておく</p>
<p>ちなみにシャットダウンした後の起動はWindows Terminalを起動するなりしてWSL2にアクセスしようとすると自動的に起動する</p>
</article>
  </div>

  </div>
</div>



wsl2.md
  
  
    
  
    WSL2でシェル補完が遅い時
https://github.com/microsoft/WSL/issues/4234
/etc/wsl.conf に以下を記述する
[interop]
appendWindowsPath = false

Windows起動時にWSL2を起動しないようにする
できなさそうなのでスタートアップに適当なバッチファイルを作って wsl --shutdown と書いておく
ちなみにシャットダウンした後の起動はWindows Terminalを起動するなりしてWSL2にアクセスしようとすると自動的に起動する

WSL2 小ネタ

<p><a href="https://github.com/nazo/rust-nes">GitHub - nazo/rust-nes: Rust NES Emulator (Work In Progress)</a> を <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> の <a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a> で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>しようとしたのですが、そのままではビルドが通りませんでした。</p>

<p>基本情報として、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 上で <a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/C%2B%2B">C++</a>ツールセット（ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Visual%20Studio">Visual Studio</a> のツールセット）を <a class="keyword" href="http://d.hatena.ne.jp/keyword/Visual%20Studio">Visual Studio</a> 以外から使うには、vcvarsall.bat を呼び出して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>を設定する必要があります。rust-<a class="keyword" href="http://d.hatena.ne.jp/keyword/nes">nes</a> は <a class="keyword" href="http://d.hatena.ne.jp/keyword/SDL">SDL</a> を使っていますので、当然 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が呼び出せなければいけません。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a> のショートカットのプロパティを開き、「リンク先」を以下のように変更します。</p>

<pre class="code" data-lang="" data-unlink>&#34;C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\Tools\VsDevCmd.bat&#34; -arch=amd64 &amp; &#34;C:\Program Files\Microsoft VS Code\Code.exe&#34;</pre>


<p>パスは <a class="keyword" href="http://d.hatena.ne.jp/keyword/Visual%20Studio">Visual Studio</a> のバージョンなどでも変わるので、適宜自分の環境に合わせて書き換えてください。</p>

<p>launch.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a> 側でどうにかする方法もあるとは思うのですが、多分これが一番早いと思います。</p>

<p>※ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 環境にはあまり詳しくないので、用語などに多少の誤りがある可能性があります。</p>

<h1>参考</h1>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fcpp%2Fbuild%2Fbuilding-on-the-command-line%3Fview%3Dvs-2019" title="コマンド ラインから Microsoft C++ ツールセットを使用する" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://docs.microsoft.com/ja-jp/cpp/build/building-on-the-command-line?view=vs-2019">docs.microsoft.com</a></cite></p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fvscode-cpptools%2Fissues%2F278" title="Building/debugging using cmd/msvc 14 · Issue #278 · microsoft/vscode-cpptools" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/microsoft/vscode-cpptools/issues/278">github.com</a></cite></p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fvscode-cpptools%2Fissues%2F1839" title="How to: Use VS Code with Visual C++ Build Tools · Issue #1839 · microsoft/vscode-cpptools" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://github.com/microsoft/vscode-cpptools/issues/1839">github.com</a></cite></p>


GitHub - nazo/rust-nes: Rust NES Emulator (Work In Progress) を Windows の VSCode でデバッグしようとしたのですが、そのままではビルドが通りませんでした。

基本情報として、Windows 上で Microsoft C++ツールセット（ Visual Studio のツールセット）を Visual Studio 以外から使うには、vcvarsall.bat を呼び出して環境変数を設定する必要があります。rust-nes は SDL を使っていますので、当然 Windows API が呼び出せなければいけません。

VSCode のショートカットのプロパティを開き、「リンク先」を以下のように変更します。

"C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\Tools\VsDevCmd.bat" -arch=amd64 & "C:\Program Files\Microsoft VS Code\Code.exe"


パスは Visual Studio のバージョンなどでも変わるので、適宜自分の環境に合わせて書き換えてください。

launch.json 側でどうにかする方法もあるとは思うのですが、多分これが一番早いと思います。

※ Windows 環境にはあまり詳しくないので、用語などに多少の誤りがある可能性があります。

参考

docs.microsoft.com

github.com

github.com

Windows の VSCode で Microsoft C++ ツールセットを使用する

<h1>概要</h1>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> ECSのタスク停止はCloudWatch Eventで検知できますが、このイベントパターンはChatBotに対応していないので、Lambdaから自前でSlackに投げる必要があります。</p>

<p>ECSの停止状態からログを見たい時、一覧からどのタスクが何かを発掘して…とか、CloudWatch Logsから発掘して…とかは大変です。</p>

<p>上記の両方を満たすため、LambdaからSlack通知を行い、かつ詳細のURLを添付するようにします。</p>

<h1>Lambda</h1>

<p>以下の関数を作ります。IAMで <code>ecs:DescribeTaskDefinition</code> を allow しておく必要があります。</p>

<pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> AWS = require(<span class="synConstant">'aws-sdk'</span>);
<span class="synStatement">const</span> https = require(<span class="synConstant">'https'</span>);
<span class="synStatement">const</span> qs = require(<span class="synConstant">'querystring'</span>);

<span class="synIdentifier">function</span> postToSlack(message) <span class="synIdentifier">{</span>
  <span class="synStatement">return</span> <span class="synStatement">new</span> Promise ((resolve, reject) =&gt; <span class="synIdentifier">{</span>
    <span class="synStatement">const</span> postData = qs.stringify(message);
    <span class="synStatement">const</span> req = https.request(<span class="synIdentifier">{</span>
      hostname: <span class="synConstant">'slack.com'</span>,
      path: <span class="synConstant">'/api/chat.postMessage'</span>,
      method: <span class="synConstant">&quot;POST&quot;</span>,
      headers: <span class="synIdentifier">{</span>
        <span class="synConstant">'Content-Type'</span>: <span class="synConstant">'application/x-www-form-urlencoded'</span>,
        <span class="synConstant">'Content-Length'</span>: Buffer.byteLength(postData)
      <span class="synIdentifier">}</span>
    <span class="synIdentifier">}</span>);
    req.on(<span class="synConstant">'response'</span>, res =&gt; <span class="synIdentifier">{</span>
      resolve(res);
    <span class="synIdentifier">}</span>);

    req.on(<span class="synConstant">'error'</span>, err =&gt; <span class="synIdentifier">{</span>
      reject(err);
    <span class="synIdentifier">}</span>);
    req.write(postData);
    req.end();
  <span class="synIdentifier">}</span>);
<span class="synIdentifier">}</span>

exports.handler = async <span class="synIdentifier">function</span>(<span class="synStatement">event</span>) <span class="synIdentifier">{</span>
  <span class="synStatement">if</span> (<span class="synStatement">event</span>.detail.containers.find((containerEvent) =&gt; containerEvent.exitCode != 0) === <span class="synStatement">undefined</span>) <span class="synStatement">return</span>;

  <span class="synStatement">const</span> region = <span class="synStatement">event</span>.region;
  AWS.config.update(<span class="synIdentifier">{</span>region<span class="synIdentifier">}</span>);
  <span class="synStatement">const</span> startedAt = <span class="synStatement">event</span>.detail.startedAt;
  <span class="synStatement">const</span> stoppedAt = <span class="synStatement">event</span>.detail.stoppedAt;
  <span class="synStatement">const</span> taskDefinitionArn = <span class="synStatement">event</span>.detail.taskDefinitionArn;
  <span class="synStatement">const</span> ecs = <span class="synStatement">new</span> AWS.ECS();
  <span class="synStatement">const</span> taskDefinition = await ecs.describeTaskDefinition(<span class="synIdentifier">{</span>taskDefinition: taskDefinitionArn<span class="synIdentifier">}</span>).promise();
  <span class="synStatement">const</span> ecsCluster = <span class="synStatement">event</span>.detail.clusterArn.split(<span class="synConstant">&quot;/&quot;</span>)<span class="synIdentifier">[</span>1<span class="synIdentifier">]</span>;
  <span class="synStatement">const</span> ecsTaskID = <span class="synStatement">event</span>.detail.taskArn.split(<span class="synConstant">&quot;/&quot;</span>)<span class="synIdentifier">[</span>1<span class="synIdentifier">]</span>;
  <span class="synStatement">const</span> detailURL = `https:<span class="synComment">//${region}.console.aws.amazon.com/ecs/home?region=${region}#/clusters/${ecsCluster}/tasks/${ecsTaskID}/details`;</span>
  <span class="synIdentifier">let</span> text = `Task is STOPPED : $<span class="synIdentifier">{</span>taskDefinitionArn<span class="synIdentifier">}\</span>nRunning at: $<span class="synIdentifier">{</span>startedAt<span class="synIdentifier">}</span> - $<span class="synIdentifier">{</span>stoppedAt<span class="synIdentifier">}\</span>nDetail: $<span class="synIdentifier">{</span>detailURL<span class="synIdentifier">}\</span>n`;

  taskDefinition.taskDefinition.containerDefinitions.forEach((containerDefintion) =&gt; <span class="synIdentifier">{</span>
    <span class="synStatement">const</span> name = containerDefintion.name;
    <span class="synStatement">const</span> conatinerEvent = <span class="synStatement">event</span>.detail.containers.find((containerEvent) =&gt; containerEvent.name == name);
    <span class="synStatement">const</span> logDriver = containerDefintion.logConfiguration.logDriver;
    text = text + `<span class="synIdentifier">\</span>`<span class="synIdentifier">\</span>`<span class="synIdentifier">\</span>`<span class="synIdentifier">\</span>nContainer: $<span class="synIdentifier">{</span>name<span class="synIdentifier">}\</span>nExitCode: $<span class="synIdentifier">{</span>conatinerEvent.exitCode<span class="synIdentifier">}\</span>n`;
    <span class="synStatement">if</span> (logDriver == <span class="synConstant">&quot;awslogs&quot;</span>) <span class="synIdentifier">{</span>
      <span class="synStatement">const</span> logGroup = containerDefintion.logConfiguration.options<span class="synIdentifier">[</span><span class="synConstant">&quot;awslogs-group&quot;</span><span class="synIdentifier">]</span>;
      <span class="synStatement">const</span> prefix = containerDefintion.logConfiguration.options<span class="synIdentifier">[</span><span class="synConstant">&quot;awslogs-stream-prefix&quot;</span><span class="synIdentifier">]</span>;
      <span class="synStatement">const</span> logStream = `$<span class="synIdentifier">{</span>prefix<span class="synIdentifier">}</span>/$<span class="synIdentifier">{</span>name<span class="synIdentifier">}</span>/$<span class="synIdentifier">{</span>ecsTaskID<span class="synIdentifier">}</span>`;
      <span class="synStatement">const</span> LogURL = `https:<span class="synComment">//${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#logsV2:log-groups/log-group/${encodeURIComponent(logGroup)}/log-events/${encodeURIComponent(logStream)}`;</span>
      text = text + `LogURL: $<span class="synIdentifier">{</span>LogURL<span class="synIdentifier">}\</span>n`;
    <span class="synIdentifier">}</span>
    text = text + <span class="synConstant">&quot;```</span><span class="synSpecial">\n</span><span class="synConstant">&quot;</span>;
  <span class="synIdentifier">}</span>);

  <span class="synStatement">const</span> message = <span class="synIdentifier">{</span>
    token: process.env.SLACK_ACCESS_TOKEN,
    channel: process.env.SLACK_CHANNEL,
    text: text
  <span class="synIdentifier">}</span>;

  await postToSlack(message);
<span class="synIdentifier">}</span>;
</pre>


<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a> <code>SLACK_ACCESS_TOKEN</code> <code>SLACK_CHANNEL</code> の設定が必要です。</p>

<h1>CloudWatch Event</h1>

<p>停止だけ取ります。起動も取りたい場合は STOPPED の設定を消してください。</p>

<pre class="code lang-json" data-lang="json" data-unlink><span class="synSpecial">{</span>
  &quot;<span class="synStatement">detail-type</span>&quot;: <span class="synSpecial">[</span>
    &quot;<span class="synConstant">ECS Task State Change</span>&quot;
  <span class="synSpecial">]</span>,
  &quot;<span class="synStatement">source</span>&quot;: <span class="synSpecial">[</span>
    &quot;<span class="synConstant">aws.ecs</span>&quot;
  <span class="synSpecial">]</span>,
  &quot;<span class="synStatement">detail</span>&quot;: <span class="synSpecial">{</span>
    &quot;<span class="synStatement">lastStatus</span>&quot;: <span class="synSpecial">[</span>
      &quot;<span class="synConstant">STOPPED</span>&quot;
    <span class="synSpecial">]</span>
  <span class="synSpecial">}</span>
<span class="synSpecial">}</span>
</pre>


<p>ターゲットに Lambda 関数で上で作った関数を指定します。</p>

<h1>結果</h1>

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nazone/20200621/20200621113237.png" alt="f:id:nazone:20200621113237p:plain" title="f:id:nazone:20200621113237p:plain" class="hatena-fotolife" itemprop="image"></span></p>

<p>このような通知が飛んでくるようになります。リンクをクリックするとタスク詳細画面やCloudWatch Logsの画面にすぐ飛ぶことができ、原因の把握に役立ちます。</p>

<p>タスクの変化が少ない環境なら全ての停止を通知してもいいと思いますし、より少ないなら起動と停止の両方を通知してもいいと思います。用途によってカスタマイズしてください。</p>

<p>今回のテストで使った CDK のソースは <a href="https://github.com/nazo/cdk-ecs-stop-task-slack">https://github.com/nazo/cdk-ecs-stop-task-slack</a> になります。</p>


概要

AWS ECSのタスク停止はCloudWatch Eventで検知できますが、このイベントパターンはChatBotに対応していないので、Lambdaから自前でSlackに投げる必要があります。

ECSの停止状態からログを見たい時、一覧からどのタスクが何かを発掘して…とか、CloudWatch Logsから発掘して…とかは大変です。

上記の両方を満たすため、LambdaからSlack通知を行い、かつ詳細のURLを添付するようにします。

Lambda

以下の関数を作ります。IAMで ecs:DescribeTaskDefinition を allow しておく必要があります。

const AWS = require('aws-sdk');
const https = require('https');
const qs = require('querystring');

function postToSlack(message) {
  return new Promise ((resolve, reject) => {
    const postData = qs.stringify(message);
    const req = https.request({
      hostname: 'slack.com',
      path: '/api/chat.postMessage',
      method: "POST",
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': Buffer.byteLength(postData)
      }
    });
    req.on('response', res => {
      resolve(res);
    });

    req.on('error', err => {
      reject(err);
    });
    req.write(postData);
    req.end();
  });
}

exports.handler = async function(event) {
  if (event.detail.containers.find((containerEvent) => containerEvent.exitCode != 0) === undefined) return;

  const region = event.region;
  AWS.config.update({region});
  const startedAt = event.detail.startedAt;
  const stoppedAt = event.detail.stoppedAt;
  const taskDefinitionArn = event.detail.taskDefinitionArn;
  const ecs = new AWS.ECS();
  const taskDefinition = await ecs.describeTaskDefinition({taskDefinition: taskDefinitionArn}).promise();
  const ecsCluster = event.detail.clusterArn.split("/")[1];
  const ecsTaskID = event.detail.taskArn.split("/")[1];
  const detailURL = `https://${region}.console.aws.amazon.com/ecs/home?region=${region}#/clusters/${ecsCluster}/tasks/${ecsTaskID}/details`;
  let text = `Task is STOPPED : ${taskDefinitionArn}\nRunning at: ${startedAt} - ${stoppedAt}\nDetail: ${detailURL}\n`;

  taskDefinition.taskDefinition.containerDefinitions.forEach((containerDefintion) => {
    const name = containerDefintion.name;
    const conatinerEvent = event.detail.containers.find((containerEvent) => containerEvent.name == name);
    const logDriver = containerDefintion.logConfiguration.logDriver;
    text = text + `\`\`\`\nContainer: ${name}\nExitCode: ${conatinerEvent.exitCode}\n`;
    if (logDriver == "awslogs") {
      const logGroup = containerDefintion.logConfiguration.options["awslogs-group"];
      const prefix = containerDefintion.logConfiguration.options["awslogs-stream-prefix"];
      const logStream = `${prefix}/${name}/${ecsTaskID}`;
      const LogURL = `https://${region}.console.aws.amazon.com/cloudwatch/home?region=${region}#logsV2:log-groups/log-group/${encodeURIComponent(logGroup)}/log-events/${encodeURIComponent(logStream)}`;
      text = text + `LogURL: ${LogURL}\n`;
    }
    text = text + "```\n";
  });

  const message = {
    token: process.env.SLACK_ACCESS_TOKEN,
    channel: process.env.SLACK_CHANNEL,
    text: text
  };

  await postToSlack(message);
};



環境変数 SLACK_ACCESS_TOKEN SLACK_CHANNEL の設定が必要です。

CloudWatch Event

停止だけ取ります。起動も取りたい場合は STOPPED の設定を消してください。

{
  "detail-type": [
    "ECS Task State Change"
  ],
  "source": [
    "aws.ecs"
  ],
  "detail": {
    "lastStatus": [
      "STOPPED"
    ]
  }
}



ターゲットに Lambda 関数で上で作った関数を指定します。

結果



このような通知が飛んでくるようになります。リンクをクリックするとタスク詳細画面やCloudWatch Logsの画面にすぐ飛ぶことができ、原因の把握に役立ちます。

タスクの変化が少ない環境なら全ての停止を通知してもいいと思いますし、より少ないなら起動と停止の両方を通知してもいいと思います。用途によってカスタマイズしてください。

今回のテストで使った CDK のソースは https://github.com/nazo/cdk-ecs-stop-task-slack になります。

AWS ECSのタスクが異常終了したらログURL付きでSlackに通知する

  <a href="https://gist.github.com/nazo/05435661c0b73bce728dbc796036c1d0#file-windows-terminal-md">windows-terminal.md</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-windows-terminal-md" class="file my-2">
    
  <div id="file-windows-terminal-md-readme" class="Box-body readme blob js-code-block-container p-5 p-xl-6 ">
    <article class="markdown-body entry-content container-lg" itemprop="text"><p><a href="https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701" rel="nofollow">https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701</a></p>
<h1><a id="user-content-設定画面" class="anchor" aria-hidden="true" href="#設定画面"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>設定画面</h1>
<p>下矢印みたいなのを押して「設定」</p>
<h1><a id="user-content-タブ切り替えショートカットキー" class="anchor" aria-hidden="true" href="#タブ切り替えショートカットキー"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>タブ切り替えショートカットキー</h1>
<p>Ctrl+Tab / Shift+Ctrl+Tab</p>
<p>変更したい場合、<code>keybindings</code> で以下のようにする（例えばiTerm風）</p>
<pre><code>{ "command": "nextTab", "keys": "alt+shift+]" },
{ "command": "prevTab", "keys": "alt+shift+[" },
</code></pre>
<h1><a id="user-content-デフォルトで-wsl2-ubuntu-を起動するようにする" class="anchor" aria-hidden="true" href="#デフォルトで-wsl2-ubuntu-を起動するようにする"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>デフォルトで WSL2 (Ubuntu) を起動するようにする</h1>
<p><code>defaultProfile</code> を Ubuntu の <code>guid</code> で書き換えると、それが最初に起動します。</p>
<h1><a id="user-content-フォントを変える" class="anchor" aria-hidden="true" href="#フォントを変える"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>フォントを変える</h1>
<p><code>profiles</code> <code>defaults</code> に以下を設定します。</p>
<ul>
<li>フォント種類 : <code>fontFace</code></li>
<li>フォントサイズ : <code>fontSize</code></li>
</ul>
<pre><code>    "profiles": {
        "defaults": {
            // Put settings here that you want to apply to all profiles.
            "cursorShape": "filledBox",
            "fontFace": "Myrica M",
            "fontSize": 14,
            "colorScheme": "Dracula"
        },
</code></pre>
<h1><a id="user-content-カラースキーム" class="anchor" aria-hidden="true" href="#カラースキーム"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>カラースキーム</h1>
<p>適当にぐぐって探すといいです。とりあえず <a href="https://draculatheme.com/windows-terminal" rel="nofollow">Dracula</a> を入れてます。</p>
<h1><a id="user-content-起動時のウィンドウサイズを変更する" class="anchor" aria-hidden="true" href="#起動時のウィンドウサイズを変更する"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>起動時のウィンドウサイズを変更する</h1>
<p>ルートに <code>initialCols</code> <code>initialRows</code> を設定すると適用されます。</p>
<pre><code>{
    "$schema": "https://aka.ms/terminal-profiles-schema",

    "defaultProfile": "{...}",
    "initialCols": 200,
    "initialRows": 65,
}
</code></pre>
</article>
  </div>

  </div>
</div>



windows-terminal.md
  
  
    
  
    https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701
設定画面
下矢印みたいなのを押して「設定」
タブ切り替えショートカットキー
Ctrl+Tab / Shift+Ctrl+Tab
変更したい場合、keybindings で以下のようにする（例えばiTerm風）
{ "command": "nextTab", "keys": "alt+shift+]" },
{ "command": "prevTab", "keys": "alt+shift+[" },

デフォルトで WSL2 (Ubuntu) を起動するようにする
defaultProfile を Ubuntu の guid で書き換えると、それが最初に起動します。
フォントを変える
profiles defaults に以下を設定します。

フォント種類 : fontFace
フォントサイズ : fontSize

    "profiles": {
        "defaults": {
            // Put settings here that you want to apply to all profiles.
            "cursorShape": "filledBox",
            "fontFace": "Myrica M",
            "fontSize": 14,
            "colorScheme": "Dracula"
        },

カラースキーム
適当にぐぐって探すといいです。とりあえず Dracula を入れてます。
起動時のウィンドウサイズを変更する
ルートに initialCols initialRows を設定すると適用されます。
{
    "$schema": "https://aka.ms/terminal-profiles-schema",

    "defaultProfile": "{...}",
    "initialCols": 200,
    "initialRows": 65,
}

Windows Terminal 小ネタ

  <a href="https://gist.github.com/nazo/11861a74ecd6d354a8dcd30684710009#file-js-outside-module-md">js-outside-module.md</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-js-outside-module-md" class="file my-2">
    
  <div id="file-js-outside-module-md-readme" class="Box-body readme blob js-code-block-container p-5 p-xl-6 ">
    <article class="markdown-body entry-content container-lg" itemprop="text"><pre><code>SyntaxError: Cannot use import statement outside a module
</code></pre>
<p>es modules は package.json に従ってモジュールとするので、そこに規定されていないディレクトリにファイルが存在するとこうなってしまう。</p>
<p>回避するには相対パスで直接ファイルを指定すると良い。</p>
<pre><code>import * as THREE from "three"
import { OBJLoader } from "../node_modules/three/examples/jsm/loaders/OBJLoader.js"
</code></pre>
<p>Webpackの設定でどうにかなるような気もする</p>
</article>
  </div>

  </div>
</div>



js-outside-module.md
  
  
    
  
    SyntaxError: Cannot use import statement outside a module

es modules は package.json に従ってモジュールとするので、そこに規定されていないディレクトリにファイルが存在するとこうなってしまう。
回避するには相対パスで直接ファイルを指定すると良い。
import * as THREE from "three"
import { OBJLoader } from "../node_modules/three/examples/jsm/loaders/OBJLoader.js"

Webpackの設定でどうにかなるような気もする

JavaScriptでモジュール読み込みで`Cannot use import statement outside a module`と言われる

  <a href="https://gist.github.com/nazo/d095cacbabc79243dd13d0f9622e5d49#file-elixir-google-api-md">elixir-google-api.md</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-elixir-google-api-md" class="file my-2">
    
  <div id="file-elixir-google-api-md-readme" class="Box-body readme blob js-code-block-container p-5 p-xl-6 ">
    <article class="markdown-body entry-content container-lg" itemprop="text"><p><a href="https://github.com/googleapis/elixir-google-api">https://github.com/googleapis/elixir-google-api</a> で、通常JSONで降ってくるデータに対して alt を変更すると形式が変わるもの、例えば <code>alt=media</code> でファイルダウンロードになるようなものは、 API の引数 opts に <code>[decode: false]</code> を付けると生データが降ってきます</p>
<p>例</p>
<pre><code>GoogleApi.Drive.V3.Connection.new(token)
|&gt; GoogleApi.Drive.V3.Api.Files.drive_files_get("yourfileid", [alt: "media"], [decode: false])
</code></pre>
</article>
  </div>

  </div>
</div>



elixir-google-api.md
  
  
    
  
    https://github.com/googleapis/elixir-google-api で、通常JSONで降ってくるデータに対して alt を変更すると形式が変わるもの、例えば alt=media でファイルダウンロードになるようなものは、 API の引数 opts に [decode: false] を付けると生データが降ってきます
例
GoogleApi.Drive.V3.Connection.new(token)
|> GoogleApi.Drive.V3.Api.Files.drive_files_get("yourfileid", [alt: "media"], [decode: false])

elixir-google-api でファイルダウンロードする

<h1>何の話</h1>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>インフラ（<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/GCP">GCP</a>など、その中で取り扱うもの）で、ResourceとDeploymentという境界を分けるとうまく整理できるのではないかという話です。</p>

<p>※この話は私が勝手に言っている内容です。用語定義や概念など一般的なものでないので、あくまで参考として読んでいただければと思います。</p>

<h1>前提</h1>

<p>現代のアプリケーションは12Factor Appに基づき、Buildフェーズで作られたビルドに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>で設定を当てることによってデプロイが完了します。<a class="keyword" href="http://d.hatena.ne.jp/keyword/RAILS">RAILS</a>_ENVのような設定は使いません。</p>

<p>またCIでビルドされたイメージには一意のタグが付き（いわゆるlatest運用ではない）、それに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>を当てることで一意のリリースが作成されます。<a href="https://12factor.net/ja/build-release-run">12Factor Appの「V. ビルド、リリース、実行」</a>も参考にしてください。</p>

<h1>Resource</h1>

<p>一般的な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>リソースをResourceと呼びます（ダジャレを言いたいわけではないです）。</p>

<p>Resourceは一度作ると「そのResourceが持っている機能で」操作を行うことがありますが、Resourceそのものを作成した時と同じ方法で操作することはほぼありません。</p>

<p>Terraformは現代においてベストなIaCツールの１つですが、その理由に「そうなるべきである状態を定義し、インフラ側をその状態になるようにする」という構造で作られているからです。</p>

<p>「あるべき状態を定義してそれを実行する」という店ではAnsibleもそうでしたが、Ansibleは書き方が手続き型で、かつ何でも書けてしまうという難点がありました。しかしTerraformは書き方を大幅に制限することで、「インフラのあるべき状態」以外のことはほぼ書けないようになっています。</p>

<h1>Deployment</h1>

<p>ビルドしたリソースを配置する作業に付随するものはDeploymentです。</p>

<p>Resourceは一度作ると「その作業<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%C8%A5%B3%A5%EB">プロトコル</a>で」それ以上の操作をすることは基本的にありませんが、Deploymentは「同一の作業<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%C8%A5%B3%A5%EB">プロトコル</a>で」初期配置やビルドの更新などを行います。</p>

<p>例えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>のコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>プレーン（<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a>ならEKS）はResourceですが、その上で行う<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>の操作は全てDeploymentと分類できます。（<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>自体のDeploymentとは別の話です。DaemonSetだろうとLoadBalancerだろうとここでは全てDeploymentです）</p>

<p>ちょっと話が逸れますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> RDSそのものはResourceで、その中に入るDBのデータはDeployment、というようなイメージを、インフラ全体とアプリケーションに対して定義しているような感じだと思っています。</p>

<h1>なぜ分けるのか</h1>

<p>例えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> ECSのタスク定義には通常最新のイメージのタグを記述しますが（これは<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>でも同様ですが）、最新のイメージのタグは通常CIで決定されますので、アプリケーションのビルドCIと同居している必要があります。タスク定義のライフサイクルがCIと違う場所に存在する、例えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>リソースと同じライフサイクルで存在すると、CIに入れてしまうとアプリケーションの更新と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>リソースの更新が混ざる可能性がありますし、CIに入れないと最新のタグを取得できないので最新のイメージで適切に更新する方法がありません。（latestタグ運用はダメ絶対）</p>

<p>つまり、Resourceというのは「変化しないもの」であり（厳密には自動メンテナンスで勝手にバージョンを上げられて…みたいなこともありますが）、Deploymentは「変化するもの」ということです。</p>

<p>私はECSのサービスやタスク定義をTerraformで他のResourceと同一ライフサイクルで管理したことがありましたが、上記問題により辛い結果になっていました（その時はlatest的なタグをCIから同時にpushすることで、Terraformから更新する時だけは仕方なくそちらを参照するという苦肉の策で回避していました）。TerraformでECSタスク定義や<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>を管理すること自体は否定しませんが（それが良いかどうかは別として）、Resourceと同一のライフサイクルにするのは無理があるのではないかと考えています。</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/YAML">YAML</a>は一見「あるべき状態を書く」ようになっていますが、それは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%CC%BF%AE%A5%D7%A5%ED%A5%C8%A5%B3%A5%EB">通信プロトコル</a>的な部分の話で、現実にはCIで毎回違うイメージのタグに書き換えてデプロイすることになります。この<a class="keyword" href="http://d.hatena.ne.jp/keyword/YAML">YAML</a>の部分は下記参考記事のInfrastructure as Dataであり（この呼び方は議論の余地があると思いますが、概念の分類としては良いと思います）、それを実運用するには通常その上にCodeが必要になります。</p>

<p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdeeeet.com%2Fwriting%2F2020%2F05%2F11%2Finfrastructure-as-data%2F" title="Infrastructure as Dataとは何か" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://deeeet.com/writing/2020/05/11/infrastructure-as-data/">deeeet.com</a></cite></p>

<p>個人的には、Deploymentというのはインフラというより「アプリケーションという名のデータ」というほうが近く、そもそもこれはInfrastructureなのか？と思うところがありますが、これが<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>になるとALB <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ingress">Ingress</a> Controllerやらexternal-<a class="keyword" href="http://d.hatena.ne.jp/keyword/dns">dns</a>やらで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>リソースそのものも制御できてしまうので、このあたりが<a class="keyword" href="http://d.hatena.ne.jp/keyword/k8s">k8s</a>をより複雑にさせているのではないかと思うところです。</p>

<h1>まとめ</h1>

<p>用語は正直何でもいいし<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B1%D1%B8%EC%B7%F7">英語圏</a>の人たちにちゃんと決めてほしいのですが、ともかく「デプロイするコンテナ」というのは通常の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>リソースとは別物なのではないか、ということが言いたかったことです。</p>

<p>Deploymentは「あるべき状態」が日々変化するため、そういう目的で管理するのが難しいですが、しかし統一的な「あるべき状態」を維持できるツールにしておかないと管理できていないサーバー（「構成ドリフト」とか「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%CE%A1%BC%A5%D5%A5%EC%A1%BC%A5%AF">スノーフレーク</a>サーバー」とかそういうやつ）が生まれます。Resourceとはライフサイクルを分けつつ、コードと実態が乖離しない、そもそも乖離できないようにする構成を考えましょう。</p>


何の話

クラウドインフラ（AWSやGCPなど、その中で取り扱うもの）で、ResourceとDeploymentという境界を分けるとうまく整理できるのではないかという話です。

※この話は私が勝手に言っている内容です。用語定義や概念など一般的なものでないので、あくまで参考として読んでいただければと思います。

前提

現代のアプリケーションは12Factor Appに基づき、Buildフェーズで作られたビルドに環境変数で設定を当てることによってデプロイが完了します。RAILS_ENVのような設定は使いません。

またCIでビルドされたイメージには一意のタグが付き（いわゆるlatest運用ではない）、それに環境変数を当てることで一意のリリースが作成されます。12Factor Appの「V. ビルド、リリース、実行」も参考にしてください。

Resource

一般的なクラウドリソースをResourceと呼びます（ダジャレを言いたいわけではないです）。

Resourceは一度作ると「そのResourceが持っている機能で」操作を行うことがありますが、Resourceそのものを作成した時と同じ方法で操作することはほぼありません。

Terraformは現代においてベストなIaCツールの１つですが、その理由に「そうなるべきである状態を定義し、インフラ側をその状態になるようにする」という構造で作られているからです。

「あるべき状態を定義してそれを実行する」という店ではAnsibleもそうでしたが、Ansibleは書き方が手続き型で、かつ何でも書けてしまうという難点がありました。しかしTerraformは書き方を大幅に制限することで、「インフラのあるべき状態」以外のことはほぼ書けないようになっています。

Deployment

ビルドしたリソースを配置する作業に付随するものはDeploymentです。

Resourceは一度作ると「その作業プロトコルで」それ以上の操作をすることは基本的にありませんが、Deploymentは「同一の作業プロトコルで」初期配置やビルドの更新などを行います。

例えばk8sのコントロールプレーン（AWSならEKS）はResourceですが、その上で行うk8sの操作は全てDeploymentと分類できます。（k8s自体のDeploymentとは別の話です。DaemonSetだろうとLoadBalancerだろうとここでは全てDeploymentです）

ちょっと話が逸れますが、AWS RDSそのものはResourceで、その中に入るDBのデータはDeployment、というようなイメージを、インフラ全体とアプリケーションに対して定義しているような感じだと思っています。

なぜ分けるのか

例えばAWS ECSのタスク定義には通常最新のイメージのタグを記述しますが（これはk8sでも同様ですが）、最新のイメージのタグは通常CIで決定されますので、アプリケーションのビルドCIと同居している必要があります。タスク定義のライフサイクルがCIと違う場所に存在する、例えばクラウドリソースと同じライフサイクルで存在すると、CIに入れてしまうとアプリケーションの更新とクラウドリソースの更新が混ざる可能性がありますし、CIに入れないと最新のタグを取得できないので最新のイメージで適切に更新する方法がありません。（latestタグ運用はダメ絶対）

つまり、Resourceというのは「変化しないもの」であり（厳密には自動メンテナンスで勝手にバージョンを上げられて…みたいなこともありますが）、Deploymentは「変化するもの」ということです。

私はECSのサービスやタスク定義をTerraformで他のResourceと同一ライフサイクルで管理したことがありましたが、上記問題により辛い結果になっていました（その時はlatest的なタグをCIから同時にpushすることで、Terraformから更新する時だけは仕方なくそちらを参照するという苦肉の策で回避していました）。TerraformでECSタスク定義やk8sを管理すること自体は否定しませんが（それが良いかどうかは別として）、Resourceと同一のライフサイクルにするのは無理があるのではないかと考えています。

k8sのYAMLは一見「あるべき状態を書く」ようになっていますが、それは通信プロトコル的な部分の話で、現実にはCIで毎回違うイメージのタグに書き換えてデプロイすることになります。このYAMLの部分は下記参考記事のInfrastructure as Dataであり（この呼び方は議論の余地があると思いますが、概念の分類としては良いと思います）、それを実運用するには通常その上にCodeが必要になります。

deeeet.com

個人的には、Deploymentというのはインフラというより「アプリケーションという名のデータ」というほうが近く、そもそもこれはInfrastructureなのか？と思うところがありますが、これがk8sになるとALB Ingress Controllerやらexternal-dnsやらでクラウドリソースそのものも制御できてしまうので、このあたりがk8sをより複雑にさせているのではないかと思うところです。

まとめ

用語は正直何でもいいし英語圏の人たちにちゃんと決めてほしいのですが、ともかく「デプロイするコンテナ」というのは通常のクラウドリソースとは別物なのではないか、ということが言いたかったことです。

Deploymentは「あるべき状態」が日々変化するため、そういう目的で管理するのが難しいですが、しかし統一的な「あるべき状態」を維持できるツールにしておかないと管理できていないサーバー（「構成ドリフト」とか「スノーフレークサーバー」とかそういうやつ）が生まれます。Resourceとはライフサイクルを分けつつ、コードと実態が乖離しない、そもそも乖離できないようにする構成を考えましょう。

クラウドインフラにおけるResourceとDeployment

  <a href="https://gist.github.com/nazo/6f285334555e465d4d4597f5a3dedaae#file-gistfile1-txt">gistfile1.txt</a>
  <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-gistfile1-txt" class="file my-2">
    

  <div itemprop="text" class="Box-body p-0 blob-wrapper data type-text  ">
      
<table class="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip>
      <tr>
        <td id="file-gistfile1-txt-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-gistfile1-txt-LC1" class="blob-code blob-code-inner js-file-line">utf8mb4にするとインデックス長でエラーが出るので（誰か直して）</td>
      </tr>
</table>


  </div>

  </div>
</div>



gistfile1.txt
  
  
    

  
      

      
        
        utf8mb4にするとインデックス長でエラーが出るので（誰か直して）

最近のアップデート