Flutterのサーバー環境を構築するおすすめの方法３選と、それぞれの構築手順を紹介

2023年4月19日 2023年4月21日 13分9秒

lhaplus

Firebase Cloud Functions

Firebase Cloud Functionsは、Googleが提供するサーバーレスのバックエンドサービスです。

Flutterアプリからデータを送信し、Firebase Cloud Functionsを使用してサーバーサイドでデータを処理することができます。

Firebase Cloud Functionsを使用することで、サーバーのインフラストラクチャのセットアップが不要で、スケーラビリティやセキュリティの面でも優れています。

Firebase Cloud Functionsを使用してFlutterアプリからサーバーを構築する方法

①　Firebaseプロジェクトを作成

Firebaseプロジェクトを作成し、FirebaseコンソールでCloud Functionsを有効にします。

②　Firebase CLIをインストール

Firebase CLIをインストールして、Firebaseプロジェクトに接続します。

③　Cloud Functionsを作成

Firebase CLIを使用して、Cloud Functionsを作成します。以下のコマンドを実行して、新しいCloud Functionを作成します。

bash

firebase init functions

④　Cloud Functionを作成

Flutterアプリと通信するためのAPIを作成するには、functions/index.jsファイルを編集します。例えば、以下のような関数を作成することができます。

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({ origin: true }));

app.get('/hello', (req, res) => {
  res.send('Hello from Firebase!');
});

exports.api = functions.https.onRequest(app);

上記の例では、HTTP GETリクエストが/helloエンドポイントに送信された場合、Hello from Firebase!というレスポンスを返します。

⑤　Cloud Functionをデプロイ

Cloud Functionをデプロイするには、以下のコマンドを実行します。

bash

firebase deploy --only functions

このコマンドを実行すると、Cloud FunctionがFirebaseサーバーにデプロイされます。

⑥　FlutterアプリでAPIを呼び出す

FlutterアプリからCloud Functionを呼び出すには、HTTPパッケージを使用してAPIリクエストを送信します。以下は、上記の例の/helloエンドポイントにリクエストを送信する方法の例です。

dart

import 'package:http/http.dart' as http;

Future fetchHello() async {
  final response = await http.get(Uri.parse('https://-.cloudfunctions.net/api/hello'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to fetch data');
  }
}

上記の例では、とは、FirebaseプロジェクトのリージョンとプロジェクトIDに置き換えてください。

以上の手順に従うことで、FlutterアプリからFirebase Cloud Functionsを使用してサーバーを構築することができます。

Node.js

Node.jsは、JavaScriptで書かれたサーバーサイドのプラットフォームです。

Flutterアプリと通信するAPIをNode.jsで作成し、Node.jsサーバー上で実行することができます。

Node.jsは、非同期処理により高速な処理が可能であり、フレキシブルで拡張性が高いため、Flutterでサーバーを構築するための人気のある選択肢です。

Ruby on Rails

Ruby on Railsは、Rubyで書かれたWebアプリケーションフレームワークで、データベースやAPIなどのバックエンド処理を簡単に構築できます。

Flutterアプリからデータを送信し、Ruby on Railsを使用してバックエンド処理を行うことができます。

Ruby on Railsは、高速で、拡張性が高く、シンプルなコーディングで複雑なWebアプリケーションを構築できるため、Flutterでサーバーを構築するための人気のある選択肢です。

Node.jsを使用してFlutterのサーバー環境を構築する手順

①　Node.jsをインストール

まず、Node.jsをインストールします。Node.jsの公式ウェブサイト（https://nodejs.org/）から、最新バージョンのNode.jsをダウンロードしてインストールしてください。

②　Expressフレームワークをインストール

次に、Expressフレームワークを使用してサーバーを構築するために、npmを使用してExpressパッケージをインストールします。以下のコマンドをターミナルで実行します。

npm install express

③　サーバーコードを書く

サーバーコードを書きます。
例えば、以下のようなExpressアプリケーションを作成することができます。

const express = require('express')
const app = express()

app.get('/api', (req, res) => {
  res.json({ message: 'Hello from Node.js!' })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`)
})

上記の例では、Expressアプリケーションがポート3000で起動し、/apiエンドポイントにGETリクエストが送信された場合、JSON形式の{ message: 'Hello from Node.js!' }レスポンスが返されます。

④　サーバーを起動

サーバーを起動するには、以下のコマンドをターミナルで実行します。

node server.js

上記の例の場合、server.jsファイルに上記のコードが保存されていると仮定しています。

コマンドを実行すると、サーバーが起動し、コンソールにServer running at http://localhost:3000というメッセージが表示されます。

⑤　FlutterアプリからAPIを呼び出す

FlutterアプリからサーバーAPIを呼び出すには、HTTPパッケージを使用します。
以下は、上記の例の/apiエンドポイントにリクエストを送信する方法の例です。

import 'package:http/http.dart' as http;

Future fetchMessage() async {
  final response = await http.get(Uri.parse('http://localhost:3000/api'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to fetch data');
  }
}

上記の例では、サーバーがローカルホストのポート3000で実行されていることを前提としています。

必要に応じて、ローカルホストの代わりにサーバーのIPアドレスを指定することができます。

以上の手順に従うことで、FlutterアプリからNode.jsで構築したサーバーを呼び出すことができます。

ただし、Node.jsでサーバーを構築する場合、セキュリティに配慮する必要があります。

例えば、パスワードを暗号化する、外部からの攻撃を防ぐためにセキュリティトークンを実装するなどの対策が必要です。また、Node.jsのパッケージマネージャーであるnpmを使用して、必要なパッケージをインストールすることも重要です。

そのため、セキュリティについての知識や、npmの使い方などの基本的な知識が必要になる場合があります。さらに、Node.jsでの開発に慣れていない場合は、チュートリアルやサンプルコードなどを参考にしながら開発することをおすすめします。

なお、FlutterとNode.jsを組み合わせたWebアプリケーションを開発する場合は、Flutter Webを使用することができます。

Flutter Webは、FlutterでWebアプリケーションを開発するためのフレームワークであり、JavaScriptと通信することができます。

Flutter Webを使用することで、クロスプラットフォームなWebアプリケーションを開発することができます。

Ruby on RailsでFlutterのサーバー環境を構築する方法

①　Ruby on Railsアプリケーションの作成

まず、Ruby on Railsアプリケーションを作成します。ターミナルで以下のコマンドを入力して、新しいRailsアプリケーションを作成します。

arduino

rails new myapp

②　APIエンドポイントの作成

次に、APIエンドポイントを作成します。

Flutterアプリケーションがサーバーにリクエストを送信するためのAPIエンドポイントを作成する必要があります。

例えば、/api/usersにGETリクエストを送信すると、全てのユーザーのリストが返されるようなAPIを作成する場合、以下のようにルーティングとコントローラーを定義します。

config/routes.rb:
arduino

Rails.application.routes.draw do
  namespace :api do
    get '/users', to: 'users#index'
  end
end

app/controllers/api/users_controller.rb:
ruby

module Api
  class UsersController < ApplicationController
    def index
      @users = User.all
      render json: @users
    end
  end
end

③　データベースの設定

データベースにアクセスするために、database.ymlファイルにデータベースの設定を記述します。
以下は、MySQLを使用する場合の例です。
yaml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['DATABASE_USERNAME'] %>
  password: <%= ENV['DATABASE_PASSWORD'] %>
  host: <%= ENV['DATABASE_HOST'] %>

development:
  <<: *default
  database: myapp_development

test:
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myapp_production

④　Gemのインストール

必要なGemをインストールします。例えば、JSONを扱うためのjbuilderや、CORSのためのrack-corsをインストールする場合、以下のようにコマンドを入力します。
arduino

gem 'jbuilder'
gem 'rack-cors'

⑤　サーバーの起動

最後に、サーバーを起動します。以下のコマンドを入力して、Railsアプリケーションを起動します。

以上の手順に従うことで、Ruby on RailsでFlutterのサーバー環境を構築することができます。

FlutterアプリとRuby on Railsアプリを連携

FlutterアプリとRuby on Railsアプリを連携するためには、HTTPリクエストを使用します。

FlutterでHTTPリクエストを行うには、httpパッケージを使用します。

また、Ruby on RailsでAPIを作成するには、rails g scaffoldコマンドを使用してCRUDアクションを含むRESTful APIを簡単に作成できます。

以下は、FlutterアプリからRuby on Rails APIエンドポイントにGETリクエストを送信し、JSONレスポンスを取得する例です。

dart

import 'dart:convert';
import 'package:http/http.dart' as http;

Future getUsers() async {
  final response = await http.get(Uri.parse('http://localhost:3000/users'));
  if (response.statusCode == 200) {
    final List data = json.decode(response.body);
    data.forEach((user) {
      print('User ID: ${user['id']}');
      print('User Name: ${user['name']}');
      print('User Email: ${user['email']}');
    });
  } else {
    throw Exception('Failed to fetch users');
  }
}

この例では、APIサーバーのURLが"http://localhost:3000/users"であることを仮定しています。

必要に応じて、URLを変更してください。

⑥　Ruby on RailsアプリでAPIエンドポイント

まず、必要なモデルを作成します。
c

$ rails g model user name:string email:string
$ rails db:migrate

次に、コントローラーを作成します。
shell

$ rails g scaffold_controller api/v1/users name:string email:string

このコマンドにより、"api/v1/users"エンドポイントにCRUDアクションを含むRESTful APIが作成されます。

最後に、CORSの設定を変更する必要があります。

config/application.rbファイルに以下の行を追加して、クロスドメインリクエストを許可します。

ruby

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :put, :delete, :options]
  end
end

以上の手順に従うことで、Ruby on RailsでFlutterのサーバー環境を構築することができます。

FlutterアプリケーションからAPIエンドポイントにリクエストを送信し、Ruby on Railsアプリケーションからデータを取得することができます。

この記事を書いた人

lhaplus

どうも、コミュ障・根暗のWebプログラマー兼アフィリエイターです。性格のマイナスな面で負けないように、独学でプログラミング勉強中です。苦労したものを忘れないようにこのブログに、良質なメモ残していきます。技術的な内容だけではなく、ちょっとゆったりした娯楽とかも気が向いたら投稿していこうと思います。みなさんの役に立てれば嬉しいです。