Help us understand the problem. What is going on with this article?

【Azure Web Appを使ってWebページを公開】

最近自分には、ポートフォリオをまとめたものが私にはないな、と思い、Webサイトを公開して、そこにまとめようと思い、サーバーを借りようと思ったのですが、面倒だなあ。。。と思い、最近触っているAzureでWebページを公開することにしました。

Azureが提供しているWeb Appsを使ってWebサイトを公開してみました。
今回はhtmlファイルをメインにページを構成にしています。

主な内容は次の通りです。

  1. Azure App Serviceを作成する
  2. HTMLファイルを作成しgithubにアップロードする
  3. githubのファイルをApp Serviceにデプロイする (2、3に関してはgithub出なくても良い)

なぜWebサイトを公開するのにAzureを利用したか

  • Azureを使うと無料。
    • サブスクリプションが'Azure for Students'だからかAzureのアカウントを作成してから時間が経ってないからかは分からないがとりあえず現時点では無料だった。今2つ目のWeb Appを作成しようとすると有料になっていた。
  • サーバーを借りたりするのが面倒くさい。
    • サーバー構築などの面倒な作業が必要ない(Node.jsを使えばさほど面倒ではないような気もするが)

Azureの設定

1. AzureアカウントでAzure Portalにサインインする

2. Azure App Serviceを作成する

リソースの作成 → 「Web App」と検索 → 下記のような画面が出てきたら"作成"をクリック
スクリーンショット 2019-06-16 17.38.30.png
"作成"をクリックすると、下記の画面が出てきて、下のように、必要事項を記入していきます。
ここで、下の方に"Free F1"と書かれていたら無料で使えるということです。
スクリーンショット 2019-06-16 15.08.03.png

これらの手順を完了させてしばらくすると、完了のお知らせが表示されます。

3. htmlファイルの作成

今回はgithubにあげたhtmlファイルをデプロイするので、簡単なhtmlファイルを作成します。

index.html
<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>HelloWorld</title>
  <meta charset="utf-8">
 </head>
 <body>
  Hello Ryu1
 </body>
</html>

ここで、githubにファイルをあげてもどのファイルが最初に読み込まれるんだ!?と思った方はいませんか?
私はこれを疑問に思ったまま、上記のファイルをexample.htmlと命名してデプロイしてページにアクセスしたところ、以下のエラーが返ってきました。

You do not have permission to view this directory or page.

調べてみたところ、言語ごとに最初に呼び出されるページの名前は指定されているそうです。(参考)

ランタイム Center align
PHP index.php
Node.js server.js、app.js、またはスタート スクリプトを含むpackage.json
Python *.py、requirements.txt、または runtime.txt
html default.htm、default.html、default.asp、index.htm、index.html、または iisstart.htm

書いてある通り、example.html → index.htmlに名前を変更すると、エラーが消えました。

4. githubリポジトリ作成

名前の指定はないので、好きな名前のリポジトリを作成し、そこに3で作成したhtmlファイルを置きます。

5. WebAppへのデプロイ

AzurePortalにてデプロイセンター → githubを選択
すると、Azureのgithubへのアクセス許可を求められるので、許可する。
スクリーンショット 2019-06-16 15.46.42.png

"App Serviceのビルドサービスを選択"
スクリーンショット 2019-06-16 16.02.37.png

githubに追加したリポジトリの情報を入力
スクリーンショット 2019-06-16 16.08.36.png

デプロイ完了
スクリーンショット 2019-06-16 16.08.44.png

6. [2で自分が指定した名前].azurewebsites.netにアクセスして結果を確認

スクリーンショット 2019-06-16 19.45.13.png

7. SSL化

次のスクリーンショットのように、"HTTPSのみ"と書かれているところをオンにしてあげればSSL化され、urlの先頭に'https://'をつけることができるようになります。
スクリーンショット 2019-06-16 21.15.44.png

最後に

まだ私が作ったサイトには何の情報も載せられていませんが、これからポートフォリオを随時載せていきたいと思います。
通信に関してももっと勉強しなきゃいけないな、と、この記事を書きながら思いました。
しばらく私はサイト作成に励むことになりそうです。

参考

https://docs.microsoft.com/ja-jp/azure/app-service/deploy-continuous-deployment

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away