shono blog

Azure CDNを使って公開するのはとても簡単だった。ほとんどドキュメントを読まなくても大丈夫。唯一手間取ったのが、ReactのためのURL Rewriteの設定。詳しくは以下で。 Azure CDNのセットアップ まずは、Azure CDNのセットアップを行う。Storage accountの設定ページを開き、左のメニューからAzure CDNを探してクリックする。New endpointフォームを入力してCreateをクリック。Origin hostnameには、デフォルトで入っているStorage accountのアドレスではなく、WebのPrimary endpointを入力するのがポイント。これはStatic websiteページから取得できる。今回の場合はweb.core.windows.netドメインにあった。 以下では、Microsoft CDNを選んだ場合について解説する。 これだけでCDNが準備され、設定したアドレスを使ってWebサイトにアクセスできるようになる。 カスタムドメイン 次に、カスタムドメインの設定を行う。 DNSの管理画面に行き、使いたいアドレスからCDNのEndpointへのCNAMEレコードを設定する。 CDNの設定ページを開き、Custom domainsを選択。追加ボタンを押す。使うカスタムドメインを入力し、しばらく待つと以下の画面になる。以上で終わり。 URL rewrite これはReact router等を使ってシングルウェブページ上で複数のURLを作った場合の話。その仮想的なアドレスにユーザがアクセスすると、当然そのファイルは存在しないのでCDNは404エラーを返してしまう。そこで、それらの仮想的なアドレスへのアクセスに対して/index.html等のファイルを返してあげる必要がある。 CDNの設定画面から、Rules engineを選択する。Add ruleをクリックする。ルールの条件として、ファイル名にピリオドが含まれないことを指定。アクションとしてはSource pattern "/"からDestination /index.htmlへのURL rewriteとした。Preserve

Azure Web Apps上でカスタムドメインとSSLの設定を行う。これは無料プランではサポートされていないので、少なくとも一番安い有料プランを使う必要がある。 複数方法はあるが、ここでは一番手軽で無料な方法を紹介する。 まずは、ドメインの設定。所有しているドメイン名にCNAMEレコードを設定する。宛先は*.azurewebsites.net. 次に、Azure Web Appsの設定画面からCustom domainを選択、Add custom domainをクリックする。ドメイン名を入力すると、自動的に先に設定したCNAMEレコードを認識してくれる。 この時点で、カスタムドメインを使ったHTTPアクセスはできるようになるはずである。次にSSLの設定を行う。左のメニューからTLS/SSL settingsを選択、Private Key Cerficatesタブを開き、Create App Service Managed Certificateをクリック。ドメイン名を選択してCreateを押す。これで証明書の作成が完了する。 またCustom domainのページへ戻り、Add SSL bindingを選択。新しく作成された証明書と、SNI SSLタイプを選択する。以上で終わり。とても簡単だった。 参考 https://docs.microsoft.com/en-us/azure/app-service/configure-ssl-certificate#create-a-free-certificate-preview

Summary Azure web appsを使う。 GithubからGithub Actionsを使ってDeployする。 [12/8/2019追記] GithubからDeployする方法だと、Pythonの依存パッケージの自動インストール等が動かなかった。今はLocal gitから直接AzureにPushしている。 [7/11/2021更新] ある環境変数を設定すると、GithubからのDeployでもパッケージのインストールがされるらしい。本文中に追記した。 Repository リポジトリ内にFlask用のapp.pyと、依存パッケージのリストであるrequirements.txtを作成する。任意のディレクトリを使ってよい。Github Actions内でそのディレクトリを指定する。 Azure Web Apps 普通にAzure Web Appsリソースを作成する。Freeプランだと後々Custom domainやSSLの設定ができないので、一番安いPaidプランを使った。 次に、Publish profileをダウンロードする。このファイルにはDeployに必要なすべての情報が含まれている。秘密の情報も含まれているので取り扱いには注意。 デフォルトだと、依存パッケージのインストールは行われない。Web AppsのSettingsページから、SCM_DO_BUILD_DURING_DEPLOYMENT=1という環境変数を登録しなければならない。詳細は以下のページに書いてある。 https://docs.microsoft.com/en-us/azure/app-service/configure-language-python Github Actions WebのUIからActionの新規作成。テンプレートとしてDeploy Node.js to Azure Web Appを使うのが便利だった。先ほどダウンロードしたPublish profileファイルの中身をProjectのSettingsからSecretにAZURE_WEBAPP_PUBLISH_PROFILEとして登録する。そしてテンプレートの中身を用途に合わせて編集しCommit。 自分はPythonのFlaskフレームワークを使