無料でウェブサイトをインターネットにアップロードして動作をテストする方法

# ウェブサイト確認の問題点

ウェブサイトを作って、ローカル環境でテストして、問題が見つからなくても、インターネットに公開したら、思った通り動作しない可能性があります。それを解決するのに、やはりインターネットにおける検証が必要です。しかし、インターネットで確認するのに、次のような問題点があります。

- サーバーを用意しなければなりません（お金がかかる）
- サーバーの環境を設定しなければなりません（IT知識が必要）
- サーバーにウェブサイトのファイルをデプロイしなければなりません（IT知識が必要）

# AppGallery ConnectのCloud Hostingについて
AppGallery ConnectのCloud Hostingはファーウェイが提供しているホスティングサービスです。個人アカウントであれば、10GBまでのファイルをホスティングでき、1日のデータ転送量は360MBまでで、費用は無料です。

### AppGallery ConnectのCloud Hostingがほかの類似サービスに比べて優れた部分
- 無料（お金がかからない）
- 何もインストールせずにすぐ使えます（IT知識が不要）
- コマンド入力がいりません（IT知識が不要）

# AppGallery ConnectのCloud Hostingの利用方法

## 必要なもの
AppGallery ConnectのCloud Hostingを利用するのに、

1. HUAWEI ID
2. HMS開発者アカウント

が必要です。どちらも下記のサイトから申請できます。
https://developer.huawei.com/consumer/jp/

## 利用方法
### 1. Cloud Hostingを有効にします。
Cloud Hostingがまだ有効になっていない場合、左側のメニューから“Cloud Hosting”を選び、右側の“Enable now”をクリックします。

![image1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/f719e1d6-76dd-7891-eb8c-f3238426c766.png)

### 2. データ保存場所を設定します。
日本の場合、データ保存場所はシンガポール（Singapore）になります。

# 

![image2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/415f4c13-e1b4-eb21-8691-cad9e9ef826f.png)

### 3. ドメイン種類を決めます。
ウェブサイトのドメイン種類では、“Custom domain”と“Wildcard domain”が選べます。
Custom domainの場合、ドメイン取得サービスでドメインを購入しなければなりません。
Wildcard domainなら、トップレベルドメイン、第2レベルドメイン、第3レベルドメインは決まっていますが（dra.agchosting.link）、第4レベルドメインは自由に設定できます。

![image3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/2064da01-39a5-4498-eb6d-0997f68ee447.png)

ドメイン種類を決めたら、“New site”ボタンをクリックします。

![image4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/cf5b17fc-1c2d-4ef8-9bcd-e20fd71bf380.png)

### 4. ドメインを作成します。
第4レベルドメインを入れて、ドメインを作成します。

![image5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/5d0ec10d-f4c4-5c46-3e25-0bafd5fbb67b.png)

ドメイン作成が終わったら、次の画面が表示されます。

![image6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/5b440d34-4421-b482-9ff0-8542f76da4f3.png)

### 5. デプロイするファイルを用意ます。
ウェブサイトの全ファイルを圧縮したZIPファイルを用意します。ZIPファイルの中身は次のような構成になります。必ずindex.htmlをルートに置かなければなりません。

![website1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/c473e643-ecd3-d736-c25f-0620f32b2581.png)
![website2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/c19322c9-071c-742a-340f-ed2355b8818e.png)

### 6. デプロイするターゲットのドメインの管理画面を開きます。
対象ドメインの“Manage version”ボタンをクリックします。
![image7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/9fc5a690-efe7-7eea-8fac-9e6f2915fc09.png)

そして、“New version”をクリックします。
![image8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/070c64b1-3a35-5e8b-355a-af176a7f25af.png)

### 7. デプロイファイルをアップロードします。
“Browse”ボタンをクリックし、デプロイするZIPファイルを選び、“Upload”ボタンをクリックし、ファイルをアップロードします。アップロードが完了したら、“OK”ボタンをクリックします。

![image9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/5c3b712a-18ac-e40a-05d6-f094b63689b3.png)

アップロードが完了したら、次の画面に戻ります。

![image10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/ac34dcee-0466-9513-2301-4eeea9504eda.png)

これでデプロイが完了です。

### 8. ウェブサイトを開きます。
デプロイが完了したら、ウェブサイトがすぐ開けます。

## 注意事項
現在、静的サイトのホスティングしかサポートされていません。
また、個人開発者アカウントは無料で利用できますが、10GBまでのファイルサイズ上限と1日に360MBまでのデータ転送量の制限があります。企業開発者アカウントの場合、従量課金制に切り替えられます。

![image11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/d5c537a4-1a78-187e-ed7c-7485fa9a98e8.png)

# 参考
* HMS：[https://developer.huawei.com/consumer/jp/](https://developer.huawei.com/consumer/jp/)
* AppGallery ConnectのCloud Hosting：[https://developer.huawei.com/consumer/jp/doc/development/AppGallery-connect-Guides/agc-cloudhosting-introductions-0000001057944575](https://developer.huawei.com/consumer/jp/doc/development/AppGallery-connect-Guides/agc-cloudhosting-introductions-0000001057944575)
* Huawei Developers：[https://forums.developer.huawei.com/forumPortal/en/home](https://forums.developer.huawei.com/forumPortal/en/home)
* Facebook Huawei Developersグループ：[https://www.facebook.com/Huaweidevs/](https://www.facebook.com/Huaweidevs/)