Chapter 02

プロジェクトを作成する

shitakemura
shitakemura
2022.02.12に更新

はじめに

本チャプターでは、フロントエンド、インフラ&バックエンドそれぞれのベースとなるプロジェクトを作成します。
フロントエンドはNext.js、インフラ&バックエンドはAWS CDKの CLI コマンド を使用します。

ルートディレクトリを作成

任意の名前でルートディレクトリを作成します。
ここではnext-graphql-todo-appとします。

フロントエンドのプロジェクトを作成

ルートディレクトリで以下コマンドを実行し Next.js プロジェクトを作成します。

$ npx create-next-app@latest frontend --typescript
$ cd frontend

frontend プロジェクトを開き、index.tsx を以下に変更します。

./frontend/pages/index.tsx
import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Todo App - frontend</title>
      </Head>
      <main>
        <h1>Todo App</h1>
      </main>
    </div>
  );
};

export default Home;

$ npm run devを実行し、http://localhost:3000を起動します。
画面に Todo App と表示されるのを確認します。

インフラ&バックエンドのプロジェクトを作成

ルートプロジェクトで以下のコマンドを実行し、CDK プロジェクトを作成します。

./
$ mkdir infra-backend
$ cd infra-backend
$ cdk init app --language typescript

cdk deployコマンドを実行します。

./infra-backend
$ cdk deploy

AWS の管理画面を開いてCloudFormation > スタックInfraBackendStackという名前のスタックが作成できているのを確認します。

以上でフロントエンド、インフラ&バックエンドのプロジェクト作成は完了です。

参考情報