2020年10月13日

テクノロジー

新卒研修で実施したアプリ開発におけるサーバー構造と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を選択して、一歩一歩で立ち上げたいと思います。

・詳しいステップは、

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

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

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

を使ってください。

API

設計

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

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

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

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

  1. アドレス可能性(Addressability)
    • 全ての情報が一意なURIを表現する。
  2. ステートレス性(Stateless)
    • すべでのHTTPリクエストが分離している、セッションなどの状態管理は行われない。
  3. 接続性(Connect-ability)
    • 情報の内部、別の情報や状態へのリンクが含まれる。
  4. 統一インタフェース(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/を付けないといけないです。

例えば、

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

まず、StoreControllerを作ります。

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

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

 

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

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

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

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

in-Pocket編集部

i3DESIGN

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印