Getting started with Netlify and Aivenの翻訳です。

2023年9月12日

NetlifyとAivenを使い始める

Aivenが提供するデータサービスを使ってNetlify上にJAMstackウェブアプリケーションをデプロイする！

JavaScript、API、マークアップ(JAM)スタックを使って効率的でエレガントなアプリケーションを構築することに長けている、才能あるフロントエンド開発者のアレックスを紹介しましょう。フロントエンド開発が得意なアレックスですが、1つ戸惑うことがあります。それは、アプリケーションをプロダクショングレードのデータベースと通信させ、コードをローカルマシンから実際のライブ環境に移動させることです。

そんなとき、彼女はNetlifyとAivenのことを耳にした。NetlifyはJAMstackアプリケーションを簡単にホストしてデプロイできることで知られるプラットフォームであり、Aivenは信頼できるオープンソースのデータプラットフォームで、AlexはMySQLやRedisのような、信頼性が高くエンタープライズ対応のデータサービスを作成できる。

このチュートリアルでは、Alexがプロダクショングレードのデータベースとデプロイメントに関する知識をほとんど持たない開発者から、MySQLとRedisとシームレスに統合された、堅牢でセキュアでスケーラブルなNext.jsアプリケーションをNetlify上にデプロイするプロセスをマスターするまでの道のりに同行します。

でも...どうやって使うの？

百聞は一見にしかず。以下のアーキテクチャ図を見てみよう：

このアーキテクチャ図では、アプリケーションのライフサイクルを開発環境と本番環境の2つに分けている。

左側には、主人公のアレックスがほとんどの時間を過ごす開発環境があります。ここには3つの重要な要素が存在します：

1.localhost:8080を指すウェブブラウザ。アレックスが自分のアプリケーションとリアルタイムでやりとりし、その挙動を観察することができる。
2.アレックスがアプリケーションを一行ずつ作成するためのローカルソースコードファイル群。
3.3.ローカルでデータベースを実行するためのDockerイメージで、アレックスは開発プロセス中に、より現実的な本番のような環境をシミュレートできる。

Alexが自分の作業に満足したら、ローカル開発環境から中央に配置されたGitHubリポジトリにコードをプッシュする方法を矢印で示す。

図の中央では、GitHub のアイコンが開発環境と本番環境の橋渡しをしています。リポジトリにプッシュされるたびに、Webhook がアクションをトリガーして図の右側、つまり本番環境に導かれます。

本番環境では、成熟し、完全に実現された状態のアプリケーションを見ることができます。Netlify にデプロイされたアプリケーションは、安全で、スケーラブルで、信頼できるものです。何百万人ものユーザが利用する可能性があるプレッシャーの下でも、パフォーマンスを発揮する準備ができており、これは堅牢なアーキテクチャの証です。

本番アプリケーションは、Aiven for MySQLとAiven for Redis®*と通信しています。これらは私たちのアプリケーションの堅牢で信頼性の高いバックボーンであり、ユーザー負荷がスケールアップしてもパフォーマンスを維持するのに役立っています。

このアーキテクチャの流れを追うことで、アレックスのローカル開発セットアップから、何百万人ものユーザーにサービスを提供する頑丈な本番対応システムまで、アプリケーションの道のりを見ることができます。

夢中になってしまいました。何から始めたらいい？

素晴らしい！詳細なチュートリアルを用意しました。このチュートリアルでは、MySQLの代わりにPostgreSQL®データベースを使用しています。チュートリアルを完了したら、PostgreSQLとMySQLを入れ替えるのはとても簡単です。変更する部分を見てみましょう。

サービスのセットアップ

このチュートリアルは、いくつかの前提条件となるアカウントのセットアップとツールのインストールから始まります。その部分が完了し、Create free PostgreSQL and Redis servicesの部分に移ったら、このチュートリアルではPostgreSQLの代わりにMySQLサービスを作成してください。それが終わったら、次のようになります：

• Aiven for MySQLサービスが実行されています。
• AivenのRedisサービスが動作している

アプリケーション・コードの取得

このは、PostgreSQLバックエンドを使ったチュートリアルのオリジナルのGitHubリポジトリです。私はこのリポジトリをフォークし、代わりにMySQLバックエンドで動作するようにソースコードに変更を加えました。

GitHub CLI でリポジトリをフォークしてクローンしてください：

gh repo fork https://github.com/Aiven-Labs/nextjs-netlify-aiven-mysql.git \
    --clone --remote

このリポジトリの主な変更点は、ORM (Prisma)のプロバイダとスキーマの詳細が postgresql から mysql になったことと、レシピモデルです。レシピモデルでは、MySQL には配列のサポートが組み込まれていないため、String[] を String に置き換えている。prisma/schema.prisma`ファイルを見ると、以下のようになっている：

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model Recipe {
  id               Int      @id @default(autoincrement())
  recipeName       String   @map("recipe_name")
  prepTimeMinutes  Int      @map("prep_time_minutes")
  cookTimeMinutes  Int?     @map("cook_time_minutes")
  totalTimeMinutes Int      @map("total_time_minutes")
  servings         Int
  yield            String?
  ingredients      Json
  directions       String
  rating           Float
  url              String?
  imgSrc           String?
  nutrition        String?
  isLiked          Boolean  @default(false) @map("is_liked")

  @@map("recipes")
}

アプリケーションをデプロイする

チュートリアルの残りの部分に従ってアプリケーションをデプロイする。DATABASE_URL`変数には、PostgreSQLではなくMySQLデータベースのURLを使うことを忘れないでください。

次のステップ

Next.jsアプリケーションをNetlifyにデプロイし、バックエンドとして堅牢なデータプラットフォーム（そう、Aivenです）を利用できるようになったAlexは、Aivenプラットフォームで利用できる他のデータサービスについて学ぶことができます。アレックスは、Aivenが提供するサービスのビルトイン・ロギング・モニタリングの恩恵も受けることができる。さらに、Aiven Terraform Providerを活用することで、すべてのデータサービスの作成を自動化することができます。詳しくは以下のリンクをご覧ください：

• Aivenサービスを調べる
• Aiven モニタリングとログ
• Aiven Terraform Provider