掲示板を作ろう～その1 環境構築編～

#きっかけ
[プログラマーになりたいと思った人がやるべき７つのこと ](https://axia.co.jp/2018-03-16)より

```
せっかくプログラミングを学んでいるのであれば、こんなものを作ってみたいというものが一つくらいあってほしいと個人的には思いますが、どうしても何を作れば良いのかわからないという人は、ログイン機能、画像投稿機能、データダウンロード機能が備わった掲示板を作ってみてください。
```

ワイ「すぐできそうな気がする」
⇒やってみた

<font color="Gainsboro">転職のためのポートフォリオにもなるなぁ</font>

#環境をどうするか
掲示板を作るにはサーバが必要か:thinking:
掲示板は外部に見えるようにしたいしどうしようかなぁ:confused:

###選択肢1　自宅サーバ
自宅サーバを外部に公開したことがないから、実施するコストが高い。
すぐできる気がしない。
**⇒却下**

###選択肢2　VPS or クラウドのVM
Betterな選択肢。仕事でオンプレとVMでサーバ構築してるし実施コストは低い。
> VPSとクラウドのVMについてはこれがとても参考になったよ！！！
[マウンテンデュー単価で考える個人開発用サーバ VPSサーバ編(AWS Lightsail、VULTR、さくらのVPS、ConoHa)](https://qiita.com/hassoubeat/items/b91e24fc249497ea8582)

でも、お金がかかっちゃうか…:money_mouth:　お試しだし無料でなんとかしたい！
後、サーバ構築は仕事でやってるし面倒なんだよなぁ
**他の選択肢はないのか！？**

###選択肢3　AuzreのWeb app+SQL Server
ホームページとして公開するだけなら、PaaSでよくね:thinking:

>**PaaSとは**
<iframe src="//www.slideshare.net/slideshow/embed_code/key/ma5qgV39Sqc8pZ" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/chomado/line-clova-line" title="サーバーレスでLINE Clova スキル開発＋LINE との接続" target="_blank">サーバーレスでLINE Clova スキル開発＋LINE との接続</a> </strong> from <strong><a href="https://www.slideshare.net/chomado" target="_blank">Madoka Chiyoda</a></strong> </div>　スライド42参照

AzureのWeb AppならFreeのプランがあるし、Web Appと連携するのであればDBも無料で作成可能。
お試しだから処理性能もトラフィック量も考慮しないし、個人的にクラウドを使っていきたいのもある………
**⇒採用**

※完全に無料ではない
[App Service プラン ](https://azure.microsoft.com/ja-jp/pricing/details/app-service/plans/)では以下の記載あり（記事作成時点）

```
165 MB の送信ネットワーク トラフィックが含まれています。追加の送信ネットワーク帯域幅は別途課金されます。
App Service プランでは、20 MB の無料の SQL データベースに12 か月間アクセスできます。12 か月が経過した後は、この無料の SQL データベースは有料の SQL 基本サブスクリプションに変換されます。
```

#####Appendix: Why Azure?
クラウドなら最大手のAWSの方がよかったのでは？
⇒**I love Microsoft !**

#環境
AzureのWeb APP + SQL DB（Freeプラン）
Githubと連携させてコードをデプロイ


##Azure上で無料のWeb App+SQL DB作成手順
※（2018/11/23時点での作成方法）
1. Azureポータルにアクセス！
2. App Service -> 追加 -> Web Appsの「Web App + SQL」 -> 作成!![WebAppSQL追加.png](https://qiita-image-store.s3.amazonaws.com/0/180800/786807a2-f0b1-9bee-6d80-4d9a857737bd.png)
3. **「App Service プラン/場所」は"free"に設定** かつ **「SQL Database」は「価格レベル」に"Free、32MB"を設定したDBを作成**（他は任意に設定！） -> 作成！！！![Free設定.png](https://qiita-image-store.s3.amazonaws.com/0/180800/d12c4779-1bf1-7f8f-eb7b-57fd1b2143b1.png)
4. Web Appができるのを待って、終了！

**太字**は無料にするためにとても重要なので間違えないこと！！！

##コードデプロイの設定
※（2018/11/23時点の方法）
1. GitHub上で、適当にリポジトリを作ります
2. index.htmlをCreateします。
3. Azureポータル -> App Serviceから作成したWeb Appを選択
4. デプロイメント の デプロイセンター(プレビュー) -> GitHub -> App Service Kudu ビルドサーバー -> 作っておいたリポジトリを選択 -> 完了！ 

```html:index.html
<!DOCTYPE html>
<html>
  <body>
  test
  </body>
</html>
```


これで下地はできました！

##URLアクセス
Web AppのURLは画像の箇所にあります！
![URL.png](https://qiita-image-store.s3.amazonaws.com/0/180800/ee131fc8-7838-e09d-4cfa-6f7f9326261c.png)
URLにアクセスするとなんか表示されています！
![アクセス結果.png](https://qiita-image-store.s3.amazonaws.com/0/180800/228ca0ed-5008-9c52-0834-f06051cb8ca9.png)

#アプリケーション部分の作成
今回は環境構築編として、ここまで。
現在進行形で[アプリケーション部](https://github.com/akashikaikyouohasi/Billboard)を作っておりますのでお待ちください。
（12月中には作り終えたい所存）

<font color="Gainsboro">意外と時間かかるな</font>