新卒研修で実施したアプリ開発におけるサーバー構造とAPIについて振り返りました！

こんにちは、2020年4月にアイスリーデザインに入社しましたエンジニアの蔡と申します。新卒研修期間中に作成したアプリ「lead」のサーバーとAPIについて説明したいと思います。

サーバー構造

・今回使っているサーバー環境は、LAMP環境です。LAMPとは、環境構築が必要な4つの頭文字を組み合わせた名詞です。

1.L → Linux
　　　・OSです。いろいろなバージョンがありますが、今回はUbuntuを使っています。

2.A → Apache　　
　　　・ウェブサーバーです。ウェブサイトを正しい表示するためには必要です。

3.M → MySQL　
　　　・データベースです。主に二つ種類があります、SQLとNoSQL

4.P → PHP
　　　・プログラミング言語です。今回はPHPベースのフレームワークLaravelを使っています。

クラウドプラットフォーム

・世界中は主に三つのプラットフォームを使っています。

- AWS　→　Amazon Web Service、アマゾン社提供のサービスです。
- GCP　→　Google Cloud Platform、グーグル社提供のサービスです。
- Azure　→　マイクロソフト社提供のサービスです。

・各プラットフォームの中でも、いろいろなサービスを提供しています。例えば、AWSのEC2、GCPのCompute Engine(GCE)、Azure Virtual Machinesなど。

・i3DESIGNはメインにAWSを使っていますが、今回選んだのは、GCPです。その理由は、このプロジェクトの機能の一つ、使用者と店の距離計算を実装するため、Google Maps Platform中のGeoCoding APIの利用が必要なので、管理の便利性を考えて、GCPを決めました。

・距離計算とGeoCoding APIの部分に興味があれば、管理画面の文章（ここは管理画面のリンクを入れてます）を読んでください。

・Compute Engineには主流なサーバーOSのイメージが準備されています。CentOS、Ubuntu、SQL Server、Windowsなど、当然カスタムイメージを使いたい場合もアップロードが出来ます。もし、Dockerを使っている場合であれば、Google Container Registryに作成したイメージをpushした後、そのイメージをインスタンスを立ち上げることが出来ますが、今回はDocker使っていませんので、Ubuntuを選択して、一歩一歩で立ち上げたいと思います。

・詳しいステップは、

GCEでインスタンスを作成。
インスタンスを操作する方法は二つあります。直接sshを使って操作し、Cloud SDKを使って操作する。
必要な物をインストール（Apache2、PHP、MySQL）して設定する。Laravelを使っていますのでcomposerのインストールも必要です。
リポジトリをcloneして、立ち上げる必要なコマンドを打って、例えばmigrate, seeder, storage:linkなど
Apache2のconfigファイルの中で、Document Rootをwww/htmlからwww/{リポジトリの名前}変更する。

注意したいのは、Apache2をインストールしたので、開発の時と違い、php artisan serveを使う必要ありません。その代わりにApache2の起動は必要です。

Apache2を自動起動したい場合は

sudo systemctl enable apache2

1	sudo systemctl enable apache2

を使ってください。

API

設計

・APIとは、Application Programing Interfaceの頭文字です。簡単に言うと他のサービスを使いたい時の接続端口です。

クライアント ⇄ API ⇄ サーバー、このようなイメージです。

・今回はRESTful API + Jsonの形で設計しています。ではRESTful APIは何なのか？

RESTful APIはREST原則を実装したAPIです。RESTはREpresentational State Transferの略です。RESTは4つの原則があります。

アドレス可能性(Addressability)

全ての情報が一意なURIを表現する。

ステートレス性(Stateless)

すべでのHTTPリクエストが分離している、セッションなどの状態管理は行われない。

接続性(Connect-ability)

情報の内部、別の情報や状態へのリンクが含まれる。

統一インタフェース(Uniform Interface)

情報の取得、作成、更新、削除、全てHTTPメソッド(GET, POST, PUT, DELETE)を利用して。

・プロジェクト内で必要なAPIは三つあります。

　　1.全部の店を取得するためのAPI　
　　　　　　　　→　 /api/stores

　　2.選んだ店の情報を取得するためのAPI　
　　　　　　　　→　/api/stores/{store_id}

　3.選んだ店の商品検索するためのAPI
　　　　　　　　→　/api/stores/{store_id}/product?keyword={keyword}

?の後ろはURLのパラメータ、複数のパラメータを送りたい場合は&を付ければ大丈夫です。

実装

・Laravelのプロジェクトを作成した時、デフォルトでAPI用のRouter、Controllerとwebページ用の物を分けてました。

Routerのパスは/route/api.php、Controllerのパスは/app/Http/Controllers/APIです。注意したいのは、RouteServiceProviderがデフォルトでRouterファイルをmiddleware "api" groupに追加したので、テストやアクセスする時URLの前で /api/を付けないといけないです。

例えば、

Route::get('stores','API\StoreController@index'); // -> api/stores
Route::get('stores/{store_id}','API\StoreController@getFloor'); // -> api/stores/{stores_id}
Route::get('stores/{store_id}/product','API\StoreController@searchProduct'); // -> /api/stores/{store_id}/product?keyword={keyword}

Route::get('stores','API\StoreController@index'); // -> api/stores

Route::get('stores/{store_id}','API\StoreController@getFloor'); // -> api/stores/{stores_id}

Route::get('stores/{store_id}/product','API\StoreController@searchProduct'); // -> /api/stores/{store_id}/product?keyword={keyword}

・Routerの部分が設定が完了したので、続いてControllerの部分を進めたいと思います。

まず、StoreControllerを作ります。

$ php artisan make:controller API/StoreController

1	$ php artisan make:controller API/StoreController

StoreControllerの中身は以下の通りです。

class StoreController extends Controller
{
    public function index()
    {
        try {
            $header = array(
                'Content-Type' => 'application/json; charset=UTF-8',
                'charset' => 'utf-8'
            );

            $result = //SQL code...
              
            return response()->json([
                'stores' => $result
            ], 200, $header, JSON_UNESCAPED_UNICODE);
        } catch (\Throwable $e) {
            return response()->json([
                'error' => [
                    'code' => [$e->getCode()],
                    'messages' => [$e->getMessage()]
                ],
            ]);
        }
    }
}

class StoreController extends Controller

{

public function index()

{

try {

$header = array(

'Content-Type' => 'application/json; charset=UTF-8',

'charset' => 'utf-8'

);

$result = //SQL code...

return response()->json([

'stores' => $result

], 200, $header, JSON_UNESCAPED_UNICODE);

} catch (\Throwable $e) {

return response()->json([

'error' => [

'code' => [$e->getCode()],

'messages' => [$e->getMessage()]

]);

}

- $result　→　データベースを操作し、与えたデータです。
- return response()->json()　→　
  - responseインスタンスを返せばレスポンスのステータスやヘッダーをカスタマイズができます。
  - jsonメソッドはresponseインスタンスを提供したHTTPレスポンスは構築するためのメソッドの一つです。
  - jsonメソッドが指定された配列をPHP関数json_encodeによりJSONへ変更します。
- JSON_UNESCAPED_UNICODE　→　マルチバイト Unicode 文字をそのままの形式で扱います。デフォルトの場合であれば、漢字などが\uXXXXにエスケープします。

振り返ってみると簡単な気がしますが、この機会でまだ完全に理解出来でない部分を洗い出すことができ、いろいろ調べることで、改めて理解することが出来ました。

以上は「lead」のサーバーとAPIの説明となります。

関連記事として、
「lead」開発のデザイン工程からまとめた記事がございますので、
是非ご興味がございましたら、下記から読んで頂ければと思います！

「新卒エンジニアが研修で実施したモバイルアプリ開発を振り返りました！」

■i3DESIGN

https://www.i3design.jp/services/webapp

こちらから弊社ウェブアプリ開発に関する詳細の確認ができますので、是非チェックしてみて下さい。

新卒研修で実施したアプリ開発におけるサーバー構造とAPIについて振り返りました！

サーバー構造

クラウドプラットフォーム

API

設計

実装

in-Pocket編集部

i3DESIGN

おすすめの記事

ビジネスモデルキャンバスとリーンキャンバスの使い方

in-Pocket編集部

Webデザイナーがデザインに取り入れるマーケティング視点

in-Pocket編集部

ルールを決めてデザインする。Webサイト制作で取り入れたい「トンマナ」設計のコツとポイント

Karin Fujiki

なぜデザイン思考でプロトタイピングが重要か

Minami Kojima

使いやすいサービスのためのインタラクションデザイン

Hikaru Yoshio

UXデザインの基礎！ストーリーボードの概要と作成方法を解説

in-Pocket編集部

サービス開発手法「デザインスプリント」の基本

in-Pocket編集部

アプリチュートリアルの体験設計の重要性について

Minami Kojima

ユーザーモデリングの3階層とは

Karin Fujiki

新卒研修で実施したアプリ開発におけるサーバー構造とAPIについて振り返りました！

サーバー構造

クラウドプラットフォーム

API

設計

実装

in-Pocket編集部

i3DESIGN

この記事をシェアする

おすすめの記事

ビジネスモデルキャンバスとリーンキャンバスの使い方

in-Pocket編集部

Webデザイナーがデザインに取り入れるマーケティング視点

in-Pocket編集部

ルールを決めてデザインする。Webサイト制作で取り入れたい「トンマナ」設計のコツとポイント

Karin Fujiki

なぜデザイン思考でプロトタイピングが重要か

Minami Kojima

使いやすいサービスのためのインタラクションデザイン

Hikaru Yoshio

UXデザインの基礎！ストーリーボードの概要と作成方法を解説

in-Pocket編集部

サービス開発手法「デザインスプリント」の基本

in-Pocket編集部

アプリチュートリアルの体験設計の重要性について

Minami Kojima

ユーザーモデリングの3階層とは

Karin Fujiki