<p>TypeScriptで書いたアプリケーションをコンテナにしてデプロイしたくなったのでやり方を記録します。<br>今回作ったアプリケーションはTwitterのBotなので、HTTPリクエストを起点に起動するアプリケーションではなく、常時起動していてタイムラインをストリーミングするようなものです。<br>そのため、ポートフォワーディングはしていません。<br>HTTPリクエストを受け取るアプリケーションの場合は、ポートの割当が必要となります。<br><br>Dockerfile</p><pre><code>FROM node:14 AS builder
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
RUN yarn build

FROM node:14 AS runner
WORKDIR /app
COPY --from=builder app/dist ./dist
COPY package*.json ./
RUN yarn install --production
# COPY .env ./
CMD ["yarn", "start"]</code></pre><p><br>ビルド</p><pre><code>docker build . -t [IMAGE_NAME]</code></pre><p><br>実行</p><pre><code>docker run -it --rm --name [CONTAINER_NAME] [IMAGE_NAME]</code></pre><p><br>ビルド結果のイメージを軽くするために、マルチステージビルドを行います。<br>builderでは、devDependenciesを含めたすべての依存をインストールし、TypeScript → Node.jsへのコンパイルを行います。<br>runnerでは、builderでコンパイルされた成果物のdistディレクトリをコピーし、dependenciesの依存だけをインストールします。<br>成果物として得られるイメージには、コンパイル後のJSファイル、package(-lock).json、node_modules(dependenciesのみ)が含まれます。<br>コンテナを実行すると、<code>yarn start</code>が実行されてアプリケーションが起動します。<br><br>環境変数については、デプロイする環境によって、アプリケーションに注入する方法が異なると思います。<br>開発時は、ローカル環境で作成した.envをコンテナ内にコピーすることで動かしています。<br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/" target="_blank" rel="noopener noreferrer">Node.js Web アプリケーションを Docker 化する</a><br><a href="https://future-architect.github.io/typescript-guide/deploy.html" target="_blank" rel="noopener noreferrer">成果物のデプロイ</a></p>

TypeScriptで作ったアプリケーションをコンテナで実行する

<p>Next.jsをTypeScriptで使用するときのテンプレートを作りました。<br><a href="https://github.com/EringiV3/nextjs-with-typescript-template" target="_blank" rel="noopener noreferrer">nextjs-with-typescript-template</a><br><br>Reactを使った素振りでなにか作るときにNext.jsで始めるということが今後増えていきそうという理由で作った、よく使いそうなツールをまとめた自分用のテンプレートです。<br></p><h2 id="hcb7debd359">型チェック</h2><p>tscで型チェックを行います。<br>設定のベースは、<code>create-next-app</code>の<code>with-typescript</code>テンプレートです。一部理解できていないオプションもあります。</p><pre><code>  // tsconfig.json
  {
  	  "compilerOptions": {
  	    "allowJs": true,
  	    "alwaysStrict": true,
  	    "esModuleInterop": true,
  	    "forceConsistentCasingInFileNames": true,
  	    "isolatedModules": true,
  	    "jsx": "preserve",
  	    "lib": ["dom", "es2017"],
  	    "module": "esnext",
  	    "moduleResolution": "node",
	    "noEmit": true,
	    "noFallthroughCasesInSwitch": true,
	    "noUnusedLocals": true,
	    "noUnusedParameters": true,
	    "resolveJsonModule": true,
	    "skipLibCheck": true,
	    "strict": true,
	    "target": "esnext"
	  },
	  "exclude": ["node_modules"],
	  "include": ["**/*.ts", "**/*.tsx"]
}</code></pre><h3 id="h55f399465c">上記のオプションについて</h3><h4 id="hb039bf5c37">allowJs</h4><p>ts, tsxファイル以外のimportの許容。</p><h4 id="hd47cceef11"><br>alwaysStrict</h4><p>各ファイルへ"use strict"をつけて出力することを保証する。出力されたJSファイルはECMAScriptのStrictモードで実行される。<br>Strictモードについては以下を参照。<br><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode</a></p><h4 id="h3409ec6782"><br>forceConsistentCasingInFileNames</h4><p>ファイル名の大文字小文字を区別する。</p><h4 id="h41e78fccb6"><br>jsx</h4><p>jsx構文がどのようにファイルに出力されるかを制御するオプション。preserve, react, react-nativeがありpreserveではJSXを変更することなく.jsxファイルを出力する。</p><h4 id="h2429723d62"><br>lib</h4><p>コンパイルする際に使用する組み込みのJS API型定義や、ブラウザ上で使用されるAPIの型定義のライブラリを指定する。</p><h4 id="h569853fc43"><br>module</h4><p>出力されるJSのモジュールの形式を指定する。CommonJS形式（exports.<em>*</em>）かESModules（export ***)かを指定。</p><h4 id="h013bb79419"><br>noEmit</h4><p>JavaScript ソースコード、ソースマップ、型定義のファイルを出力しないようにします。型チェック機能だけを使用する場合にtrueにする。Next.jsはtscを使わずに内部でBabelでコンパイルしているらしい。</p><h4 id="h81f34f443a"><br>noFallthroughCasesInSwitch</h4><p>switch 文において、次の case へ処理を持ち越した場合にエラーを報告する。 switch 文内の空でない case 句が、<code>break</code>または<code>return</code>を含むことを確約する。</p><h4 id="h3f05325621"><br>noUnusedLocals&nbsp;</h4><p>利用されていないローカル変数について、エラーを報告する。</p><h4 id="h073eff5af4"><br>noUnusedParameters</h4><p>利用されていない関数のパラメータについて、エラーを報告する。</p><h4 id="h1d3b2652d5"><br>resolveJsonModule</h4><p>.json拡張子のファイルをモジュールとしてimportできるようにする。</p><h4 id="h4d18de3828"><br>skipLibCheck</h4><p>型定義ファイルのチェックをスキップすることで、コンパイル実行時間を短縮する。</p><h4 id="h60a8fab09d"><br>strict</h4><p>プログラムの正しさを強く保証するための幅広い型チェックの挙動を有効化する。<code>strictBindCallApply, strictFunctionTypes, strictNullChecks, strictPropertyInitialization</code>オプションの有効化と等価。</p><h4 id="he608e7281d"><br>target</h4><p>出力されるJSのバージョンの指定。<br></p><h3 id="h3daed9a170">理解できていないオプション</h3><ul><li>isolatedModules</li><li>moduleResolution</li><li>esModuleInterop</li></ul><p><br></p><h2 id="h16cfc26709">linter, formatter</h2><p>ESLint + Prettierの構成です。</p><pre><code>// .eslintrc.json
{
	  "parser": "@typescript-eslint/parser",
	  "extends": [
	    "plugin:@typescript-eslint/recommended",
	    "plugin:react/recommended",
	    "plugin:prettier/recommended",
	    "plugin:prettier/react",
	    "plugin:prettier/@typescript-eslint"
	  ],
	  "plugins": ["@typescript-eslint", "react", "prettier"],
	  "rules": {
	    "react/react-in-jsx-scope": "off"
	  },
	  "globals": {
	    "React": "writable"
	  }
}</code></pre><h3 id="hc4b37ec9fa">上記の設定について</h3><h4 id="h4d3db041c2">parser</h4><p>ESLintがTypeScriptをパースできるようにするためのパーサの指定。</p><h4 id="h39efb78aba"><br>extends</h4><p>pluginによって提供されるルールを使用することによって設定を拡張するという理解。「plugin:{プラグイン名}/{設定名}」という形で指定する。<br></p><ul><li><strong>plugin:@typescript-eslint/recommended</strong></li></ul><p>			TypeScript用のESLintルール<br><br></p><ul><li><strong>plugin:react/recommended</strong></li></ul><p>			React用のESLintルール<br><br></p><ul><li><strong>plugin:prettier/recommended</strong></li></ul><p>			ESLintとPrettierを共存させるためのルール。ESLintのフォーマットに関する設定を全てOFFにし、フォーマットに関してはESLintの中からPrettierにすべて任せる<br><br></p><ul><li><strong>plugin:prettier/react</strong></li></ul><p>			eslint-plugin-reactのフォーマットに関するルールをOFFにする。<br><br></p><ul><li><strong>plugin:prettier/@typescript-eslint</strong></li></ul><p>			競合するESLintのルールを無効化する。最後に書く必要があるっぽい。</p><h4 id="h189bb9ce89"><br>plugins</h4><p>eslint-plugin-xxxのxxxの部分を指定する（eslint-plugin-は省略可能なため）。xxxに関する設定の塊みたいな認識。</p><ul><li>@typescript-eslint</li><li>react</li><li>prettier</li></ul><h4 id="h4fe0a49a06"><br>rules</h4><p>特定のルール（最小単位）のON/OFFを切り替える。</p><ul><li><strong>react/react-in-jsx-scope</strong></li></ul><p>			Next.jsでは各jsx/tsxファイル内でReactをimportする必要がないので、OFFにする。</p><h4 id="h1955b7641d"><br>globals</h4><p>実行時に追加するグローバル変数の追加の指定。writableを指定することで変数に対しての書き込みも可能になる。</p><ul><li><strong>React</strong></li></ul><p>			Next.jsでは各jsx/tsxファイルでReactをimportしないため。<br><br><br>フォーマットに関する設定は.prettierrcに書く。</p><pre><code>// .prettierrc
{
	  "semi": true,
	  "singleQuote": true
}</code></pre><p><br></p><h2 id="h63ad3943f9">テスト</h2><p>jestでユニットテストを実行します。</p><pre><code>// jest.config.js
module.exports = {
	  roots: ['&lt;rootDir&gt;/src'],
	  testMatch: [
	    '**/__tests__/**/*.+(ts|tsx|js)',
	    '**/?(*.)+(spec|test).+(ts|tsx|js)',
	  ],
	  transform: {
	    '^.+\\.(ts|tsx)$': 'ts-jest',
	  },
	};</code></pre><p><br>今回作ったテンプレートでは「<strong>tests</strong>」というディレクトリを作って、その中に「xxx.test.ts」のようなファイルを作って<code>yarn test</code>でテストを実行するようにしています。<br></p><h2 id="h193252ff15">precommit</h2><p>huskyを使用して、precommitのhookで型チェック・lint・テストを回しています。<br>規約を破るソースコードはpushさせないという思想です。<br></p><h2 id="hfdbb292dd3">テンプレートを作ってみた感想</h2><ul><li>設定が多い。とはいえ、Next.jsがBabelやwebpackの設定を隠蔽してくれているので楽な方なんだと思う。</li><li>ESLintは特に複雑に感じる。ただ、今回テンプレートを作ってみたことでESLintへの理解度は上がった。</li><li>大変だけど、最初にこのへんの設定をセットアップしておけば後から設定の中身を変更することは大変じゃないのでテンプレートを作った価値はあった。特にリントツールは初期に導入を済ませておくことに価値があるはず。</li><li>このテンプレートを使ってNext.jsの素振り頑張る。</li></ul><p><br></p>

Next.jsのTypeScriptテンプレートを作った

<h2 id="h9707d3a59a">概要</h2><p>ブログに動的OGP生成機能を追加しました。<br>そのために、初めて自分でnpmパッケージを開発して公開しました。<br><a href="https://www.npmjs.com/package/node-ogp-creator" target="_blank" rel="noopener noreferrer">node-ogp-creator</a><br><a href="https://github.com/EringiV3/node-ogp-creator" target="_blank" rel="noopener noreferrer">リポジトリ</a><br><br>node-ogp-creatorを使用すると以下のようなOGP画像を動的に生成することができます。<br><img src="https://images.microcms-assets.io/assets/702dbaa8dfa34d1195fd2644792b2156/3af8d2430297287f2f840c005af884cd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-10-19%2022.58.39.png" alt=""><br><br>node-ogp-creatorでは、canvasに文字列を描画してpngに出力しています。<br>使用方法は以下のような感じです。</p><pre><code>// gatsby-node/index.ts  
blogResult.data.allMicrocmsBlog.edges.forEach(({ node, next, previous }) =&gt; {
    createOGP({
      title: node.title || "",
      path: `public/ogp/${node.slug}.png`,
      userName: TWITTER_ACCOUNT || "",
      width: 640,
      height: 480,
      fontPath: "fonts/NotoSansCJKjp-Regular.otf",
      styles: {
        font: "Noto Sans CJK JP",
        fontSize: 30,
      },
    })
    createPage({
      path: `/blog/post/${node.slug}`,
      component: path.resolve(`./src/templates/blogPostTemplate.tsx`),
      context: {
        id: node.id,
        next,
        previous,
      },
    })
  })</code></pre><p><br></p><h2 id="h96946ab337">もう少し詳細</h2><ul><li>tiny-segmenterというライブラリを使用して、タイトル文字列の形態素解析を行い、不自然な位置での改行を避けるようにしています</li><li>全角文字列は2文字、半角文字列は1文字としてカウントし、文字列幅の調整をいい感じにやっています</li><li>フォントファイルの指定をできるようにしているのは、デフォルトだと日本語が文字化けするためです</li><li>背景に画像を設定することは現状はできません。気が向いたら対応するかもしれないです</li></ul><p><br></p><h2 id="h1331c56b22">作ってみた感想</h2><p>まず、人生初npm publishできたのが嬉しかったです。<br>公開して実際に自分でyarn addして使ってみたら文字化けしまくりで使い物にならなかったときはショックでしたが。<br>タイトルの座標計算が結構しんどくて、世の中の自作OGP画像生成コード作っている人たちはすごいなと思いました。<br>Node.js + TypeScriptにも慣れてきました。今回のライブラリ開発では初めてJestを使ってテストコードも書きました。<br>ツール周りの理解（prettier, ESLint, babelなど）が浅いのでどこかのタイミングでちゃんと時間撮って勉強したいです。<br><br>SNSシェアボタンの追加、動的OGP生成、シンタックスハイライト（jsxのハイライト壊れる問題はprismjs → hightlight.jsに乗り換えることで解決しました）が揃ったことで、自作技術ブログに必要な機能は大体揃ってきたかな、という印象です。TypeScript化もすでに終わったので、ブログへの機能追加は一旦このへんで落ち着いておこうかなと思います。余裕があったら目次リンク対応とかやりたいです。</p>

ブログに動的OGP生成機能を追加しました

<p>Typescript + Node.jsの素振りとして、「BacklogとJiraのdiffをとってJSONに吐き出す」スクリプトを作りました。<br><a style="color:#6b46c1" href="https://github.com/EringiV3/backlog-jira-diff" target="_blank" rel="noopener noreferrer">backlog-jira-diff</a><br><br>作ろうと思った背景としては以下です。完全に自分用です。</p><ul><li>BacklogとJiraの両方を使用していて二重管理になっている</li><li>Jiraのチケットを完了にしたのに紐づくBacklogの課題を完了にしわすれてしまう</li></ul><p><br>Backlogで未完了の課題のIssueKeyをJiraチケットのタイトル or 説明欄に含めるというルールで運用されているという前提です。<br><br>Backlog APIとJira APIについては、クライアントライブラリがあったのでAPI呼び出し部分を自分で実装することなく楽ができました。</p><ul><li><a style="color:#6b46c1" href="https://github.com/jira-node/node-jira-client" target="_blank" rel="noopener noreferrer">node-jira-client</a></li><li><a style="color:#6b46c1" href="https://github.com/nulab/backlog-js" target="_blank" rel="noopener noreferrer">backlog-js</a></li></ul><p><br>Gatsby.jsのTypescript化をしたので、Node.js環境でのTypeScriptを書いた経験は一応あるのですが、ノンフレームワークな素のNode.js + TypeScriptは初めてだったので詰まったところを記録しておきます。<br>というか振り返ってみたらそもそもNode.jsすらロクに書いたことがなかった。</p><h3 id="h9bb32e62a5">dotenvの環境変数読み込み</h3><p>.envファイルから環境変数を読み込むためにdotenvをimportして使用することは一般的だと思います。ただ、コードの位置によってprocess.envから取得できたりできなかったりしました。<br>原因は、dotenv.config()の実行位置でした。config()実行時に.envから環境変数を取得してprocess.envに反映してくれるようです。<br>import直後にconfig()を実行するようにしたら、process.envからundefinedではなくちゃんと設定した期待通りの値が帰ってくるようになりました。</p><pre><code> import dotenv from "dotenv";
  dotenv.config();  </code></pre><h3 id="ha8c3590148">Promise.all()の使い所</h3><p>Promiseについては、<a style="color:#6b46c1" href="https://azu.github.io/promises-book/#introduction" target="_blank" rel="noopener noreferrer">JavaScript Promiseの本</a>で学習しました。<br>概念はなんとなく覚えていたのですが、具体的な使用場面が想像できないままで使った経験もありませんでした。<br>ただ、今回はBacklogの課題一覧取得のAPIの制約（取得上限が100件）により、プロジェクトごとに別々のAPI呼び出しが必要だと考え、Promise.allを使ってみました。</p><pre><code> const undoneTickets: BacklogGetIssuesResponse[][] = await Promise.all(
      this.targetProjectIds.map(
        async (projectId) =&gt;
          (await this.client.getIssues({
            projectId: [projectId],
            keyword: "",
            statusId: this.undoneStatusIds,
            count: 100,
          })) as BacklogGetIssuesResponse[]
      )
    );
  </code></pre><p>mapでPromiseの配列を受け取りそれらがすべてresolveされるまで待つ、というのがちゃんと理解できました。<br></p><h3 id="hdf634c6c70">ライブラリからimportするときによくみる「@」</h3><p>import時のpathの指定を相対パスではなく、絶対パスで書くための記法。必ずしも@から始まる必要はないが@がスタンダードっぽい。<br>tsconfig.jsonのpathsの指定で設定できる。</p><pre><code> // tsconfig.json
    "baseUrl": "./",
    "paths": {
      "@types": ["./src/types"]
    }

    // importする側
    import { SearchJiraResponse, DoneJiraTicket } from "@types";
  </code></pre>

eringiv3.dev

Category: TypeScript

TypeScriptで作ったアプリケーションをコンテナで実行する

Next.jsのTypeScriptテンプレートを作った

ブログに動的OGP生成機能を追加しました

Typescript + Node.jsの練習