VSCode + Azure WebApp + PHP で開発してみる

### 事前準備
あらかじめ下記をインストールしたWindows10 で行っています
・Visual Studio Code
  (Extension として Remote Development をインストール
・Docker DeskTop for Windows

サンプルリポジトリも任意のフォルダにダウンロードしておく

```
git clone https://github.com/Microsoft/vscode-remote-try-php
```

### 早速初めて見る
(1)Remote Developmentのメニューボタンをクリック
　 (左下でちょっとﾜｶﾘﾆｸｲ)
![webapp+php_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/48359124-5bb1-5b0b-d833-c922f15d0398.png)

(2)「Remote-Containers: Open Folder in Container ...」を選択
　※今回は新規にフォルダを作成
![webapp+php_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/c08bc7f5-6cf3-29a8-03da-fc585a1707bd.png)

(3)構成済みコンテナから使用するコンテナを選択。
　※今回はタイトルの通りPHPを選択
![webapp+php_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/d11118b5-5755-949a-0ebc-1ccb5eba86f7.png)

(4)事前にサンプルをダウンロードしたフォルダを指定(ファイルがダウンロードされるので少し時間がかかる)
準備完了すると下図のようになり、すでに接続済み状態になる
![webapp+php_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/03f0dd87-e61e-2e12-7139-69ac638ed9cd.png)

(5)「Terminal」-> 「New Terminal」をクリック
![webapp+php_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/fa8be7f2-1dab-8924-0c49-312786b9a9be.png)

(6)ターミナルで「php -S 0.0.0.0:8000」を実行
![webapp+php_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/0d35aed0-72f8-1460-2768-a6a4e603fa1f.png)

(7)Start を確認したら左下「Dev Container」をクリックし「Remote-Containers:Forward Port from Container...」を選択
![webapp+php_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/aa662c12-9b60-defe-4477-b7bf5f228a02.png)

(8)「Forward 8000 php -S 0.0.0.0:8000」をクリック
![webapp+php_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/8003f765-f1d6-634a-be49-05b22c223226.png)

(9)「Open Browser」を選択
![webapp+php_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/0bf839fe-0ae6-3966-c450-be8a59fe860c.png)

(10)ブラウザが開いてphpinfoが表示される
![webapp+php_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/50b2e034-25b6-caf6-88f1-ea9dd83bada5.png)

###ソースをGithub連携する
ソースはGitHubのリポジトリで管理します
(1).gitignore ファイルに下記を追加して保存

```
.devcontainer
```

(2)Terminal上からOriginを変更しpushする

```
$ git remote rm origin
$ git remote add origin https://github.com/XXXXXXX/XXXXX.git
$ git push -u origin master
```

(3)リロードしてリポジトリにコミットされていることを確認


### Azure にデプロイしてみる
当然コマンドでもできますが、今回はGUIから設定

(1)Azure Portal から 「App Service プラン」を選択
![webapp+php_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/d5ce393c-1690-2ca2-ec36-29943dabd7c3.png)

(2)「＋追加」をクリック
![webapp+php_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/15108dd2-d5bd-14b2-8fcb-db249b70c589.png)

(3)詳細設定を入力
　 今回はPHPなのでランタイムスタックを「PHP 7.3」に設定
　 その他リージョンなど必要項目を設定し「確認及び作成」→「作成」
![webapp+php_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/feb6c538-a387-9528-b488-c097e1f6681e.png)

(4)完了したらリソースに移動し「デプロイ センター」をクリックXXXXX
![webapp+php_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/cc1ab08a-7858-36f2-af04-7ce30a1991ff.png)

(5)先ほどGitHubをリポジトリにしたので「GitHub」を選択
　Azureにログインしているアカウントと同じであれば「続行」異なる場合は「アカウントの変更」をクリック
![webapp+php_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/b915e402-cd4e-8a19-9c5a-694e563184b7.png)

(6)「App Service のビルド サービス」を選択し「続行」をクリック
※Pipelines との組み合わせは早く実装されてほしい・・・
![webapp+php_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/4cf4b9e8-423e-454a-6e26-840c3f773c44.png)

(7)先ほど追加したコードのリポジトリ情報を選択し「続行」をクリック
![webapp+php_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/a17a7ee1-0cdb-21e6-7bd4-8b1997d9fbe0.png)

(8)確認項目が問題なければ「完了をクリック」
![webapp+php_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/ea368f2a-071c-071d-4f61-afa8a6f0d737.png)

(9)デプロイが完了すると「成功」と表示される
![webapp+php_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/cb82c69d-b51c-db69-5717-f9293a95542c.png)

(10)概要のURLをクリックするとサイトが表示されます
![webapp+php_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/53f460bf-6a10-530d-b976-65fc65f71412.png)
![webapp+php_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/d15ae3fe-f795-d5dd-314e-4509b5fe0130.png)

(11)ちなみにコード更新などで GitHub にコミットすると自動的に更新が走るようになり、デプロイセンターからその様子が確認できます
(コミットするたびデプロイされると困るため、運用ではPipelineなど利用してコントロールする形になるかと思います)
![webapp+php_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/ec273681-2181-6558-626c-91d930f1bace.png)


監視周りは別でまとめます