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フレームワークを使...

Summary 静的WebサイトのホストにはAzure storageを使う。 GithubからのDeployにはGithub actionsを。 Azure storage Webサイトを提供するためにAzure storageに直接アクセスしてもらうのは不思議な感じもするが、そういうものらしい。Azure web appsを使うには こちら StorageV2/StandardとしてStorage accountを作成する。その後、作られたリソースを開き、左のメニューからStatic websiteを選択してEnableする。 すると自動的に$webコンテナが作成され、表示されたURLにアクセスするとそのコンテナの中身が提供される。 Custom domainとSSLを使うためには、さらにAzure CDNを使う必要がある。それについてはまた次回。 Github Actions 次に、GithubからのDeployを設定する。これにはいろいろな方法があると思うが、今回はGithub actionsを使用する。やり方はいろいろあるが、今回はAzure CLIを使用した。 例えばこんな感じ。基本的にはドキュメント通り。$webやconnection stringへシングルクォーテーションを付けるのを忘れずに。Azure storageのConnection stringはGithubのsecretsとして登録した。これはProjectのSettingsページから登録できる。 # This workflow will build and push a node.js application to an Azure Storage on every push to the master branch. on: push: branches: - master env: NODE_VERSION: '12.x' jobs: build-and-deploy: name: Build and Deploy runs-on: ubuntu-latest steps: - uses: actions/checkou...

これまではWordPressを使ってブログを作ることが多かったが、結構手間がかかるので今回はBloggerを使ってみた。ほかにBluehostやWordpress.comなども検討したが、自分はシンプルな機能で十分だったのと、Googleのほかのサービスとの連携が良さそうなのでBloggerを選択した。 立ち上げ手順 Google Accountを作成する。 メールの転送設定も行った。 Google domainからドメインを取得。 5分くらいで取得できた。WHOIS用に名前住所電話番号等を要求された。けれども直接公開はされないみたい。 その後登録したメールアドレスの認証を要求された。Gmail宛に認証リンクが届いた。 Bloggerでブログを作成。 Google accountでログイン。ブログURLとして先に作成したドメインを入力すると、すべて自動でセットアップされた。SSLまで含めて完璧。 Bloggerの設定 テーマの設定とレイアウトの変更とか。 不要なフッターはHTMLの編集で直接削除した。

新しくブログを書いてみることにした。 日々学んだことを忘れないように記録していく。将来の自分や、同じような境遇にいる人々の手助けになればよいと思う。

クリスマスの連休にフロリダのディズニーワールドに行ってきた。ほかに行く人のために、事前に知っておいた方がよかった情報を書いておこうと思う。 空港 ディズニーワールドの最寄りの空港はオーランド国際空港。MCO。ディズニーワールドは空港から３０分くらいのところにある。オーランドはOrlandoであることに注意。Orland行きで予約してしまうとカリフォルニアに着く。 空港からディズニーワールドへは、ディズニー公式バスかUberが便利。公式バスはディズニーホテルに泊まっていると使える。空港で荷物受け取り後に看板に従って下に降りていくとバス乗り場があるらしい。自分はディズニーホテルには泊まらなかったのでUberを使った。 ディズニーワールド内は誰でも使えるバスが運行している。ただし、朝晩は長い列ができ目的地に着くまでも時間がかかるので自分たちはほとんど使わなかった。Uberの方が速く便利である。Uberについては後述。 ホテル おすすめはディズニー公式ホテル。少しお値段は張るが、ディズニーの気分に浸ったまま滞在ができると思う。また、雰囲気以外の特典として、マジックバンドが無料とか、Fastpassが60日前からOKとか、Extra Magic Hour、空港バスなどの特典がある。次におすすめなのがディズニースプリング周辺ホテル。より価格が休めながらExtra Magic Hourや60日前FastPassなどの特典が付いてくる。 予約は遅くとも30日前まではするのが良い。FastPass60日前開始特典を有効活用するため。また、クリスマス時期にはなるが2週間前には安い部屋は見つけるのが困難になっていたらしい。 自分たちが泊まったのはHilton Orlando Lake Buena Vista。5泊で$750、Amexのオファーでさらに$50引きだった。チェックイン日の朝6時くらいに着いたにもかかわらずチェックイン可能だった。また、Hilton Goldの特典で無料朝食も着いてきてよかった。ディズニーパーク行のバスも出ているらしいが、一度も使わなかった。 FastPass 飛行機、ホテルの予約をしたら次はFastPassの予約が必要。東京やアナハイムのディズニーとは違って、事前に各日3つまでFastPassを予約できるシステムになっている。基本的に...