概要
この記事は前回の記事の続きです。
VisualStudioでC#＋ASP.NETでWEBサイトを作ってGitで管理する
前回の記事で作成したWEBアプリをAzureへデプロイし全世界からアクセスできるようにする方法を紹介します。また公開したWEBサイトに独自ドメインを設定する方法も紹介します。
- WEBアプリをAzureへデプロイ
- カスタムドメインの設定
Azureとは？
Azureはマイクロソフトが提供するクラウドサービスです。Azureではいろいろなことがサービスとして提供されています。競合としてAmazonとGoogleがいます。
- AWS Amazonが提供するクラウドサービス
- GCP Googleが提供するクラウドサービス
- Azure Microsoftが提供するクラウドサービス
といった感じです。
Azureには
- WEBアプリ
- サーバーレスアプリ
- データベース（RDB、NoSQLなど）
- モバイル開発支援（モバイルのテストなど）
- 動画配信
- 画像解析、音声解析
- IoT向けサービス
などいろいろなサービスがあります。Azure,AWS,GCPのどれでもブラウザからポチポチするだけで様々な最先端のシステムを構築できます。
今回はWEBアプリを作成したいのでAzureのAppServiceを使ってWebアプリを作成していきます。
Web Appの作成
https://portal.azure.com へアクセスしてアカウントを取得します。
取得したら左上のプラスボタン→Web Appをクリックします。
ボードが開きます。
アプリ名に適当に名前を入力（私はhigtyにしました）します。App Serviceプランで新規にApp Serviceを作成します。カスタムドメインを設定したいのでS1を選択します。（S1は有料です。月額7000円くらいかな確か？）カスタムドメインを設定しないならば無料の価格プランもあります。全て設定し終わったら作成ボタンを押します。
Visual StudioからWEBアプリをAzureへデプロイする
Visual Studioのソリューションエクスプローラーでプロジェクトを右クリックします。
発行をクリックします。ウィンドウが開きます。
既存のものを選択にチェックを押し発行ボタンを押します。（ボタンのテキストが発行となっていますがまだ発行されません。）
既存のAppServiceの一覧が表示されます。
（※ログインしてないときはAzureへ認証処理をする必要があるかも）
先ほど作ったhigtyを選択してOKを押します。
発行用のProfileファイルが生成されます。ソリューションエクスプローラーのProperties/PublishProfilesフォルダあたりに生成されてるはずです。
発行ボタンを押すとAzureへWEBアプリがデプロイされます。
さっそくブラウザからアクセスできるか確認してみましょう。
https://higty.azurewebsites.net
(URLはhttps://your_webapp_name.azurewebsites.net になるはずです)
無事に表示されました。
カスタムドメインを取得しドメインの設定をする
AzureのAppServiceを使うとURLがxxx.azurewebsites.net という形式になります。このセクションでは自分の好きなドメインに設定する方法を紹介します。まずはドメインを取得する必要があります。
- GoDaddy
- お名前.com
- Valueドメイン
などなどありますが今回はGoDaddyで取得します。
https://jp.godaddy.com/
アカウントを取得したらドメインが空いているか検索してみましょう。
空いていたらカートに追加します。追加し終わったらカートに進んで購入します。購入が終わったらwww.higty.com で今回作成した https://higty.azurewebsites.net のWEBサイトにアクセスできるようにこれから設定をしていきます。まずはDNSの管理画面へ移動します。
（※GoDaddyは画面が結構変わってしまうので画面コピーはありません。自分で探してみてください。）
DNSの管理画面はこんな感じになっていると思います。（2018年1月2日現在）
wwwの鉛筆マークをクリックしポイント先にhigty.azurewebsites.net と入力します。
保存ボタンを押して保存します。これでGoDaddyの設定は完了です。
Azureでwww.higty.comを許可する
Azureへ戻ります。カスタムドメインでホスト名の追加を押してホスト名にwww.higty.comと入力し検証ボタンを押します。
検証がうまくいかないときは3分くらい待ってみましょう。DNSの設定が反映されるのには少しタイムラグがあったりします。
検証が無事に完了したらホスト名の追加ボタンを押します。（下図）
これでwww.higty.comでアクセスできるようになりました。
まとめ
前回の記事でWebサイト作成ができるようになり、今回の記事でWEBサイトを外部に公開できるようになりました。次回はWEBアプリのHTMLとCSSを改良していく予定です。
- 複数ページの作成
- HTMLとCSSの基礎
- 共通部分をLayout.cshtmlでまとめる
辺りをやる予定です。良かったらフォローしてくださいね。