フロントエンドとバックエンドの構築

概要

今回は「バックエンドとフロントエンドとは？」を知るために、Rails(バックエンド)とNode.js(フロントエンド)を用いたWebアプリケーションを構築してみようと思います。

構築に使用したサービス

実行環境：WSL(Ubuntu 24.04 LTS)、docker
エディター：Visual Studio Code
バックエンド：Rails
フロントエンド：Next.js
ミドルウェア：MySQL(データベース)

結果

RailsとMySQLを接続し、そのデータベースに追加したデータをNext.jsにて表示するWebアプリケーションを作成しました。各サービスの関係性を簡単に図に表すと下記のようになると思います。

今後はより「複雑な処理」や「ビジュアルを意識したWebサイトの作成」、「Webサイトの公開」などにチャレンジしていきたいです。

手順①：WSL2のセットアップ

WSL2とは：Windows Subsystem for Linux 2 の略称で，Windows上で Linux を仮想的に動かすことができるシステム環境のことです。

I. コマンドプロンプト(cmd)を開き、下記のコマンドを入力します。

wsl --install

II. Ubuntuのインストールが始まります。インストールが完了したら「user account(ユーザー名)」と「New password(パスワード)」を入力します。
問題なければ入力したユーザー名とUbuntuのCLIが表示されます。

III. 次にVS Codeを開き、拡張機能からWSLをインストールします。これでVS CodeからUbuntu内のファイルを直接編集できるようになります。

IV. VS Codeの左下にある「><」アイコンをクリックし、「WSL」と入力するとメニューに「WSLへの接続」が表示されるので選択します。画面左下に青色で「WSL: Ubuntu」と表示されれば接続完了です。

初期化するには(失敗した人用)

I. コマンドプロンプト(cmd)を開き、下記のコマンドを入力してインストールされているLinuxを確認します。

wsl --list

II. 確認したシステム名を指定して下記のコマンドを入力します。

wsl --unregister <システム名>
# 例：wsl --unregister Ubuntu

手順②：Docker Desktopのインストール

Docker Desktopとは：手順①でインストールしたWSLにdockerを導入するためのソフトです。これが無いとdocker ps等を入力してもエラーとなります。今回の構築ではMySQLサーバー用にdockerを使用します。

I. 下記のURLにアクセスし、「Docker Desktop for Windows - x86_64」をインストールします。

II. ダウンロードファイルを起動し「OK」をクリックするとインストールが開始します。「Installation succeeded」と表示されたら「Close and restart」をクリックしてPCを再起動します。

III. 「Docker Desktop」を開き、アカウントを作成しログインします。

IV. 右上メニューの歯車マークをクリックし、「General ＞ Use the WSL 2 based engine」にチェックを入れます。

V. 左側メニューから「Resources > WSL integration」をクリックし、「Enable integration with my default WSL distro」と「Ubuntu」にチェックを入れて「Apply&restart」を選択します。
これでdocker desktopとwslを接続することができました。

手順③：Nixのインストール

Nixとは：Linuxで使えるパッケージ管理システムです。プロジェクトごとに必要なツールを隔離して管理できるため、バージョン管理が楽になります。

I. VS code「表示＞コマンド」を開き、下記のコマンドを実行してNix (パッケージマネージャ)をインストールします。途中で「Proceed?」と聞かれるので"Y"と入力します。「Nix was installed successfully!」と表示がされれば、インストール完了です。

curl --proto '=https' --tlsv1.2 -sSf -L https://install.determinate.systems/nix | sh -s -- install

上記コマンドの分解解説

パーツ	役割
curl	"Client URL"の略。URLを扱うためのクライアントソフト。データを転送するためのツールです。ここではインターネットからファイルを落とす役割です。
--proto '=https' --tlsv1.2	通信の「安全なルール（プロトコル）」を指定。HTTPSと特定の暗号化規格（TLS 1.2）を使うという指示です。
-sSf -L	curlのオプション。「静かに、エラーがあれば即中止し、リンク先が移動していても追いかける」という設定です。
https://.../nix	Nixのインストールスクリプト本体が置いてあるURL。
|	パイプ。curlで受け取ったデータを次のコマンド(sh)へ橋渡しします。
sh -s -- install	受け取ったデータを「シェル（命令実行機）」で実行し、さらに「install」という指示を与えます。

-sSf -Lオプションの説明

オプション	意味
-s(Silent)	進捗状況のメーターやエラーメッセージを非表示にします。処理中に余計な文字が画面に出ないようにするために使います。
-S(show-error)	-s(silent)を指定していても、もし通信に失敗した時だけはエラーメッセージを表示させます。
-f(fail)	HTTPエラー(404 Not Foundなど)が発生した際、終了コードを「失敗」として返します。エラー後のスクリプトの誤作動を防げます。
-L(location)	指定したURLが「転送(リダイレクト)」されていた場合、自動的に転送先のURLへアクセスします。(例： 古いURL（/old-page）にアクセスしようとすると、新しいURL（/new-page）に飛ばします。

sh -s -- installコマンドの説明

パーツ	役割
sh	シェル(コマンド実行プログラム)を起動します。
-s(standard input)	コマンドをファイルからではなく、「標準入力(パイプなどで流れてきた文字)」から読み込むオプション。
--	「オプションの終わり」を意味する記号。これ以降の文字はshコマンドへの命令ではなく、実行されるスクリプト(nix)への引数として扱われます。
install	実行されるスクリプト(nix)を「インストールモード」に設定する引数(パラメータ)。

II. 続けてターミナルに下記のコマンドを入力してフォルダを作成し、フォルダの場所に移動します。

mkdir my-fullstack-app
cd my-fullstack-app

III. 下記のコマンドを入力し、作成したフォルダをVS codeの新しいウィンドウとして開きます。

code .

IV. my-fullstack-appフォルダの中に「flake.nix」を作成し、下記のコードを追加します。

flake.nix

{
  description = "Fullstack Development Environment";
  
  # ツール(パッケージ)の仕入れ先
  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
  };

  outputs = { self, nixpkgs }:
    let
      # システムの定義
      system = "x86_64-linux";
      pkgs = import nixpkgs {
        inherit system;
        config.allowUnfree = true; # 一部オープンソースではない（ライセンス制限がある）ツールの使用を許可
      };
    in
    {
      devShells.${system}.default = pkgs.mkShell {
        # ツール(パッケージ)の種類
        buildInputs = with pkgs; [
          ruby_3_3
          nodejs_22
          yarn
          terraform
          awscli2
          docker-compose
          pkg-config
          libmysqlclient
          libyaml
          zlib
          openssl
        ];

        shellHook = ''
          echo "Welcome to the Fullstack Project DevShell!"
          echo "Ruby: $(ruby -v)"
          # Railsをローカルディレクトリにインストールするための設定
          export GEM_HOME=$PWD/.gem
          export PATH=$GEM_HOME/bin:$PATH
        '';
      };
    };
}

V. ターミナルに下記のコマンドを入力してNix環境をインストールします。成功すれば「Welcome to the Fullstack Project DevShell!」とメッセージが表示され、ユーザー名の左側に(nix:nix-shell-env)と追加されます。

nix develop --impure

初期化するには(失敗した人用)

I. ターミナルを開き、下記のコマンドを入力するとNix環境をクリアにできます。

nix-collect-garbage -d
rm -rf .gem/
rm -f flake.lock

II. Nix自体を完全にアンインストールする場合は、下記のコマンドを入力します。

sudo systemctl stop nix-daemon.service
sudo systemctl disable nix-daemon.service
sudo rm /etc/nix/nix.conf
sudo rm /etc/profile.d/nix.sh
sudo rm -rf /nix

手順④：ミドルウェア(MySQL)の構築

ミドルウェアとは：フロントエンドとバックエンドの仲介役となるシステム。今回設定するMySQLやrack-cors等がミドルウェアに該当します。ちなみにMySQLはデータベースサービスのひとつです。

I. my-fullstack-appフォルダの中に「docker-compose.yml」を作成し、下記のコードを追加します。

docker-compose.yml

services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: my_app_development
    ports:
      - "3306:3306"

II. ターミナルに下記のコマンドを入力してミドルウェアを立ち上げます。

docker compose up -d

III. 下記のコマンドを入力してmysqlの「STATUS」がUpになっていれば完了です。

docker ps

手順⑤：Railsのインストール

Railsとは：フルスタックなWebフレームワークです。今回は「バックエンド（サーバーサイド）」として使用します。利用するにはNixで導入したruby_3_3とlibmysqlclientが必要です。

I. Nix環境に入れたら、下記のコマンドを入力してRailsをインストールします。インストールが完了したら「.gem」フォルダが作成されます。

gem install rails

gemとは：Ruby版のパッケージのことです。gemコマンドは指定したパッケージ(gem)をインストールします。ちなみに、Rubyが「宝石（ルビー）」という名前なので、その上で動く小さなプログラムたちを「宝石（Gem）」と呼ぶようになったらしいです。

II. 下記のコマンドを入力してRails(バックエンド)に必要なファイルをインストールします。

rails new backend --api --database=mysql

上記コマンドの分解解説

パーツ	役割
rails new backend	「backend」フォルダを新規作成し、そこにRailsをインストールします。
--api	Railsをapiモード(バックエンド)として設定します 。
--database=mysql	Railsは標準では「SQLite」という簡易的なデータベースを使おうとします。今回はWebアプリでよく使われているらしいMySQLを設定します。

「Could not find (ライブラリ名)」エラーが表示された場合

※下記のコマンドを入力して不足しているライブラリを追加インストールします。

bundle install

bundleとは：プロジェクトで使うライブラリ(gem)の種類とバージョンを一括管理するプログラムです。コマンドの前に「bundle」もしくは「bundle exec」を付けることでライブラリ間の依存関係を計算しながら実行することができる？ようです。

III. 下記のコマンドを入力して「Rails 8.x.x」のようにバージョンが表示されれば、Rails(バックエンド)のインストールは完了です。

bin/rails -v

※「Ignoring... because it is missing extensions」警告メッセージは無視で大丈夫です

初期化するには(失敗した人用)

railsで作成したbackendフォルダを削除するには、my-fullstack-appフォルダ内で下記のコマンドを入力します。

rm -rf backend

手順⑥：DB接続

I. 「backend > config > database.yml」を開き、"default:"セクションを以下のように編集します。

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password        # docker-compose.ymlで設定したもの
  host: 127.0.0.1           # WSL2からDockerのMySQLへはlocalhost(127.0.0.1)で繋がります
  port: 3306

II. ターミナル（nix環境）で下記のコマンドを入力してデータベースを作成します。

cd backend
bin/rails db:create

手順⑦：Rails(バックエンド)の起動

I. 下記のコマンドを入力し、Railsを立ち上げます。正常に起動ができれば「Listening on http://127.0.0.1:3000」と表示されます。

bin/rails s

II. ブラウザに「http://127.0.0.1:3000」と入力し、「RAILS」と赤いロゴの画面が出ればバックエンドの構築は完了です。

手順⑧：Next.jsの設定と起動

Next.jsとは：Webサイト制作用のフレームワークです。本プロジェクトのフロントエンドになります。

I. ターミナルを新規で作成し「my-fullstack-app」フォルダに移動、下記のコマンドを入力してNext.jsに必要な設定をインストールします。途中の質問は全て"Yes"で大丈夫です。「Success!」のメッセージが表示されれば完了です。

npx create-next-app@latest frontend --typescript --tailwind --eslint

上記コマンドの分解解説

パーツ	役割
npx	node package executerの略。npmが管理するパッケージを実行するコマンド。npmとは、Node.jsをインストールするとすぐに利用できるパッケージマネージャーのことです。
create-next-app@latest frontend	最新バージョンのNode.js設定ツールをインストールするパッケージ。
--typescript	TypeScriptを使用するオプション。
--tailwind	Tailwind CSSを導入するオプション。
--eslint	ESLint（コードの書き間違いを自動チェックするツール）を導入するオプション。

II. 下記のコマンドを入力し、Next.js(フロントエンド)を立ち上げます。正常に起動ができれば「Ready in 〇〇ms」とURL(例：http://localhost:3001)が表示されます。

cd frontend
npm run dev

III. ブラウザに「http://localhost:3001」と入力し、「NEXT.JS」と表示された画面が出ればフロントエンドの起動は完了です。

初期化するには(失敗した人用)

Next.js(frontendフォルダ)を削除するには、my-fullstack-appフォルダ内で下記のコマンドを入力します。

rm -rf frontend

手順⑨：バックエンド(DB)の編集

I. Railsを停止(ctrl+c)し、下記のコマンドを入力、ルーティングやテーブルを作成後、データベースを更新します。

rails g scaffold Message content:string
rails db:migrate

上記コマンドの分解解説

パーツ	役割
rails g(generate) scaffold	scaffold(訳：足場)を構築します。scaffoldとは、ルーティングやコントローラー、テーブル等の「設計図」を自動で作成してくれるRailsのツールです。
Message	Messageモデルを作成します。テーブル名にも反映し、自動的に複数形(messages)となります。
content:string	Messageモデルにcontentカラムを追加します。

パーツ	役割
rails db:migrate	scaffoldコマンドで作られた設計図を実際のデータベースに反映させます。

更新後は下記のテーブルが作成されます。「content」カラム以外は自動で作成されます。

II. 下記のコマンドを入力し、「content」カラムに文字列を追加します。

rails runner "Message.create(content: 'Hello from Rails API')"

III. 再度Railsを立ち上げます。その後ブラウザに「http://127.0.0.1:3000」と入力し、追加した文字列を含んだ画面が表示されればバックエンドのデータ編集は完了です。

bin/rails s

初期化するには(失敗した人用)

Railsサーバーを停止(ctrl+c)した後、下記のコマンドを入力してデータベースを空にします。

#全てのデータとテーブルを削除
rails db:migrate:reset

#g scaffoldで作成したデータを削除
rails destroy scaffold Message

手順⑩：ミドルウェア(rack-cors)の設定

rack-corsとは：CORS(Cross-Origin Resource Sharing)を扱うツールです。CORSとは、ドメイン間のブラウザセキュリティルールを設定する仕組みだと思ってます。

I. 「backend > Gemfile」を開き、下記の行の#(コメントアウト)を外します。

gem "rack-cors"

II. ターミナルで「backend」フォルダに移動し、下記のコマンドを入力してライブラリを更新します。

bundle install

III. 「backend > config > initializers > cors.rb」を開き、下記のコードを追加します。これでCORSの設定は完了です。

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3001" # Next.jsのURLを許可

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

手順⑪：Next.js(フロントエンド)とRails(バックエンド)を繋げる

I. Next.jsを停止(ctrl+c)し、「frontend > app > page.tsx」を開きます。中身をすべて削除し、下記のコードに書き換えます。

page.tsx

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3001" # Next.jsのURLを許可

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

II. 再度Next.jsを立ち上げます。URLをブラウザで開き、「Hello from Rails API」と表示されれば、Next.js(フロントエンド)とRails(バックエンド)の接続が完了です。

npm run dev

参考Webサイト