GitHubとAzure AppServiceで自動デプロイ

あーGitHubにpushしたら自動で公開出来たら良いのになー
SSLに対応したドメインだといいなー
サーバー建ててインフラ周りの設定するのはめんどくさいなー
小さいプログラムだから無料がいいなー

**それAzure WebAppsで出来ます**

# この記事を読むと出来ること

* GitHubにpushしたらサーバー上で公開される
* SSL対応のサーバーが建つ
* インフラの設定を気にしなくても良い。

ということで検証環境などにすると良いと思います。
独自ドメインの設定や、サーバースペックがいる場合などは、有料になるそうです。

# 前提

* GitHubのアカウント
* Azureのアカウント

Azureのアカウントは学生なら無料で作成出来るので、作成しておいて損はないと思います。
[Azure for Students – 無料アカウント クレジット | Microsoft Azure](https://azure.microsoft.com/ja-jp/free/students/)

# GitHub

## リポジトリを作成


リポジトリ名は何でも良いです。

<img width="763" alt="スクリーンショット 2020-07-14 18.38.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/9af7d40c-b83b-74a3-b748-e58108f051df.png">

## 適当にpush

公開したいファイルをpushします
今回は適当に`index.html`を作成しました。

<img width="902" alt="スクリーンショット 2020-07-14 19.12.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/307e96ee-0d79-058e-cdb6-4d73cf1121ad.png">



# Azureの設定

## WebAppsを起動

AzureのポータルからAppServiceをクリックします

<img width="1122" alt="スクリーンショット 2020-07-14 18.39.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/7b24f18e-52a8-e067-7853-13bb12fabb69.png">


追加を押して新規に作成します

<img width="1280" alt="スクリーンショット 2020-07-14 18.41.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/acaa7ba2-a71a-8862-325a-eb581be93c91.png">

リソースグループは適当に新規作成します。
すみません。あまり良くわかってないです。
これを単体で使う分にはなんでも良いと思います

名前も適当です。ただし、どこかの誰かと同じ名前は入力出来ない(ドメインだだから)ので、注意してください

コードを選択します。

ランタイムスタックはサーバー内で何を動かすかということです。
今回はPHP7.3を選択しました
nodeとかPythonとかRubyとかいろいろあります。

OSはLinuxにしました


<img width="809" alt="スクリーンショット 2020-07-14 18.45.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/de291b3f-4b0a-45bc-fcca-90ced3508459.png">

地域はどこに建てるかですね
無難にJapan East

サイズは環境によって適宜変えてください。
今回はすごく小さなものなので、Freeでいきます

<img width="804" alt="スクリーンショット 2020-07-14 18.45.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/53b2e769-6bac-054d-4527-7afc471e25eb.png">

すべて設定が終われば作成を押します。


## GitHubを関連付ける

構築が完了すると、右上の通知欄にリソースへ移動というのが出てくるので、そちらをクリックしてリソースへ移動します

<img width="518" alt="スクリーンショット 2020-07-14 18.55.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/0894013e-9258-ed5b-2afa-ddb011bb9b89.png">

この画面のデプロイセンターをクリック

<img width="1277" alt="スクリーンショット 2020-07-14 18.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/471293d6-0e86-530d-2bab-1c7318576433.png">


真ん中のGitHubを選択して、ログインします。
この画面はログイン済みのためアカウント名が出ています

ログインしたら続行

<img width="1189" alt="スクリーンショット 2020-07-14 18.58.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/d77a850c-e830-11d9-2bf5-e119c947f031.png">

AppServiceのビルドサービスを選択して続行

<img width="1189" alt="スクリーンショット 2020-07-14 18.58.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/7de95864-f8b9-f9c1-b850-fd560fa3ae0e.png">

リポジトリとブランチを設定します
設定したら続行

<img width="1189" alt="スクリーンショット 2020-07-14 19.07.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/8925878c-fb19-8910-ede6-cad4c03c1f94.png">


### 補足

設定完了できないときは、各言語の名前を確認してください
それぞれ決まっているようです
[Azure App Service への継続的デプロイ
](https://docs.microsoft.com/ja-jp/azure/app-service/deploy-continuous-deployment)

## URLへアクセス

完了したら概要にいき、URLを確認してアクセスします

<img width="1189" alt="スクリーンショット 2020-07-14 19.14.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/f2eb2336-2ba6-e988-8cf0-14ad9cfc55ef.png">

GitHubの`index.html`が反映されていますね。
`CSS`や`JavaScript`ももちろん動いています

<img width="1215" alt="スクリーンショット 2020-07-14 19.16.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/25eb3467-2f07-3c0a-c452-ee3e83a9e57f.png">

# GitHub

## GitHubにpush


`phpinfo.php`を作成して、phpが動いているかを確認します

念の為中身

```php:phpinfo.php
<?php
phpinfo();
 ?>
```

<img width="888" alt="スクリーンショット 2020-07-14 19.18.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/ee7c33b6-9d8c-7667-be50-b381c255f3e4.png">


# Azure

https://hoge.azurewebsites.net/phpinfo.php にアクセスすると…


<img width="1222" alt="スクリーンショット 2020-07-14 19.20.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/d1640941-dee8-5081-607a-da9f3cd1af5e.png">


phpが動いていますね！！
これでGitHubにpushしただけで自動的にサーバーに反映してくれるようになりました。
そしてちゃっかり`https://~~`になっています

最高！