<h2 id="h574db76649">Fly.ioにRailsAPIをデプロイしてみました。</h2><p><br></p><h3 id="hcf677b2b23">◎ 使用理由</h3><ul><li>デプロイが簡単</li><li>無料枠がある</li><li>東京リージョンが利用可能</li><li>PostgreSQLが利用可能</li><li>無料枠でも設定でサーバースリープなしで運用できる</li></ul><p><br>Render.comを利用していましたが、15分リクエストがないとサーバースリープしてしまい、立ち上がりも遅かったので、Fly.ioに変更しました。<br>また、Fly.ioでは東京リージョンが利用可能という点もメリットだと思います。<br></p><h3 id="hd82b119b29">◎ 前提</h3><ul><li>Docker環境</li><li>RailsAPI モード</li><li>Railsの環境を作成するDockerfileがある</li></ul><h3 id="h11feedc52b">◎ FlyのCLIをcurlでインストール</h3><pre><code>$ curl -L https://fly.io/install.sh | sh</code></pre><p><a href="https://fly.io/docs/hands-on/install-flyctl/" target="_blank" rel="noopener noreferrer">https://fly.io/docs/hands-on/install-flyctl/</a>（Fly.ioの公式ドキュメント）<br></p><h3 id="he35700b525">◎ FlyのCLIでSignUp / SignIn</h3><p><span style="font-size: 0.75em">新規登録の場合</span></p><pre><code>$ flyctl auth signup</code></pre><p><span style="font-size: 0.75em">アカウントを持っている場合</span></p><pre><code>$ flyctl auth login</code></pre><p>上記コマンドを叩くと、Fly.ioのサインアップ、サインインの画面がブラウザで表示されます。<br></p><h3 id="hd3b2e4998e">◎ Flyのビルド</h3><p><span style="font-size: 0.75em">/Railsアプリのルートディレクトリ</span></p><pre><code>$ flyctl launch</code></pre><p>コマンドを叩くと下記のメッセージが出ます。<br></p><pre><code>Scanning source code
Detected a Rails app</code></pre><p>ファイルを解析して、Railsであると自動で判別してくれます。<br><br>1. アプリ名を指定</p><pre><code>? App Name (leave blank to use an auto-generated name):&nbsp;</code></pre><p>2. リージョン指定（nrt (Tokyo, Japan)を選択）</p><pre><code>? Select region:&nbsp;[Use arrows to move, type to filter]</code></pre><p>3. PostgreSQLでデータベースを作成するか、今回は作成するので、y</p><pre><code>? Would you like to set up a Postgresql database now? [y/N]</code></pre><p>4. 使用する容量（一番上のDevelopmentを選択）</p><pre><code>? Select configuration:&nbsp;[Use arrows to move, type to filter]
&gt; Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk
&nbsp;Production - Highly available, 1x shared CPU, 256MB RAM, 10GB disk
&nbsp;Production - Highly available, 1x Dedicated CPU, 2GB RAM, 50GB disk
&nbsp;Production - Highly available, 2x Dedicated CPU's, 4GB RAM, 100GB disk
&nbsp;Specify custom configuration</code></pre><p>5. 今回は、n</p><pre><code>? Scale single node pg to zero after one hour? (y/N)</code></pre><p>6. Redisを使用するか、今回は作成しないので、n</p><pre><code>? Would you like to set up an Upstash Redis database now?　[y/N]</code></pre><p><br>7. .dockerignoreファイルを作成するか、今回は作成するので、y</p><pre><code>? Create .dockerignore from 1 .gitignore files? (y/N)</code></pre><p><br>PostgreSQLの情報は、下記のように表示されます。</p><pre><code>Postgres cluster sample-rails-db created
&nbsp;Username:&nbsp;&nbsp;postgres
&nbsp;Password:&nbsp;&nbsp;パスワード
&nbsp;Hostname:&nbsp; ホスト名
&nbsp;Flycast:&nbsp;&nbsp;&nbsp;Flycast
&nbsp;Proxy port:&nbsp;5432
&nbsp;Postgres port:&nbsp;5433
&nbsp;Connection string: データベースURL</code></pre><p><br>全てに回答し終わると、このように表示されます。また、flyの設定ファイルのfly.tomlファイルがルートディレクトリに作成されます。</p><pre><code>Once ready: run 'fly deploy' to deploy your Rails app.</code></pre><p><br></p><h3 id="h903c76c8cf">◎ 環境変数の設定</h3><p>このように、CLIで設定することができます。Fly.ioのダッシュボードからでも設定できます。</p><pre><code>$ flyctl secrets set RAILS_ENV=production</code></pre><p><br>DATABASE_URL<em>と</em>RAILS<em>_</em>MASTER_KEYは、自動で設定されています。<br></p><h3 id="h21a9eca353">◎ fly.tomlファイルの追記</h3><pre><code>app = "fly launchコマンドで指定したアプリ名"
primary_region = "nrt"
console_command = "/rails/bin/rails console"

[build]

[http_service]
&nbsp;internal_port = 3000
&nbsp;force_https = true
&nbsp;auto_stop_machines = true
&nbsp;auto_start_machines = true
&nbsp;min_machines_running = 0
&nbsp;processes = ["app"]

[[statics]]
&nbsp;guest_path = "/app/public"
&nbsp;url_prefix = "/"</code></pre><p>staticsの設定項目ですが、</p><pre><code>[[statics]]
&nbsp;guest_path = "/myapp/app/public"
&nbsp;url_prefix = "/myapp"</code></pre><p>自分の環境の場合ですが、このように設定することで、<br>no such file or directory (<span style="color:#343541">os error 2) が出なくなりました。</span><br></p><h3 id="h8f3bab1a30">◎ Fly デプロイ</h3><pre><code>$ flyctl deploy</code></pre><h3 id="h3cddac6be2">◎ アプリ起動</h3><pre><code>$ flyctl open</code></pre><p>flyctl openで、アプリが正常に起動すればデプロイ完了です。</p>

Fly.ioにRailsAPIをデプロイしてみました。東京リージョンがあったり、無料枠でのサーバースリープがないため、現状無料で使用できるものの中では、最も良いと感じました。


Fly.ioにRailsAPIをデプロイしてみた。

<h2 id="h4a82aadb47">◎ Active Model Serializerを使用した理由</h2><ul><li>キーの命名規則の違いを解消する為</li><li>フロントエンド(TypeScript)は、キャメルケース</li><li>バックエンド(Ruby)は、スネークケース</li></ul><p><br></p><h2 id="h8d5118bfbd">◎ Active Model Serializer 導入</h2><pre><code>＄　rails g serializer user</code></pre><p>userの部分は、任意のモデル名を入れる<br>app/serializers/user_serializer.rb というファイルが生成される<br></p><h2 id="h468bfbe813">◎ User Serializer</h2><p><span style="font-size: 0.75em">app/serializers/user_serializer.rb</span></p><pre><code>class UserSerializer &lt; ActiveModel::Serializer
  attributes :id, :name, :email, :password, :created_at, :updated_at
end</code></pre><p><br>attributesには、jsonで返してほしいキーを設定する<br></p><pre><code>{
	"id": 1,
	"name": "Matsui Ryota",
	"email": "ryota123@example.com",
	"password": "password",
	"created_at": 作成時間,
	"updated_at": 更新時間
}</code></pre><p><br>上記のattributesの設定だと、このようなjsonが返るようになります。<br></p><h2 id="h460fc55db4">◎ 命名規則の違い</h2><p>現在のUserSerializerを使用してレスポンスすると、TypeScriptの型の指定がキャメルケースの為、うまくデータが扱えなくなります。<br>UserSerializerを使用して、レスポンスをするときには、キーをキャメルケースにして返す設定をします。<br></p><h2 id="h496a060788">◎ レスポンス時のキーをキャメルケースに変換する設定</h2><p>app/initializersの中に、active<em>model</em>serializers.rbというファイルを作成します。<br><br><span style="font-size: 0.75em">app/initializers/active_</span><em style="font-size: 0.75em">model_</em><span style="font-size: 0.75em">serializers.rb</span></p><pre><code>ActiveModelSerializers.config.key_transform = :camel_lower</code></pre><p><br>このような記述をするだけです。<br></p><h2 id="hb7bd7f6da3">◎ コントローラーで値をレスポンスする</h2><p><span style="font-size: 0.75em">app/controllers/users_controller.rb</span></p><pre><code>class Api::V1::UsersController &lt; ApplicationController
    def index
        users = User.all
        render json: user, serializer: UserSerializer
    end
end</code></pre><p><br>このようにシリアライザーを設定することで、作成したUserSerializerを適用したデータを返すことができます。</p>

active_model_serializersというgemを使用してみました。
このgemは、json形式で返すデータの構造を設定できます。
フロントエンド(Next.js/TypeScript)、バックエンド(RailsAPI mode)で作成しているアプリケーションがあり、キーの命名規則がフロントとバックで違うといった問題がありました。
そこで、Railsからレスポンスを返す際に、キーをキャメルケースに変換する方法はないかと思い、探していたところこのようなgemがあったので使用してみました。

Active Model Serializerを使用して、命名規則を維持する

<h2 id="hd8079fc180">T3 Stack と Neon DB で環境構築</h2><p><br></p><h3 id="h6e20ba3ad6">◎ T3 Stack とは？</h3><ul><li>Next.js</li><li>NextAuth</li><li>TypeScript</li><li>tRPC</li><li>Prisma</li><li>TailwindCSS</li></ul><p>上記で構成された型安全なフルスタックアプリケーションです。<br></p><h3 id="hd7fe07d1c6">◎ Neon とは？</h3><p>フルマネージドかつサーバーレスなPostgreSQLです。<br><br>無料で使用できるため、今回試しに採用してみました。<br>無料枠の条件は、</p><ul><li>1プロジェクト</li><li>10ブランチ（1ブランチごとに3GBのデータ容量）</li><li>3エンドポイント（1エンドポイントごとに1 vCPUと最大4GBのRAM）</li></ul><p><br></p><h3 id="h0357bd33cf">◎ T3 Stack でプロジェクトを作成する</h3><pre><code>$ npm create t3-app@latest</code></pre><p><br></p><h3 id="h28325cc98b">◎ Prisma 設定</h3><p><span style="font-size: 0.75em">/プロジェクト名/prisma/schema.prisma</span></p><pre><code>generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider                         = "postgresql" // 変更
    // NOTE: When using postgresql, mysql or sqlserver, uncomment the @db.Text annotations in model Account below
    // Further reading:
    // https://next-auth.js.org/adapters/prisma#create-the-prisma-schema
    // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
    url                                  = env("DATABASE_URL")
    shadowDatabaseUrl    = env("SHADOW_DATABASE_URL") // 追記
    directUrl           　　　　　　　　　　　= env("DIRECT_URL") // 追記
}</code></pre><p><br><span style="font-size: 0.75em">/プロジェクト名/.env</span></p><pre><code>DATABASE_URL="postgres://role_name:password@host_name:5432/db_name?pgbouncer=true"
SHADOW_DATABASE_URL="postgres://role_name:password@host_name:5432/db_name"
DIRECT_URL="postgres://role_name:password@host_name:5432/db_name"</code></pre><p><br></p>

T3 Stack に Neon (PostgreSQL)を採用してみました。

T3 Stack に Neon DB を使用して環境構築してみた

<h2 id="h3f0683f775">画像アップロードアプリの作成</h2><p><a href="https://github.com/ryota-sb/images-uploader" target="_blank" rel="noopener noreferrer">https://github.com/ryota-sb/images-uploader</a></p><h2 id="h053b1e66aa"><br>◎ Docker環境準備</h2><ol><li>docker-compose.yml 作成</li><li>Next.js 環境作成</li><li>Rails 環境作成</li><li>docker-compose でコンテナ立ち上げ</li></ol><p><br></p><h3 id="h25f7882000">1. docker-compose.yml</h3><p><span style="font-size: 0.75em">/docker-compose.yml</span></p><pre><code>version: "3"
services:
  frontend:
    build: ./frontend/
    volumes:
      - ./frontend/app:/usr/src/app
    command: "yarn dev"
    ports:
      - "8000:3000"

  backend:
    build: ./backend/
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid &amp;&amp; rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  db:
    image: postgres
    volumes:
      - ./postgres:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: password
    ports:
      - "5432:5432"</code></pre><p><br></p><h3 id="h2d9f855191">2. Next.js 環境作成</h3><p><br><span style="font-size: 0.75em">/frontend/Dockerfile</span></p><pre><code>FROM node:16-bullseye-slim

WORKDIR /usr/src/app</code></pre><p><br></p><h3 id="h70ec96eaf2">3. Rails  環境作成</h3><p><br>参考記事 → <br>※ backendディレクトリを作成し、その中にDockerfile、Gemfile、Gemfile.lock、entrypoint.shを作成してください。<br></p><h3 id="hd63fb97ad9">4. docker-compose.yml でコンテナの立ち上げ</h3><p><br>各コンテナの立ち上げ（frontend、backend、db）</p><pre><code>$ docker-compose up -d --build</code></pre><p><br>Next.jsのプロジェクトファイル作成（プロジェクト名は、appにしてください）</p><pre><code>$ docker-compose exec frontend yarn create next-app --ts -e with-tailwindcss</code></pre><p><br></p><h2 id="h9f0d9f837c">◎ Railsで画像アップロードのAPIを作成</h2><ol><li>Postモデル、postsコントローラーの作成</li><li>開発環境のホストの設定</li><li>CarrierWave導入</li><li>CarrierWaveの設定ファイル作成</li><li>cors対策</li></ol><p><br></p><h3 id="hf1b46bca79">1. Postモデル、postsコントローラー作成、ルーティング作成</h3><p>	</p><h4 id="h98bcae7692">Postモデル作成</h4><pre><code>$ docker-compose exec backend rails g Post model title:string image:string</code></pre><p><br><span style="font-size: 0.75em">/backend/app/models/post.rb</span></p><pre><code>class Post &lt; ApplicationRecord
  mount_uploader :image, ImageUploader
end</code></pre><p>mount_uploaderは、PostモデルのimageカラムとCarrierWaveのImageUploaderを紐付けるための記述です。<br></p><h4 id="hbb41561bcc">postsコントローラー作成</h4><pre><code>$ docker-compose exec backend rails g controller api/v1/posts index create update</code></pre><p><br><span style="font-size: 0.75em">/backend/app/controllers/api/v1/posts.rb</span></p><pre><code>class Api::V1::PostsController &lt; ApplicationController
  def index
    posts = Post.all
    render json: posts
  end

  def create
    post = Post.create(post_params)
    if post.save
      render json: post
    else
      render json: post.errors, status: :unprocessable_entity
    end
  end

  def update
    post = Post.find(params[:id])
    if post.update(post_params)
      render json: post
    else
      render json: post.errors, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :image)
  end
end</code></pre><p><br></p><h4 id="h68ba01a94c">ルーティング作成</h4><p><span style="font-size: 0.75em">/backend/config/routes.rb</span></p><pre><code>Rails.application.routes.draw do
  namespace "api" do
    namespace "v1" do
      resources :posts, only: [:index, :create, :update]
    end
  end
end</code></pre><p><br></p><h3 id="he9c26ee90d">2. 開発環境のホストの設定</h3><p><span style="font-size: 0.75em">/backend/config/environments/development.rb</span></p><pre><code> Rails.application.configure do
  config.cache_classes = false
  config.eager_load = false
  config.consider_all_requests_local = true
  config.hosts &lt;&lt; "backend" # 追記
... 省略
end</code></pre><p>ホスト名には、RailsAPIのコンテナ名を指定する<br></p><h3 id="h576ce9c6e1">3. CarrierWave導入</h3><p><br></p><h4 id="h0436f8bcdc">gemインストール</h4><p><span style="font-size: 0.75em">/backend/Gemfile</span></p><pre><code>gem 'carrierwave'</code></pre><p><br></p><h4 id="h4f636ae6cc">CarrierWave適用</h4><pre><code>$ docker-compose exec backend bundle install</code></pre><p><br></p><h4 id="h5a9768ea86">Uploader作成</h4><pre><code>$ docker-compose exec backend rails g uploader Image</code></pre><p><br></p><h4 id="h27892741ce">Uploaderファイル修正</h4><p><span style="font-size: 0.75em">/backend/app/uploders/image_uploader.rb</span></p><pre><code>class ImageUploader &lt; CarrierWave::Uploader::Base
  storage :file
  
  # 保存されるディレクトリの指定
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
 
  # 保存できる画像の拡張子の指定
  def extension_allowlist
    %w(jpg jpeg gif png)
  end
end</code></pre><p><br></p><h3 id="h1585106295">4. CarrierWaveの設定ファイル作成</h3><p>carrierwave.rbを新規作成する<br><span style="font-size: 0.75em">/backend/config/initializers/carrierwave.rb</span></p><pre><code>CarrierWave.configure do |config|
  config.asset_host = "http://backend:3000"
  config.storage = :file
  config.cache_storage = :file
end</code></pre><p>asset_host に設定する値は、localhostではなく、RailsAPIのコンテナ名のbackendを指定する<br></p><h3 id="he1d0402b90">5. cors対策</h3><p><br></p><h4 id="h0436f8bcdc">gemインストール</h4><p><span style="font-size: 0.75em">/backend/Gemfile</span></p><pre><code>gem 'rack-cors'</code></pre><h4 id="h9a57e48476"><br>cors有効化</h4><p><span style="font-size: 0.75em">/backend/config/initializers/cors.rb</span></p><pre><code>Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:8000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end</code></pre><p>origins にローカル環境のオリジン名を指定します<br></p><h2 id="h216fadbc08">◎ Next.jsでRailsAPIを通して画像をアップロードする</h2><ol><li>React Hook Form 導入</li><li>type定義</li><li>Imageコンポーネントで外部の画像を扱うための設定</li><li>完成コードと部分ごとの解説</li><li>完成画面</li></ol><p><br></p><h3 id="h95ffba6b6a">1. React Hook Form導入</h3><p><br>React Hook Form インストール</p><pre><code>$ docker-compose exec frontend npm install react-hook-form</code></pre><p><br></p><h3 id="h017b4eb8b9">2. type定義</h3><p><br>types/index.tsを作成する<br><span style="font-size: 0.75em">/frontend/app/types/index.ts</span></p><pre><code>export type InputValue = {
  title: string;
  image: { url: string };
};

export type PostData = InputValue &amp; {
  id: number;
  created_at: Date;
  update_at: Date;
};</code></pre><p><br></p><h3 id="he7d333e638">3. Imageコンポーネントで外部の画像を扱うための設定</h3><p><br><span style="font-size: 0.75em">/frontend/app/next.config.js</span></p><pre><code>module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["backend"],
  },
};</code></pre><p>images: { ... } を追記し、domainsにRailsAPIのコンテナ名のbackendを指定する<br></p><h3 id="hc902f88630">4. 完成コードと部分ごとの解説</h3><p><br>完成コード<br><span style="font-size: 0.75em">/frontend/app/pages/index.tsx</span></p><pre><code>import { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";

import { useState, useEffect } from "react";

import { useForm, SubmitHandler } from "react-hook-form";

import { InputValue, PostData } from "../types";

const Home: NextPage = () =&gt; {
  const [image, setImage] = useState&lt;File | null&gt;(null);
  const [posts, setPosts] = useState([]);

  const router = useRouter();

  // useFormの中の必要なメソッドを使用できるように設定
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm&lt;InputValue&gt;({
    mode: "onChange",
    defaultValues: { title: "", image: { url: "" } },
  });

  // フォームのファイル選択画像で選択されたファイルデータをsetImageに追加
  const onFileInputChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    const file = e.target.files?.[0];
    if (!file) return;
    setImage(file);
  };

  // ボタンを押した時にFormDataに入力内容を追加し、RailsAPIにPOSTして登録する
  const onSubmit: SubmitHandler&lt;InputValue&gt; = async (inputValue) =&gt; {
    const formData = new FormData();
    formData.append("post[title]", inputValue.title);
    formData.append("post[image]", image!, image!.name);

    const response = await fetch("http://localhost:3000/api/v1/posts", {
      method: "POST",
      body: formData,
    });
    const data = await response.json();
    router.reload();
  };

  // postを全取得する
  const getPosts = async () =&gt; {
    const response = await fetch("http://localhost:3000/api/v1/posts");
    const data = await response.json();
    setPosts(data);
  };

  useEffect(() =&gt; {
    getPosts();
  }, []);

  return (
    &lt;div className="flex min-h-screen flex-col items-center justify-center py-2"&gt;
      &lt;Head&gt;
        &lt;title&gt;Create Next App&lt;/title&gt;
        &lt;link rel="icon" href="/favicon.ico" /&gt;
      &lt;/Head&gt;

      &lt;div&gt;
        &lt;h1 className="text-5xl my-10"&gt;Images Uploader&lt;/h1&gt;
        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;div className="flex flex-col gap-y-3"&gt;
            &lt;div className="flex flex-col gap-y-3"&gt;
              &lt;label htmlFor="title"&gt;タイトル&lt;/label&gt;
              &lt;input
                type="text"
                {...register("title", { required: true })}
                className="border border-black py-2 px-4"
              /&gt;
              {errors.title &amp;&amp; (
                &lt;h1 className="text-red-500"&gt;タイトルは必須です&lt;/h1&gt;
              )}
            &lt;/div&gt;
            &lt;div className="flex flex-col gap-y-3"&gt;
              &lt;label htmlFor="image"&gt;画像アップロード&lt;/label&gt;
              &lt;input
                type="file"
                {...register("image", { required: true })}
                className="border border-black py-2 px-4"
                onChange={onFileInputChange}
              /&gt;
              {errors.image &amp;&amp; &lt;h1 className="text-red-500"&gt;画像は必須です&lt;/h1&gt;}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="flex justify-end"&gt;
            &lt;button
              type="submit"
              className="mt-8 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
            &gt;
              追加する
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;

        &lt;div className="grid grid-cols-3"&gt;
          {posts &amp;&amp;
            posts.map((post: PostData) =&gt; (
              &lt;div key={post.id}&gt;
                &lt;h1&gt;{post.title}&lt;/h1&gt;
                &lt;Image src={post.image.url} width={300} height={300} alt={""} /&gt;
              &lt;/div&gt;
            ))}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Home;</code></pre><p><br>useState、useEffectで状態管理</p><pre><code>import { useState, useEffect } from "react";

// 画像の状態管理
const [image, setImage] = useState&lt;File | null&gt;(null);
// 投稿データの状態管理
const [posts, setPosts] = useState&lt;PostData[]&gt;([]);

useEffect(() =&gt; {
    getPosts();
  }, []);</code></pre><p><br>ファイル選択された時に選択された画像データをsetImageを使って、image(状態変数)にデータを入れる</p><pre><code>// フォームのファイル選択画像で選択されたファイルデータをsetImageに追加
const onFileInputChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
  const file = e.target.files?.[0];
  if (!file) return;
  setImage(file);
};</code></pre><p><br>React Hook Form 関連の関数定義</p><pre><code>// useFormの中の必要なメソッドを使用できるように設定
const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm&lt;InputValue&gt;({
  mode: "onChange",
  defaultValues: { title: "", image: { url: "" } },
});

// ボタンを押した時にFormDataに入力内容を追加し、RailsAPIにPOSTして登録する
const onSubmit: SubmitHandler&lt;InputValue&gt; = async (inputValue) =&gt; {
  const formData = new FormData();
  formData.append("post[title]", inputValue.title);
  formData.append("post[image]", image!, image!.name);

  const response = await fetch("http://localhost:3000/api/v1/posts", {
    method: "POST",
    body: formData,
  });
  const data = await response.json();

  // 画面リロード
  router.reload();
};</code></pre><p><br>React Hook Form のregisterとhandleSubmitとerrorsを使用して、フォーム作成</p><pre><code>&lt;form onSubmit={handleSubmit(onSubmit)}&gt;
  &lt;div className="flex flex-col gap-y-3"&gt;
    &lt;div className="flex flex-col gap-y-3"&gt;
      &lt;label htmlFor="title"&gt;タイトル&lt;/label&gt;
      &lt;input
        type="text"
        {...register("title", { required: true })}
        className="border border-black py-2 px-4"
      /&gt;
      {errors.title &amp;&amp; &lt;h1 className="text-red-500"&gt;タイトルは必須です&lt;/h1&gt;}
    &lt;/div&gt;
    &lt;div className="flex flex-col gap-y-3"&gt;
      &lt;label htmlFor="image"&gt;画像アップロード&lt;/label&gt;
      &lt;input
        type="file"
        {...register("image", { required: true })}
        className="border border-black py-2 px-4"
        onChange={onFileInputChange}
      /&gt;
      {errors.image &amp;&amp; &lt;h1 className="text-red-500"&gt;画像は必須です&lt;/h1&gt;}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div className="flex justify-end"&gt;
    &lt;button
      type="submit"
      className="mt-8 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
    &gt;
      追加する
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;;</code></pre><p><code>{...register("title", { required: true })}</code> の部分で、titleプロパティと必須項目の指定をしている。imageの方も一緒。<br><code> {errors.title &amp;&amp; &lt;h1 className="text-red-500"&gt;タイトルは必須です&lt;/h1&gt;}</code> の部分で、入力フォームのエラーを表示。<br><code>&lt;form onSubmit={handleSubmit(onSubmit)}&gt;...&lt;/form&gt;</code> の部分でformタグ内のregister関数で取得したデータをもとにボタンが押された時の処理をする。<br><br>投稿データの全取得。useEffectで画面遷移時にこのメソッドを呼び出すようにしています</p><pre><code>// postを全取得する
const getPosts = async () =&gt; {
  const response = await fetch("http://localhost:3000/api/v1/posts");
  const data = await response.json();
  setPosts(data);
};</code></pre><p><br></p><h3 id="h30f324e931">5. 完成画面</h3><p><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/6fe63cdba0c34197b6eb6e85ea4ff2e3/image_uploader.png?w=1132&amp;h=744" alt="Image Uploader 完成画面"></p>

Docker + Next.js(React Hook Form) + RailsAPI(CarrierWave) で画像をアップロードできる機能を作成しました。

Docker + Next.js(React Hook Form) + RailsAPI(CarrierWave) で画像をアップロードする

<h2 id="h2936a14ed0">SWRでデータ取得してみた。</h2><p><br></p><h3 id="h239dbb0cc8">◎ SWRとは</h3><p>Stale While Revalidate の略称で、APIのデータ取得に特化したライブラリです。<br></p><h3 id="h434accce92">◎ 使用方法</h3><pre><code>const URL = "APIのURL"
const fetcher = (url: string) =&gt; fetch(url).then((res) =&gt; res.json())
const { data, error } = useSWR(URL, fetcher)</code></pre><p><br>useSWRの第一引数にAPIのURLを指定、第二引数にfetch関数をラップしたfetcher関数を指定します<br>取得したデータは、dataに格納されます。</p>

SWRを使用して、データの取得をしてみました。

SWRでデータ取得してみた

<h2 id="hc1b3a5d70a">Docker環境のRails APIをRenderにデプロイしてみた。</h2><p><br></p><h3 id="h7d9c246d7d">◎ Renderを本番環境に使用する理由</h3><ul><li>手軽にDocker環境のデプロイができる</li><li>Herokuが有料になってしまったため</li><li>HerokuのDocker環境デプロイが、M1Macだと面倒な点が多かったから</li><li>コストを最小限に抑えたい</li></ul><p><br></p><h3 id="hd91292a2c7">◎ 事前準備</h3><ul><li> Dockerのインストールをして、Dockerコマンドが使用できる状態であること</li><li>GitHubの登録が完了していて、ソースコードを管理できる状態になっていること</li></ul><p><br></p><h3 id="h7cc598999e">◎ 使用バージョン一覧</h3><ul><li>Ruby 2.7.4</li><li>Rails 6.1.6</li></ul><p><br></p><h3 id="he0f10ba83d">◎ デプロイ手順</h3><ol><li>Renderのアカウント登録</li><li>RenderでPostgreSQL作成</li><li>Railsプロジェクトへ追記</li><li>Renderで新規プロジェクト作成</li></ol><p><br></p><h3 id="h54bb084582">◎ 1. Renderのアカウント登録</h3><p><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/6554583af2164c0da2ba80ecea3a67af/render_get_started.png" alt=""><br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/58fe5c55a784429584ca136890207092/render_sign_up.png" alt=""><br>GitHubアカウントでログインします。<br></p><h3 id="h82c5d73b4e">◎ 2. RenderでPostgreSQL作成</h3><p><br>ログインが完了したら、新規PostgreSQLの作成を行います。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/a24d5e3ab7b44ab1aacaa8895e17b739/postgresql_new.png" alt=""><br>New + を押し、PostgreSQLを押します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/666a7bf728dc4c86beea42638c7d3756/postgresql_config.png" alt=""></p><ol><li>Renderダッシュボードに表示される名前</li><li>データベース名</li><li>ユーザー名</li><li>Singaporeを選択（Tokyoがなかったため）</li><li>PostgreSQLのバージョン（今回はそのままの15）</li></ol><p><br>Freeプランにチェックを入れ、Create Database を押します。<br>※ Freeプランでは、作成から<span style="color:#333333">90日の間しか利用できません。</span><br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/d87c7e79f3ae41f889ec58360c6497a4/postgresql_status.png" alt=""><br>StatusがCreatingからAvailableになっていることを確認します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/c86ea5d452db41cfa97ad07a28572768/postgresql_url.png" alt=""><br>Internal Database URLは、後で使用するのでコピーしておいてください。<br></p><h3 id="hb9e27b3906">◎ 3. Railsプロジェクトへ追記</h3><p><br>PostgreSQL作成完了後、Railsプロジェクトに追記をします。<br><br><span style="font-size: 0.75em">/docker-rails-app/config/environments/production.rb</span></p><pre><code>config.publicfileserver.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?</code></pre><p><br>ENV['RENDER']を追記します。<br><br><span style="font-size: 0.75em">/docker-rails-app/config/database.yml</span></p><pre><code>default: &amp;default
  adapter: postgresql
  encoding: unicode
  pool: &lt;%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %&gt;

development:
  &lt;&lt;: *default
  database: app_development
  username: postgres
  password: password
  host: db

test:
  &lt;&lt;: *default
  database: app_test
  username: postgres
  password: password
  host: db

production:
  &lt;&lt;: *default
  database: app_production
  url: &lt;%= ENV['DATABASE_URL'] %&gt;</code></pre><p><br>productionのurlに環境変数DATABASE_URLを設定します。<br>※ username、password、hostがdefaultのところに記載してある場合は、上記のようにdevelopment、testに直接記載します。<br><br><span style="font-size: 0.75em">/docker-rails-app/config/puma.rb</span></p><pre><code>workers ENV.fetch("WEB_CONCURRENCY") { 4 }
preload_app!</code></pre><p><br>上記２つのコメントアウトを外し、workersの数を4に設定します。<br><br><span style="font-size: 0.75em">/docker-rails-app/config/environments/development.rb</span></p><pre><code>Rails.application.configure do
	config.hosts.clear
end</code></pre><p><br>全てのホスト名を受け入れられるように設定します。<br><br><span style="font-size: 0.75em">/docker-rails-app</span></p><pre><code>$ docker-compose exec web rails g controller posts index</code></pre><p><br>続いてAPIの疎通を確認するために、HelloWorldを表示するだけのコントローラーを作成しておきます。<br><br><span style="font-size: 0.75em">/docker-rails-app/config/routes.rb</span></p><pre><code>Rails.application.routes.draw do
  root to: 'posts#index'
end</code></pre><p><br>postsコントローラーのindexアクションをパスのルートに設定しておきます。<br><br><span style="font-size: 0.75em">/docker-rails-app/app/controllers/posts_controller.rb</span></p><pre><code>class PostsController &lt; ApplicationController
  def index
    render json: { message: "HelloWorld" }
  end
end</code></pre><p><br> ルートパスを叩くと、{ message: HelloWorld } が返るようにします。<br></p><h3 id="hedee5c9f33">◎ 4. Renderで新規プロジェクト作成</h3><p><br>PostgreSQL作成完了、Railsアプリの追記が終了後、renderで新規プロジェクト作成を行います。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/ecc44a9b7769422fb934a8abe172fe19/render_project_new_webservice.png" alt=""><br>New + を押し、Web Serviceを押します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/4ae13664f9494242b1cf85d7e0d68129/connect_repository.png" alt=""><br><br>Configure account を押します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/091174e315684ff39f212a17bdb92b29/select_repository.png" alt=""><br><br><br>Only select repositories にチェックを入れ、Select repositoriesからデプロイしたいGitHubのリポジトリを選択します。<br>選択が完了したら、Saveを押します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/3410495e699b4db3ab54d3e47eff5672/connected_repository.png" alt=""><br><br>選択したGitHubのリポジトリが追加されていることを確認し、Connect を押します。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/0345bb36e53e45c78b721afadab98a0f/service_config.png" alt=""><br></p><ol><li>サービス名（Renderダッシュボード一覧に表示されます）</li><li>Singaporeを選択（Tokyoがなかったため）</li><li>デプロイしたいgitブランチ</li><li>Dockerを選択</li></ol><p><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/c22e18dd352d4079bc920dc8828ef1b0/environment_values.png" alt=""><br><br>Advanced を押し、環境変数の設定を行います。<br>Add Environment Variableで設定する値を増やすことができます。<br></p><ol><li>RAILS_MASTER_KEY（Railsプロジェクトファイルのconfig/master.keyの値を入れます）</li><li>DATABASE_URL（先ほどDB作成時にコピーしたInternal Database URLの値を入れます）</li></ol><p><br>Environment Variable は、後でも設定できます。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/e890b66cce3a4d44a21f6cbb5bfa1246/service_create.png" alt=""><br><br>今回は、無料プランのFreeを選択</p><blockquote><span style="color:#505c64">Web Services on the free plan are automatically spun down after 15 minutes of inactivity.</span></blockquote><p>※ Freeでは、15分間リクエストがないとサーバーを落とすようになっています。<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/b69db2394d57478482ba4c1cdb90fa81/deploy_success.png" alt=""><br><br>in progres からLiveになっていれば、成功です。  <br><br>また、logが出力されるので、状態の確認をすることができます。<br>上記のようにPuma starting ... となっていれば正常に動いています。  <br><br> 左上のURLを押して、{ message: "HelloWorld" } が表示されていれば、本番環境のデプロイが完了です。</p>

Docker環境のRuby on Rails のAPIをrender.comにデプロイしてみました。開発環境のDockerコンテナを本番環境でも使用できるため、とても簡単にデプロイすることができます。


Docker環境のRails APIをRenderにデプロイしてみた

<h2 id="h27c81b412b">DockerでRails APIの開発環境構築してみました（Mac）</h2><p><br></p><h3 id="hd91292a2c7">◎ 事前準備</h3><ul><li>Dockerのインストールをして、Dockerコマンドが使用できる状態であること</li><li>データベースは、PostgreSQLを使用します</li></ul><p><br></p><h3 id="h7cc598999e">◎ 使用バージョン一覧</h3><ul><li>Ruby 2.7.4</li><li>Rails 6.1.6</li></ul><p><br></p><h3 id="hc9f4838a58">◎ プロジェクトファイルの作成</h3><pre><code>mkdir docker-rails-app
cd docker-rails-app</code></pre><p><br></p><h3 id="h079ac29ce6">◎ ディレクトリの構成</h3><p>作成したプロジェクトファイルに下記の５つのファイルを作成します</p><ul><li>Gemfile</li><li>Gemfile.lock</li><li>entrypoint.sh</li><li>Dockerfile</li><li>docker-compose.yml</li></ul><p><br></p><h3 id="hd5a58cfae8">◎ GemfileとGemfile.lockの準備</h3><p><span style="font-size: 0.75em">/docker-rails-app/Gemfile</span></p><pre><code>source 'https://rubygems.org'
gem 'rails', '6.1.6'</code></pre><p><br>Gemfile.lockは、空ファイルのまま<br></p><h3 id="hf8d2da489d">◎ entrypoint.shの準備</h3><p><span style="font-size: 0.75em">/docker-rails-app/entrypoint.sh</span></p><pre><code>#!/bin/bash
set -e
rm -f /app/tmp/pids/server.pid
exec "$@"</code></pre><p>特定のファイルが存在していると、サーバーの再起動がうまくいかないRails固有の問題を解決するためのスクリプト</p><h3 id="hdf35df1b6d"><br>◎ Dockerfileの準備</h3><p><span style="font-size: 0.75em">/docker-rails-app/Dockerfile</span></p><pre><code>FROM ruby:2.7.4

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
        &amp;&amp; apt-get update -qq \
        &amp;&amp; apt-get install -y nodejs yarn
      
RUN mkdir /app
WORKDIR /app
  
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
  
RUN bundle config set --global force_ruby_platform true &amp;&amp; bundle install
  
COPY . /app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000
CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]</code></pre><p><br></p><h3 id="h11f9e8b078">◎ Dockerfile内で書いたコードの詳細</h3><pre><code>FROM ruby:2.7.4</code></pre><p>使用するRubyのDockerイメージを宣言（DockerHubで使用可能なRubyのバージョン一覧が見れます） <br></p><pre><code>RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
        &amp;&amp; apt-get update -qq \
        &amp;&amp; apt-get install -y nodejs yarn</code></pre><p>curlでネット上のNodeSourceのレポジトリからNode.jsをインストール、yarnのインストール<br></p><pre><code>RUN mkdir /app</code></pre><p>Dockerのコンテナ内にappフォルダを作成<br></p><pre><code>WORKDIR /app</code></pre><p>作業ディレクトリを先ほど作成したコンテナ内のappフォルダに指定<br></p><pre><code>COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock</code></pre><p>ローカル環境のGemfileとGemfile.lockをコンテナ内のappディレクトリ内にコピーする<br></p><pre><code>RUN bundle config set --global force_ruby_platform true &amp;&amp; bundle install</code></pre><p>※ bundle config set --global force<em>ruby</em>platform true は、M1チップのMacでなければなくてもOK<br><span style="color:#21213b">bundle install をしてGemfileに記述した各種Gemをインストール</span><br></p><pre><code>RUN ./app</code></pre><p>ローカル環境のファイルをコンテナ内のappディレクトリにコピーする<br></p><pre><code>COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]</code></pre><p>ローカル環境のentrypoint.shをコンテナ内のusr/bin/にコピーし、<br>chmod +x を使用して実行権限をusr/bin/entrypoint.shに与え、<br>entrypoint.shに記述したスクリプトを実行<br></p><pre><code>EXPOSE 3000</code></pre><p>Port番号を3000に指定<br></p><pre><code>CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]</code></pre><p>アプリケーションサーバーを立ち上げるためのコマンド<br>entrypoint.shで記述するexec "$@"の$@の部分に渡されることで実行される<br></p><h3 id="h1ffbb4013a">◎ docker-compose.ymlの準備</h3><p><span style="font-size: 0.75em">/docker-rails-app/docker-compose.yml</span></p><pre><code>version: "3"
services:
  web:
    build: .
    volumes:
      - .:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid &amp;&amp; rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  db:
    image: postgres
    volumes:
      - ./postgres:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: password
    ports:
      - "5432:5432"</code></pre><p><br>webとdbの２つのコンテナを作成する<br></p><h3 id="h939af17b40">◎ Railsの新規プロジェクト作成</h3><p><span style="font-size: 0.75em">/docker-rails-app</span></p><pre><code>docker-compose run --no-deps web rails new . --force --api --database=mysql -T --skip-bundle</code></pre><ul><li>--no-deps リンクしたサービスを起動しない</li><li>--force 既存の Gemfile を上書きするための設定</li><li>--api API に必要なファイルのみ生成</li><li>--database=mysql データベースを MySQL に指定</li><li>-T minitest の生成をしない（RSpec を使用したいため）</li><li>--skip-bundle bundle install をスキップする（後で docker-compose build するため）</li></ul><p>	</p><h4 id="h52308a5939">database.ymlの設定変更</h4><p><span style="font-size: 0.75em">/docker-rails-app/config/database.yml</span></p><pre><code>default: &amp;default
  adapter: postgresql
  encoding: unicode
  pool: &lt;%= ENV.fetch("RAILSMAXTHREADS") { 5 } %&gt;
  username: postgres
  password: password
  host: db</code></pre><p>username、password、hostを追記<br></p><h3 id="h3bfe681e1c">◎docker-composeを使用し、webコンテナとdbコンテナの起動</h3><p><span style="font-size: 0.75em">/docker-rails-app</span></p><pre><code>docker-compose up -d --build</code></pre><p>このコマンドにより、docker-compose.ymlに記載したコードに沿ってコンテナが立ち上がる。<br>また、--buildオプションを付けることでDockerfileに記載したコードに沿ってビルドしてくれる。<br></p><pre><code>docker-compose ps</code></pre><p>このコマンドでコンテナの状態を確認することができる。<br>Stateの部分がweb、dbの両方がUpになっていればコンテナが正常に起動していることになる。<br></p><pre><code>docker-compose exec web rails db:create</code></pre><p>最初は、データベースが存在しないため、docker-compose exec webでwebコンテナに接続し、RailsのコマンドでDBを作成する。<br></p><h3 id="h180d3d5558">◎ ローカル環境のアプリ起動確認</h3><p>Webブラウザでhttp://localhost:3000にアクセスし、Railsの初期画面が描写されていれば完了<br><br><img src="https://images.microcms-assets.io/assets/d3ee3556162242fbad02ab083cd0a9f8/edf7e5ba3ec14a82914e566c5d18c88c/rails_init.webp?w=1629&amp;h=891" alt="Ruby on Rails 初期画面"></p>

Docker環境でのRuby on RailsのAPIの環境構築方法を紹介します。
Railsのバージョンは、6系になっています。また、M1Macにも対応しています。