nextjsのBackendを考える

nextjsのBackendを考える

まずチャットに聞いてみる

nextjsのbackendを無料のサービスで構築したいのですがどんな選択肢がありますか？

Next.jsのバックエンドを無料で構築するためのいくつかの選択肢があります。以下はそのいくつかです。

1. **Vercel Functions**: VercelはNext.jsのチームによって開発されたホスティングプラットフォームで、Vercel Functionsと呼ばれるサーバーレス関数を提供しています。これにより、Next.jsアプリケーションのバックエンドを構築できます。Vercelは無料のプランも提供しています。

2. **Heroku**: Herokuは、Node.jsアプリケーションを簡単にデプロイできるクラウドプラットフォームです。Herokuは無料のプランを提供しており、これを使用してNext.jsアプリケーションのバックエンドをホストすることができます。

3. **Netlify Functions**: Netlifyは、静的サイトをホストするための人気のあるプラットフォームですが、Netlify Functionsを使用してサーバーレスバックエンドを追加することもできます。Netlifyは無料のプランも提供しています。

4. **Firebase Cloud Functions**: Firebaseは、Googleが提供するモバイルおよびWebアプリケーション開発プラットフォームで、Firebase Cloud Functionsを使用してサーバーレスバックエンドを構築できます。Firebaseは無料のプランも提供しています。

これらは一般的な選択肢であり、Next.jsのバックエンドを無料でホストするために利用できます。それぞれのプラットフォームのドキュメントやチュートリアルを参照して、あなたのニーズに最適なものを選択してください。

Vercelがいいらしい。

vercel.com

趣味利用なので、趣味なら、無料のプランもあるので良さそう。

フロントはこれが良さそうだとして、Backendはどうしたらいいんだろう

planetscale+nextjsを使うという手もあるらしいが

開発したくないのでヘッドレスCMS等で考える

 

フロントは、create.xyzを利用して作る

www.create.xyz

 

Supabaseを利用する。

supabase.com

supabase.com

vercel.com

vercel.com

supabase.com

Firebaseを利用する。

zenn.dev

firebase.google.com

strapiを利用する。

月額$7〜

hanzochang.com

 

vercel.com

wordpressを利用する。

月額 $13.17～

cloud.google.com

zenn.dev

vercel.com

次は何しよう？

今の状況

  • いろんなOSSを確認してAIでスケルトンを作成したいので一般的な構成を勉強したい
  • 自分で管理するコードを最小限にしたいのでノーコード的なのを効果的に利用していきたい。
  • GCP無料期間があるのでGCPを使いたい
  • wordpressを使った感じ、もっとシンプルにコンテンツを管理したい
  • wordpressや他のCMSの動作を確認してみたい

AIとの対話

Vue.jsもしくはReactベースのCMSでMITライセンスのものを教えて。

Vue.jsもしくはReactベースのCMSでMITライセンスのものを以下に挙げます。

Vue.jsベース

  • Nuxt.js

Nuxt.jsは、Vue.jsのフレームワークです。ヘッドレスCMSとしても利用できます。Nuxt.jsは、静的サイトジェネレーターとしても利用できるため、パフォーマンスに優れ、SEOにも有利です。また、コンポーネントベースの開発が可能なため、開発効率が向上します。

  • microCMS

microCMSは、APIベースのヘッドレスCMSです。Vue.jsをはじめ、ReactやAngularなどのフロントエンドフレームワークと組み合わせて利用できます。microCMSは、日本語対応が充実しており、日本語のサイトを構築する場合に適しています。

  • Strapi

Strapiは、オープンソースのヘッドレスCMSです。Vue.jsをはじめ、ReactやAngularなどのフロントエンドフレームワークと組み合わせて利用できます。Strapiは、カスタマイズ性に優れており、独自の機能を追加しやすいのが特徴です。

  • Directus

Directusは、データベースベースのヘッドレスCMSです。Vue.jsをはじめ、ReactやAngularなどのフロントエンドフレームワークと組み合わせて利用できます。Directusは、データベースの操作を直感的に行うことができるのが特徴です。

Reactベース

  • Contentful

Contentfulは、APIベースのヘッドレスCMSです。Reactをはじめ、Vue.jsやAngularなどのフロントエンドフレームワークと組み合わせて利用できます。Contentfulは、豊富な機能と柔軟性を備えたCMSです。

  • Sanity

Sanityは、データベースベースのヘッドレスCMSです。Reactをはじめ、Vue.jsやAngularなどのフロントエンドフレームワークと組み合わせて利用できます。Sanityは、データベースの操作を直感的に行うことができるのが特徴です。

選定基準

これらのCMSは、いずれもVue.jsもしくはReactとの相性が良好であり、さまざまな用途で利用できます。

具体的な選定基準としては、以下のようなものが挙げられます。

  • 機能性

CMSに必要な機能がすべて搭載されているかどうかを確認します。

  • カスタマイズ性

独自の機能を追加したい場合は、カスタマイズ性の高いCMSを選択します。

  • パフォーマンス

パフォーマンスに優れたCMSを選択することで、サイトの表示速度を向上させることができます。

  • 料金

無料または低価格で利用できるCMSであれば、コストを抑えることができます。

ご自身のニーズに合わせて、最適なCMSを選択してください。

よく見るとMITライセンスじゃないのでライセンスは公式ページを見てください。

 

 

Firebaseのalternativeを教えてください。

Firebaseは、Googleが提供するモバイルアプリとWebアプリの開発に役立つプラットフォームです。Firebaseには、データベース、認証、分析、通知など、さまざまな機能が搭載されています。

Firebaseのalternativeとしては、以下のようなものが挙げられます。

  • サーバーレスプラットフォーム

サーバーレスプラットフォームは、サーバーやネットワークの管理を必要とせずに、WebアプリケーションやAPIを開発できるプラットフォームです。Firebaseと同様に、データベース、認証、分析、通知などの機能を提供しています。

例：AWS Lambda、Azure Functions、Google Cloud Functions

  • ヘッドレスCMS

ヘッドレスCMSは、コンテンツを管理するためのAPIを提供します。フロントエンドフレームワークやライブラリと組み合わせて、さまざまなWebアプリケーションやAPIを構築できます。Firebaseと同様に、データベース、認証、分析などの機能を提供しているものもあります。

例：Contentful、Sanity、Strapi

オープンソースプラットフォームは、無料で利用できるプラットフォームです。Firebaseと同様に、データベース、認証、分析、通知などの機能を提供しています。

例：Supabase、Parse、Back4App

Firebaseのalternativeを選択する際には、以下の点を考慮するとよいでしょう。

  • 機能性

Firebaseに必要な機能がすべて搭載されているかどうかを確認します。

  • コスト

Firebaseの料金と、alternativeの料金を比較します。

  • 技術力

Firebaseのalternativeを利用する際に必要な技術力を確認します。

  • サポート

Firebaseのalternativeのサポート体制を確認します。

ご自身のニーズに合わせて、最適なalternativeを選択してください。

 

 

検索した結果

なんとなくStrapiとSupabaseとFirebaseが気になる。

次はStrapiを使ってみよう

github.com

 

zenn.dev

zenn.dev

 

 

qiita.com

 

 

GKEでWordPressを構築する。

用語説明

GKEとは？

cloud.google.com

Google Kubernetes Engine（GKE）は、Googleが管理するKubernetesのオープンソースコンテナオーケストレーションプラットフォームです。

GKEは、Google Cloudのインフラストラクチャ上で、コンテナ化されたアプリケーションのデプロイや運用管理を行うためのマネージドなKubernetesクラスタを利用できるサービスです。
GKEは、Googleの社内クラスタ管理システムであるBorgで長年培った本番環境ワークロードの大規模運用の経験を生かして開発されたシステムです。
GKEは、Kubernetesをより簡単かつ安全に使っていただくための機能を多く持っています。GKEのアーキテクチャは、大きくControl PlaneとNodeというコンポーネントに分かれています。
 
GKEは、Kubernetesのマネージドサービスであり、Kubernetesの知識を活かして細かい設定やカスタマイズが可能です

 WordPressとは？

wordpress.com

WordPress（ワードプレス）は、ブログやWebサイトを作成できるコンテンツ管理システム（CMS）の一種です。PHPというプログラミング言語で作られており、世界中のサイトの約4分の1はWordPressで構築されていると言われています。
WordPressは、専門的なプログラミング知識がなくても直感的にブログやサービスサイトを作成できます。また、本格的なサイトを簡単に開設できる、記事の作成・更新が簡単にできる、テーマを使ってデザインを簡単に変更できる、プラグインを使って機能を手軽に追加できる、独自ドメインでブログ運営できる、複数のユーザーでブログ運営できる、低コストでブログ運営できるなどのメリットがあります。
WordPressはオープンソースのソフトウェアで、無料です。レンタルサーバーなどにインストールして使用します

 

AIとの対話

対話AIはBardだったりChatGPTだったりします。

 

gke を利用してwordpressを構築したい

Google Kubernetes Engine（GKE）を利用してWordPressを構築するには、次の手順を実行します。
  1. WordPressアプリコンテナをホストするGKEクラスタを作成します。Cloud Shellでpersistent-disk-tutorialという名前のGKEクラスタを作成し、作成した新しいクラスタに接続します。
  2. GKEはVPCネイティブで作成する必要があります。VPCネイティブでGKEを作成する場合は、--enable-ip-aliasオプションを付けて作成します。
  3. WordPressとcloudSQLの通信は内部ネットワークを使用することを前提としているので、MySQLの代わりにGCPのCloud SQLを使用します。
  4. コンテナの外部ストレージとしてPersistentVolumes（PV）とPersistentVolumeClaims（PVC）を使用してデータを保存します。
GKEの公式チュートリアル（kubernetes.io）をはじめ、まとまっている情報を確認できます

紹介されたサイト

 

cloud.google.com

hyoublog.com

ponpon-soft.com

fand.jp

 

具体的なコマンド

完全な初心者だと公式のドキュメントと以下のサイトがわかりやすかったです。

Persistent Disk と Cloud SQL を使用して GKE に WordPress をデプロイする  |  Kubernetes Engine  |  Google Cloud

GKEチュートリアルやってみる その２ ~ GKEでWordPress ~ - 開発日報

なるべく料金やすく構築したいのでregionなどは以下も参考にします。

(ただし有料の部分を含みます。)

[GCP無料枠のみで構築]#2:GKEにてアプリケーション実行

cloud.google.com

 

  1. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    プロジェクト セレクタに移動

  2. Google Cloud プロジェクトで課金が有効になっていることを確認します。

    3.

  3. Google Cloud コンソールで、「Cloud Shell をアクティブにする」をクリックします。

    Cloud Shell をアクティブにする

  4. Cloud Shell で、GKE と Cloud SQL Admin API を有効にします。
     
    gcloud services enable container.googleapis.com sqladmin.googleapis.com
 

  1. Cloud Shell で Google Cloud CLI のデフォルト リージョンを設定します。

     
    export REGION=us-west1
    gcloud config set compute/region $REGION

  2. 環境変数 PROJECT_ID に Google Cloud プロジェクト ID（project-id）を設定します。PROJECT_IDは、シェルを動かしているなら、左の括弧内に書かれている文字です。

     
    export PROJECT_ID=my-test

     

  3. GitHub リポジトリからアプリ マニフェスト ファイルをダウンロードします。

     
    git clone https://github.com/GoogleCloudPlatform/kubernetes-engine-samples

  4. wordpress-persistent-disks ファイルのあるディレクトリに変更します。

     
    cd kubernetes-engine-samples/quickstarts/wordpress-persistent-disks

  5. WORKING_DIR 環境変数を設定します。

     
    WORKING_DIR=$(pwd)

     

WordPress アプリコンテナをホストする GKE クラスタを作成します。

  • Cloud Shell で persistent-disk-tutorial という名前の GKE クラスタを作成します。

     
    export CLUSTER_NAME=persistent-disk-tutorial
    gcloud container clusters create    -auto $CLUSTER_NAME

    作成した新しいクラスタに接続します。

     
    gcloud container clusters get-credentials $CLUSTER_NAME --region $REGION

     

永続的に保存するためにPVCを利用します。

このマニフェスト ファイルには、200 GB のストレージを必要とする PVC が記述されているので、一応1GBに変えてからapplyします。

  1. Cloud Shell で、マニフェスト ファイルをデプロイします。

     

    vim $WORKING_DIR/wordpress-volumeclaim.yaml
    kubectl apply     -f $WORKING_DIR/wordpress-volumeclaim.yaml
    kubectl get persistentvolumeclaim

  1. Cloud Shell で、mysql-wordpress-instance という名前のインスタンスを作成します。

     
    INSTANCE_NAME=mysql-wordpress-instance
    gcloud sql instances create $INSTANCE_NAME

  2. 環境変数にインスタンス接続名を追加します。

     
    export INSTANCE_CONNECTION_NAME=$(gcloud sql instances describe $INSTANCE_NAME --format='value(connectionName)')

  3. WordPress のデータを保存するデータベースを作成します。

     
    gcloud sql databases create wordpress --instance $INSTANCE_NAME

  4. wordpress というデータベース ユーザーとパスワードを作成します

     
    CLOUD_SQL_PASSWORD=$(openssl rand -base64 18)
    gcloud sql users create wordpress     --host=% --instance $INSTANCE_NAME --password=$CLOUD_SQL_PASSWORD

    Secretに保存するまでメモしておいてください。

これで、新しい WordPress ブログ用のデータベースの設定が完了しました。

  1. WordPress アプリが Cloud SQL Proxy を介して MySQL インスタンスにアクセスできるようにするには、サービス アカウントを作成します。

     
    SA_NAME=cloudsql-proxy
    gcloud iam service    -accounts create $SA_NAME --display-name $SA_NAME

  2. サービス アカウントのメールアドレスを環境変数として追加します。

     
    SA_EMAIL=$(gcloud iam service-accounts list --filter=displayName:$SA_NAME --format='value(email)')

  3. サービス アカウントに cloudsql.client ロールを追加します。

     
    gcloud projects add-iam-policy-binding $PROJECT_ID --role roles/cloudsql.client --member serviceAccount:$SA_EMAIL

  4. サービス アカウントのキーを作成します。

     
    gcloud iam service-accounts keys create $WORKING_DIR/key.json --iam-account $SA_EMAIL

    次のコマンドを実行して、key.json ファイルのコピーをダウンロードします。

    DB接続が失敗したら、このファイルのPROJECT IDなどがおかしくないか見てください。

  5. MySQL 認証情報に Kubernetes Secret を作成します。

     
    kubectl create secret generic cloudsql-db-credentials --from-literal username=wordpress --from-literal password=$CLOUD_SQL_PASSWORD

  6. サービス アカウントの認証情報に Kubernetes シークレットを作成します。

     
    kubectl create secret generic cloudsql-instance-credentials --from-file $WORKING_DIR/key.json

  1. INSTANCE_CONNECTION_NAME 環境変数を置き換えてファイルを準備します。

     
    cat $WORKING_DIR/wordpress_cloudsql.yaml.template | envsubst >  $WORKING_DIR/wordpress_cloudsql.yaml

  2. wordpress_cloudsql.yaml マニフェスト ファイルをデプロイします。

     
    kubectl create -f $WORKING_DIR/wordpress_cloudsql.yaml

    Persistent Disk がコンピューティング ノードに接続される場合、このマニフェスト ファイルのデプロイに数分かかります。

  3. デプロイのステータスが running に変わるのを待ちます。

     
    kubectl get pod -l app=wordpress --watch

    出力に Running のステータスが示されたら、次のステップに進むことができます。

     
    NAME                     READY     STATUS    RESTARTS   AGE
wordpress-387015-02xxb   2/2       Running   0          2m47s

  1. type:LoadBalancer の Service を作成します。

     
    kubectl create -f $WORKING_DIR/wordpress-service.yaml

    ロードバランサの作成には数分かかります。

  2. デプロイを監視し、サービスに外部 IP アドレスが割り当てられるまで待ちます。

     
    kubectl get svc -l app=wordpress --watch

  3. 出力に外部 IP アドレスが表示されたら、次の手順に進みます。外部 IP は次の例とは異なるため、注意が必要です。

     
    NAME        CLUSTER-IP      EXTERNAL-IP    PORT(S)        AGE
wordpress   10.51.243.233   203.0.113.3    80:32418/TCP   1m

  4. 後で使用できるように、EXTERNAL_IP アドレス フィールドをメモしておきます。

このセクションでは、WordPress ブログを設定します。

  1. ブラウザで次の URL にアクセスします。external-ip-address は、WordPress インスタンスを公開するサービスの EXTERNAL_IP アドレスに置き換えます。

     
    http://external-ip-address

  2. WordPress のインストール ページで言語を選択して、[Continue] をクリックします。

  3. [Information needed] ページで必要な情報を入力し、[Install WordPress] をクリックします。

  4. [Log In] をクリックします。

  5. 以前に作成したユーザー名とパスワードを入力します。

  6. ブログサイトが作成されます。ブログにアクセスするには、ブラウザで次の URL にアクセスします。

     
    http://external-ip-address

 

 

必要ない時はロードバランサは、削除します。

 


kubectl delete -f $WORKING_DIR/wordpress-service.yaml

 

感想

チュートリアルを利用したらあっさり構築できて、内容もk8sのような一般的知識に近いもので、簡単だったが、変数間違い等で少し時間を使った。

変数間違い等トラブルがあった時もk8sの一般的なログインなどをしてログが見れるのは良かった。

構成等もシンプルで必要なものが入っている感じでチュートリアルを通すことでyamlファイル作成時の勉強になると思うので、３ヶ月の無料期間中はもっとGCPを使いこなしてみたい。

wordpressはプラグインがたくさんあるのは素晴らしいが、アメリカサーバにしたせいもあり、少し動作が重い気がした。

常にお金がかかる状態ではあるので、他にも、k8sやteraformベースのクラウドも試してみたいと思った。

 

3ヶ月の無料キャンペーン中で料金はかかっていないが、

自分でアクセスするだけでもこの程度料金がかかる模様。

かかった料金

 

 

 

何を作ろうか考える

サイト作成の勉強をしたいので、

とりあえず最近人気なAIを使ってフォローしてもらいながら、

サイト構築をしてみたいと思います。

 

あなたはプラットフォーマーです。CMSを含む本格的なリスティングシステムを想像してください。

どんなコンポーネントを作成しますか？

すごいプロジェクトですね！リスティングシステムにはいくつかの重要なコンポーネントが必要ですね。

  • データベース管理システム（DBMS）: リストされるアイテムや情報を効果的に管理するために、頑強で高性能なデータベースが必要です。
  • ユーザーコントロールパネル: ユーザーはアイテムを追加、編集、削除する必要があるでしょう。ユーザーコントロールパネルはこれらの操作を容易にするためのものです。
  • 検索エンジン: リスティングが豊富になると、効果的な検索が不可欠です。カテゴリ、価格帯、場所など、さまざまな条件での検索をサポートできるといいですね。
  • 画像およびメディアの管理: 商品やサービスのリストには画像や動画が重要です。これらのメディアを効果的に管理し、表示できるようにする必要があります。
  • 評価およびレビューシステム: ユーザーがアイテムに対して評価やレビューを行える仕組みを用意することで、信頼性のある情報が提供されます。
  • セキュリティ機能: ユーザーデータや取引情報などはセキュアに管理する必要があります。SSL通信、データの暗号化、セキュリティプロトコルの導入が重要です。
  • 決済ゲートウェイ: 商品やサービスの購入ができるように、信頼性のある決済ゲートウェイを統合することが必要です。
  • 通知およびアラートシステム: ユーザーに対して新しいリスト、取引の進捗、評価やレビューの通知などを送信できる仕組みが重要です。

これらのコンポーネントを組み合わせて、使いやすく、効果的なリスティングシステムを構築できるでしょう。

これを順にChatGPTで実現するサイトを作ったらどうかなって思いました。 でも簡単なところからやりたいです。一番簡単なのはどこだと思いますか？

うーん、簡単で面白そうなのは、ユーザーコントロールパネルの実装かもしれません。ユーザーがアイテムを追加、編集、削除できるようにすると、基本的なサイトの機能が感じられるし、実装も比較的シンプルです。どうですか？

なるほどです。確かにですね。ユーザーコントロールパネルを実現するために、適切なCMSのOSSを教えてくれませんか？

もちろんです。ユーザーコントロールパネルの機能を実現するためのCMSのOSS（オープンソースソフトウェア）としては、WordPressやJoomla、Drupalが一般的です。これらのプラットフォームは拡張性が高く、ユーザーコントロールパネルの機能をサポートするためのプラグインやモジュールが豊富に提供されています。

特にWordPressは非常に使いやすく、多くのプラグインが利用可能です。ユーザーコントロールパネルの作成には、WordPressのユーザープロフィールや投稿機能を活用することができます。

ただし、CMSの選択はプロジェクトの要件や好みによるものなので、各CMSの特徴やコミュニティサポートを検討して、最適なものを選ぶと良いでしょう。

なるほどです。WordPressをとりあえずKubernatesでインストールしてみたいと思います。良さそうなプロバイダはありますか？

Kubernetes上でWordPressをデプロイするのは素晴らしいアイデアですね！プロバイダの選択肢はいくつかありますが、Google Kubernetes Engine (GKE)、Amazon EKS、Microsoft Azure Kubernetes Service (AKS) などが人気です。

  1. Google Kubernetes Engine (GKE): Google CloudのKubernetesサービス。簡単に設定でき、Google Cloudの他のサービスとの統合が強力です。

  2. Amazon EKS: Amazon Web Services (AWS) のKubernetesサービス。AWS上でのWordPressデプロイには適しています。AWSの生態系との親和性があります。

  3. Microsoft Azure Kubernetes Service (AKS): Microsoft AzureのKubernetesサービス。Azure上でのデプロイに適しており、Azureの他のサービスとの統合が簡単です。

これらのプロバイダはそれぞれ特徴がありますが、どれを選ぶかはプロジェクトのニーズやクラウドプロバイダの経験に依存します。利用したいクラウドプロバイダがあれば、そのプロバイダのKubernetesサービスを試してみるといいでしょう。

 

ではGKE上で、WordPressを動かすのが最初の関門になりそうですね。

 

確かに、GKE上でWordPressをデプロイするのは初めての場合でも、GKEの使いやすさと豊富なドキュメンテーションが助けになるでしょう。以下は簡単なステップの概要です：

  1. Google Cloudプロジェクトのセットアップ: Google Cloud Consoleで新しいプロジェクトを作成し、課金設定などを行います。

  2. GKEクラスタの作成: GKEダッシュボードから新しいクラスタを作成します。適切なリージョン、ゾーン、ノードの数などを選択します。

  3. kubectlのセットアップ: ローカル環境にkubectlをインストールし、GKEクラスタに接続します。

  4. WordPressとMySQLのデプロイ: YAMLファイルを使用してWordPressおよびMySQLのデプロイメントを行います。これにはDeployment、Service、PersistentVolumeなどのリソースが含まれます。

  5. Ingressの設定: GKE上でIngressリソースを設定し、WordPressに公開するための外部IPアドレスを取得します。

  6. WordPressの初期設定: ブラウザでWordPressの管理画面にアクセスし、初期設定を行います。

これらのステップは簡単な要件ですが、具体的な手順や設定はプロジェクトや要件によって異なります。Google Cloudのドキュメンテーションやチュートリアルを参照しながら進めていくと良いでしょう。

 

とりあえず

GKEとWordPressで何か登録できるシステムを作ることになりました。