電通総研のブログ

2022/10/27

Next.js + TypeScript + Docker + GitHub Actions の環境構築

こんにちは。X イノベーション本部ソフトウェアデザインセンターの陳です。この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。セットアップ手順以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テストフレームワークのJest、React Testing Libraryの設定 5. Dockerfileの作成 6. GitHub Actionsを利用したビルド、テストの自動実行バージョン Next.js v12.3.0 TypeScript v4.8.3 create-next-appでNext.jsのプロジェクトを作成 create-next-app はNext.jsプロジェクトを自動生成するためのコマンドです。 create-next-app を利用すると、Next.js + TypeScriptのプロジェクトのひな形を簡単に作成できます。公式ドキュメントはこちらです。 create-next-appを実行する以下のコマンドを実行し、プロジェクトを自動生成します。 $ npx create-next-app ｛プロジェクト名｝　--ts yarnを利用することもできます。 $ yarn create next-app ｛プロジェクト名｝ --typescript --ts また --typescript を指定することで、TypeScriptを利用するプロジェクトが生成されます。TypeScriptの設定ファイル tsconfig.json も自動的に作成されます。プロジェクトを動かしてみる作成されたプロジェクトのディレクトリで以下のコマンドを実行すると、Next.jsプロジェクトを開発モードで起動できます。 $ yarn dev localhost:3000 にアクセスするとこちらの画面が表示されます。これでプロジェクトのひな形の作成が完了しました。静的分析ツールESLintの設定 ESLintを実行する Next.js v11.0.0から create-next-app でプロジェクトを作成すると、ESLintは自動的にインストールされます。 package.json の Scripts に "lint": "next lint" がデフォルトで設定されています。以下のコマンドでESLintを実行できます。 $ yarn lint ESLintのデフォルト構成 Next.jsのESLintのデフォルト構成では、 eslint-config-next の構成が自動的に設定されます。以下のルールセットが eslint-config-next に含まれるため、インストール、設定する必要はありません。公式ドキュメントはこちらです。 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-next ESLintの構成をカスタマイズする .eslintrc.json を編集することで、構成をカスタマイズできます。 .eslintrc.json はESLintに関する設定ファイルです。以下のように extends に記述すれば、 eslint:recommended など、他の構成を利用できます。また rules でルールの変更や無効化の設定もできます。 //.eslintrc.json { "extends": [ "eslint:recommended", "next/core-web-vitals", ], "rules":{ // 個別のルールを変更、無効にする場合はこちらに追加する "no-console": ["warn", { allow: ["warn", "error"] }], "sort-imports": "off", "import/order": ["error", { alphabetize: { order: "asc" } }], "import/no-named-as-default-member": "off", } コードフォーマッターPrettierの設定 Prettierをインストールする以下のコマンドでPrettier本体、ESLintと併用する際に必要なライブラリーをインストールします。 $ yarn add -D prettier eslint-config-prettier .eslintrc. json を編集する .eslintrc.json を以下のように設定することで、ESLint と Prettier のコード整形が競合しないようになります。 //.eslintrc.json { "extends": ["next/core-web-vitals", "prettier"], } .prettierrcを作成するコード整形に関する設定をカスタマイズするには、ルートディレクトリで .prettierrc を作成します。以下のようにカスタマイズ設定ができます。設定の詳細は公式ドキュメントを参照してください。 //.prettierrc { "tabWidth": 2, "printWidth": 120, "trailingComma": "es5", "semi": false, "singleQuote": true } Prettierを実行する Prettierを実行するには、 package.json の Scripts に以下のスクリプトを追加します。 //package.json "scripts": { "format": "prettier --write --ignore-path .gitignore ." } 以下のコマンドでPrettierを実行できます。 $ yarn format テストフレームワークのJest、React Testing Libraryの設定 Jest、React Testing Libraryをインストールする Next.jsの公式ドキュメントを参照し、JestおよびReact Testing Libraryをインストール、設定します。 $ yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom jest.config.jsを作成するルートディレクトリでjestの設定ファイル jest.config.js を作成します。 //jest.config.js const nextJest = require('next/jest') const createJestConfig = nextJest({ dir: './', }) const customJestConfig = { moduleDirectories: ['node_modules', '<rootDir>/'], testEnvironment: 'jest-environment-jsdom', } module.exports = createJestConfig(customJestConfig) テストを実行してみるテストを実行するには、 package.json の scripts に以下のスクリプトを追加します。 //package.json "scripts": { "test": "jest" } サンプルテストを追加します。ルートディレクトリに test フォルダを作成し、 test の配下に index.test.tsx ファイルを作成します。 //index.test.tsx import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom/extend-expect' import Home from '../pages' describe('Home', () => { it('renders a heading', () => { render(<Home />) const heading = screen.getByRole('heading', { name: /welcome to next\.js/i, }) expect(heading).toBeInTheDocument() }) }) 以下のコマンドでテストをします。 $ yarn test テストが通ったことを確認できます。 Dockerfileの作成 Next.jsをDockerコンテナでデプロイするためのDockerfileのひな形を作成します。 Next.jsのstandaloneモードを有効にするまず、 next.config.js の設定を修正し、standaloneモードを有効にします。 //next.config.js const nextConfig = { output: 'standalone', } Next.js 12の最新バージョンではstandaloneモードを有効にすることで、ビルドサイズを大幅に削減できます。 yarn build により、 .next/standalone フォルダーが作成され、 node_modules の依存関係を含めたデプロイで必要となる最小限なファイルのみがコピーされます。 standalone に作成された sever.js を実行すれば本番アプリケーションを実行できます。 Dockerfileを作成する Next.jsの公式サンプルを参考しつつ、Distrolessで実行するマルチビルドのDockerfileを作成します。 FROM node:16 AS build ADD . /app WORKDIR /app RUN yarn install --production=false RUN yarn build FROM gcr.io/distroless/nodejs:16 WORKDIR /app COPY --from=build /app/next.config.js ./ COPY --from=build /app/public ./public COPY --from=build /app/package.json ./package.json COPY --from=build /app/.next/static ./.next/static COPY --from=build /app/.next/standalone ./ CMD ["server.js"] ローカルでDockerコンテナを実行してみる以下のコマンドでコンテナをビルド、実行できます。 $ docker build -t ｛イメージ名｝ . $ docker run -p 3000:3000 ｛イメージ名｝ GitHub Actionsを利用したビルド、テストの自動実行 pushをトリガーにしてビルドおよびテストを自動実行する GitHub Actionsを作成します。ルートディレクトリで .github/workflows フォルダーを作成し、配下に build-and-test-on-push.yml を作成します。 on: push: branches-ignore: - "main" name: Build and Test on Push jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: docker build run: docker build . run-tests: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 16 - name: Install Dependencies run: yarn install - name: Run test run: yarn run test Dockerを利用しない場合は、 yarn build でビルドを実行できます。まとめ今回はNext.jsの環境構築の方法をまとめてみました。環境構築のほとんどは公式ドキュメントを参考にスムーズにできました。 create-next-app を利用すると手動で設定する部分が少なくなるので、便利かと思います。また、CI環境の構築でDockerfileや GitHub Actionsの作成手順もまとめてみました。興味のある方はぜひ試してみてください。私たちは同じチームで働いてくれる仲間を探しています。今回のエントリで紹介したような仕事に興味のある方、ご応募お待ちしています。 - ソリューションアーキテクト執筆： @chen.xinying 、レビュー： @handa.kenta （ Shodo で執筆されました）

電通総研 の技術ブログ

コンテンツ

電通総研の技術ブログ