ionicの始め方＆S3簡単デプロイ #AWS

はじめに

ionicを使ってどうやってプロジェクト作るのー？
作ったは良いけどどうやってS3にデプロイするのー？
って人向けの記事です。

ionicの始め方

まずはじめにterminalでionicCLI、native-run、cordova-resをインストールします。

$ npm install -g @ionic/cli native-run cordova-res

あとはionic startを使ってプロジェクトを作成していきます。
ですがここで結構決めておかないと後々困る事があるので説明していきます。
まず下記がionic startコマンドです。

$ ionic start <name> <template> [options]

nameの部分ですがこれはプロジェクト名です。
わかりやすい名前をつけましょう。

templateに関しては今回作成するプロジェクトに対してionicが用意してくれているテンプレートをつけるか否かです。
--listでどういったテンプレートがあるか見れます。
例:blank, tabs等

optionsですがこれは名前の通り色々なオプションがつけれます。
ここでangularをベースにするのかreactをベースにするのか等選べます。
--listでどういったオプションがあるか見れます。
例:--type=angular, --type=react等

nameをhogeにしtemplateをつないのでblankにしoptionsでangularをベースにする場合は下記のようになります。

$ ionic start hoge blank --type=angular

作成されたファイルの確認

では作成されたを確認していきましょう。
今回はhogeというプロジェクト名にしたのでhogeをサンプルとして書いていきます。
まず作成した対象のファルダに移動して下記のコマンドを叩いてみてください。

$ ionic serve

これでhttp://localhost:8100/home の画面が勝手に表示されたと思います。
まずhomeが作成されているのでhoge/src/app/homeに確認しにいきましょう。
home配下にhtml,ts,scss等が作成されているのが確認出来ると思います。
基本となるhome.page.htmlを見ていきましょう。

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

ion-header

まずion-headerですがこれがheaderです
ion-titleの中にタイトルを書き込むと反映されます。

ion-content

ion-contentはbodyの部分にあたります。
デフォルトだとion-contentの中にion-headerが書いてありますが,
これは画面上には反映されていません。
よく見るとion-headerの中にcollapse="condense"というのがありますね。
collapse="condense"はiosに対して表示されるheaderのオプションになります。
気になる人は後ほどデプロイするのでデプロイ先をiphoneで確認してみてください。

build

terminalで下記コマンドを実行します。

$ ionic build

そしたらhoge配下にwwwというフォルダが作成されたかと思います。
この中にbuildされたファイルが入っています。

S3へデプロイ

自身のAWSアカウントへログインしAWSマネジメントコンソールにてS3を検索しS3へ移動します。
新しいバゲットを作成するをクリックし任意の名前やリージョンを指定しバゲットを作成してください。
作成したらバゲット一覧の中に新しく作ったバゲットがあるのでクリックします。
次にアップロードボタンがあるのでクリックするとアップロード画面が表示されますのでwww配下のファイルを全てアップロードします。
あとはバゲットポリシーを設定し完了です。
とりあえず下記のものがパブリックですが設定すると見れます。
セキュアにしたい場合はipアドレスの設定をしてください。

{
    "Version": "2008-10-17",
    "Id": "PolicyAccessCtrl",
    "Statement": [
        {
            "Sid": "StmtAccessCtrl",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::作成したバケット名/*"
        }
    ]
}

最後に

ionicの基本的な始め方を書きましたがこれがモバイルアプリ作成の第一歩です！
ionicを使うとiosアプリやandroidアプリをデプロイ出来ます。
DeployGateを使い簡単にデバックも出来ますので今度はDeployGateを使った記事を書いてみようと思います。

参考

Ionic公式ドキュメント