IT

IonicのAndroidアプリをWebアプリケーションとしてデプロイする

概要

Angular,IonicをWebアプリとしてデプロイする方法について記述する。

firebaseを使ってホスティングする方法と、Xserverでapacheでホスティングする方法を試した。firebaseでホスティングするのは(慣れてしまえば)至れり尽くせりであるが、先のことを考えると値段が気になるためXserverのほうが望ましいように感じた。

Xserverで既にドメインを持っていれば、そのサブドメインにデプロイすることで追加負担0でサイトをデプロイすることができる。速度も速いし、こちらのほうがいい。

Firebaseでのホスティング

https://qiita.com/M_Faust/items/a514b8a79d2fd13cb72b

https://qiita.com/daikiojm/items/89f46bd83c9a2285bbc6

が参考になった。

まず、ライブラリのインストールをする

npm install -g firebase-tools

ログインする

firebase login

なお、.firebasercというファイルが生成されているので2度目以降はこれを消す。macならcommand + shift + . で隠しファイルを表示できる

初期設定を行う

firebase init

なにをしたいか聞かれるので
Hosting: Configure and deploy Firebase Hosting sitesをスペースで選択する。

What do you want to use as your public directory?

と聞かれたら、アップロードしたいファイル一式があるフォルダを指定する。私の場合はIonicだったのでwwwだった。

Configure as a single-page app (rewrite all urls to /index.html)? Yes

と言う質問については、Ionicなのでyest

File www/index.html already exists. Overwrite? (y/N)

これは、先のフォルダで指定した場所のindex.htmlをこの場でテスト用のものに上書きしますかと言うことなので、Noをしておく

その後、

firebase deploy

とすればいい。

Xserverの場合

流れは、xserverのファイルマネージャで確認できる場所へファイルをFTPソフトを使って自分でアップロードし、apacheの設定を.httpaccessとhtconfで行う

https://www.xserver.ne.jp/login_file.php

私はfirezillaを使った。

ionic build --prod

で生成されるファイル郡をfilezillaでアップロードする。私の場合は、サブドメインだったので、サブドメイン用のフォルダ(pwaと言うもの)にアップロードした

その後、pwaの中に.httpaccessファイルを生成し、さらにルートフォルダ(public_html)にhttpd.confを作成し、編集した

https://mi12cp.hatenablog.com/entry/2018/08/25/224149
<Directory "/pwa">
#   Options Indexes FollowSymLinks
    Options FollowSymLinks

#   AllowOverride None
    AllowOverride All

    Require all granted
</Directory>

.htaccessは下記

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

ABOUT ME
Faust
1980年代生まれで東京都府中市育ち。大学は物理化学専攻してメーカへ。 Engineer of Python, Angular. Analyzing data and building app at Awesome Rainbows LCC. #SDGs #Python

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA