ionicの始め方&S3簡単デプロイ
はじめに
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を見ていきましょう。
<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を使った記事を書いてみようと思います。
参考
Author And Source
この問題について(ionicの始め方&S3簡単デプロイ), 我々は、より多くの情報をここで見つけました https://qiita.com/shinjiro-suzuki/items/799d46eae8084d156d2f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .