【無料で読める！】『マンガでわかる Azure Static Web Apps』の紹介（湊川あい）

By / 2023年3月14日
（ツクレル編集部より）技術書著者本人による著書紹介、略して「著著紹介(ちょちょしょうかい)」のコーナーです。今回は『マンガでわかる Azure Static Web Apps』の著者である湊川あいさんに、ご自身の著書を紹介していただきます。

Azure Static Web Apps を漫画で学ぼう！

Microsoft Azure（アジュール）の新サービス「Azure Static Web Apps（アジュール スタティック ウェブ アップス）」を漫画で学べる本が、無料公開されています。
この記事では、漫画制作を担当した湊川あい（みなとがわ・あい）が「Azure Static Web Appsとは何なのか？」「どんなことができるのか？」を紹介します！

  • Kindle版
    • 無料・どなたでもお読みいただけます

マンガでわかる Azure Static Web Apps: クラウド初心でもできる！CIツール不要の自動デプロイ
湊川あい (著)

あらすじ

「ゼミのWebサイトをクラウド化して、デプロイを自動化してくれんかのう？」
いたって普通の大学生、みっくんは教授の無茶振りを引き受けてしまった。
「自動デプロイってどうやるの！？」
途方にくれるみっくんだが、CIツール不要のサービス「Azure Static Web Apps」が最近リリースされたみたいで！？

登場人物紹介

みっくん（主人公）

ソフィア

トオル

Azure Static Web Apps とは何か？

Azure Static Web Apps は、静的サイトのホスティング、自動デプロイをしてくれるサービスです。
HTML, CSS, JavaScript といった静的コンテンツを配信するのに最適化されています。
プレビュー期間中は無料なので気軽にさわれます！

CIツール不要の自動デプロイ！

もし、いきなり「自動デプロイを設定してくれ」と言われたらどうしますか？

自動デプロイを実現するには、別のCIツールに登録して、CIに命令するための config.yaml という名前のファイルを自分で書く必要があります。
外部のサービスを使ってデプロイすることになるので、セキュリティはしっかりしておかなければなりません。そこでトークン（英数字の羅列でできた暗号）を使って認証するのですが、CIツールを使うのが初めての場合は「認証がうまくいいかない」「yamlファイルの書き方がわからない」といった問題でつまづいてしまいがちです。

そこで、Microsoftの新サービス「Azure Static Web Apps」です！
Azure Static Web Apps を使えば、CI や yaml は必要ありません。
GitHub と Azure のアカウントさえあれば、すぐに自動デプロイを始められます。

すぐに試せるリポジトリが用意されている

公式ドキュメントにサンプルリポジトリが用意されているので、すぐに Azure Static Web Apps を試せます。

このリポジトリを使えば、クリックしていくだけで1分でビルド → Webアプリ公開までたどり着けました。

そのあとは、すでに自動デプロイの仕組みが作られているので、リポジトリに新しいコミットを追加するだけで、自動でビルド → 公開されます！ 便利ですね。

漫画の中では Vue.js のサンプルリポジトリ を使っています。
Angular、React といった他のフレームワークも用意されているので、自分が使いやすいものを選ぶとよいでしょう。

カスタムドメイン設定可能、SSL証明書の自動更新

デプロイが完了し、自動でURLが生成されてWebアプリが公開されます。
このときのURLは https://black-ocean-XXX.azurestaticapps.net/ という具合に、ランダムに割り当てられます。
「でも、ランダムなURLじゃちょっとなぁ……。独自ドメインを設定したい」という場合は、もちろんカスタムドメインを設定可能。また、SSL証明書の自動更新（無料）もできます。

プルリクエストプレビュー機能

Azure Static Web Apps にはプルリクエストプレビュー機能というものがあります。
プルリクごとに、非公開のURLが作られ、テストデプロイされたものを実際にさわってチェックできるのです。
わざわざテスト環境を作らなくても、最初からこの機能がついているのは嬉しいですね。

他にもこんな特徴がある！

Azure Static Web Apps は他にもこのような特徴があります。

  • Azure Functions によって提供される統合 API サポート
  • Gatsby、Hugo、VuePress などのフレームワークを使用した静的サイトの発行
  • Next.js や Nuxt.js などのフレームワークを使用した Web アプリケーションのデプロイ
  • コンテンツをユーザーの近くに配置する、グローバルに分散された静的コンテンツ
  • API の呼び出し時にリバースプロキシを使用するシームレスなセキュリティモデル
  • Azure Active Directory、Facebook、Google、GitHub、および Twitter との認証プロバイダーの統合
  • 提供するコンテンツとルートを完全に制御できるようにするバックエンド ルーティング規則

Azure Static Web Apps を使ってみよう！

漫画の続きを読む

漫画の続きはこちらからどうぞ。

チュートリアルをやってみる

漫画の中でみっくんたちが実践している公式チュートリアルはこちら。

MS Learnでもチュートリアルが公開されています。

「自動デプロイの仕組みを簡単に作りたい」「静的サイトジェネレーターを使いたいけど、どのホスティングサービスを使うか迷っている」といった方におすすめなAzure Static Web Apps 。漫画のとおりにクリックしていくだけで、簡単に使えるので、ぜひさわってみてくださいね！

みっくんたちが登場する『マンガでわかるMS Learn』もよろしくね

今回紹介した以外にも、みっくんたちが登場する漫画が無料公開されています！

ぜひ、こちらも合わせてお楽しみください！

記事を書いた人

湊川あい（みなとがわ・あい）

IT漫画家。マンガと図解で、技術をわかりやすく伝えることが好き。
著書『わかばちゃんと学ぶ Webサイト制作の基本』『わかばちゃんと学ぶ Git使い方入門』『わかばちゃんと学ぶ Googleアナリティクス』が全国の書店にて発売中のほか、動画学習サービスSchooにてGit入門授業の講師も担当。
マンガでわかるGit・マンガでわかるDocker・マンガでわかるUnityといった分野横断的なコンテンツを展開している。

]]>

上部へスクロール