<p>これは <a href="https://qiita.com/advent-calendar/2022/microsoft-azure-tech" target="_blank" rel="nofollow noopener noreferrer">Microsoft Azure Tech Advent Calendar 2022</a> の 18 日目の投稿です。<br>
（ひょぇ～、投稿が一週間も遅れてすみません 💦）</p>
<p>F# に入門したての初心者が、Web アプリケーションのプロジェクトを用意し、デフォルトのサンプルアプリを Azure App Service にデプロイして公開するところまでやってみました。</p>
<h1 id="%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E8%AA%AD%E3%82%80%E3%81%A8%E3%82%8F%E3%81%8B%E3%82%8B%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E8%AA%AD%E3%82%80%E3%81%A8%E3%82%8F%E3%81%8B%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> この記事を読むとわかること</h1>
<ul>
<li>SAFE スタックを用いた Web アプリケーション開発の始め方</li>
<li>SAFE スタックを用いた Web アプリケーションを Azure App Service にデプロイする方法</li>
</ul>
<h1 id="%E6%B3%A8%E6%84%8F%E3%81%A8%E3%81%8A%E9%A1%98%E3%81%84-%F0%9F%99%87">
<a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E3%81%A8%E3%81%8A%E9%A1%98%E3%81%84-%F0%9F%99%87" aria-hidden="true"></a> 注意とお願い 🙇</h1>
<p>F# の記事と題しておきながら、F# のコードはほとんどでてきません。期待されてた方ごめんなさい 😓</p>
<p>これからも F# and/or SAFE スタックを触っていくつもりなので、知見がたまったら別途記事にできたらよいな。。。</p>
<p>また .NET Core のインストールや Azure アカウントの作成は終わっている前提で話を進めていきます。<br>
それらの話題が気になる方は本記事の最後の参考資料をご参照ください。</p>
<h1 id="%E5%8B%95%E4%BD%9C%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%9F%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%9F%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 動作を確認した環境</h1>
<ul>
<li>macOS 13.1</li>
<li>WSL 上の Ubuntu 20.04.5 LTS</li>
</ul>
<p>（Windows 上でも動きそうだけど未検証です）</p>
<h1 id="f%23-%E3%81%A3%E3%81%A6%EF%BC%9F">
<a class="header-anchor-link" href="#f%23-%E3%81%A3%E3%81%A6%EF%BC%9F" aria-hidden="true"></a> F# って？</h1>
<p>マイクロソフトが開発した .NET 向けのマルチパラダイム言語です。</p>
<p><a href="https://fsharp.org/" target="_blank" rel="nofollow noopener noreferrer">本家ドキュメント</a>や<a href="https://learn.microsoft.com/ja-jp/dotnet/fsharp/what-is-fsharp" target="_blank" rel="nofollow noopener noreferrer">マイクロソフトのドキュメント</a>ではそれぞれ</p>
<pre><code># 本家
F# empowers everyone to write succinct, robust and performant code

# マイクロソフト
F# は、簡潔性、堅牢性、パフォーマンスの高いコードを書くためのユニバーサル プログラミング言語です。
</code></pre>
<p>と宣伝されており、簡潔性、堅牢性、パフォーマンスの高さが特徴だそうです。</p>
<p>うーむ。まだ私にはピンとこないです。違いがわかるまでもうちょっと使い込んでみます 😓</p>
<h1 id="safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%A3%E3%81%A6%EF%BC%9F">
<a class="header-anchor-link" href="#safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%A3%E3%81%A6%EF%BC%9F" aria-hidden="true"></a> SAFE スタックって？</h1>
<p>F# で Web アプリケーション開発をサポートする選択肢は結構多く<sup class="footnote-ref"><a href="#fn-2cd2-1" id="fnref-2cd2-1">[1]</a></sup>、F# 初心者の私はそれだけで最初ちょっと圧倒されてしまいました。</p>
<p>そんな中、この SAFE スタックは Azure (App Service)との連携すること前提という謳い文句だったので、これを使ってみることにしました。</p>
<p>ちなみに SAFE のそれぞれの文字は次のワードの頭文字だそうです。</p>
<ul>
<li>S: <a href="https://safe-stack.github.io/docs/overview/#saturn" target="_blank" rel="nofollow noopener noreferrer">Saturn</a>
</li>
<li>A: <a href="https://safe-stack.github.io/docs/overview/#microsoft-azure" target="_blank" rel="nofollow noopener noreferrer">Azure</a>
</li>
<li>F: <a href="https://safe-stack.github.io/docs/overview/#fable" target="_blank" rel="nofollow noopener noreferrer">Fable</a>
</li>
<li>E: <a href="https://safe-stack.github.io/docs/overview/#elmish" target="_blank" rel="nofollow noopener noreferrer">Elmish</a>
</li>
</ul>
<p>ここではそれぞれについて深くは触れないので、興味がある方は上のリンクより詳細をご確認ください。</p>
<h2 id="safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%AB%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> SAFE スタックを用いた開発にに必要なツール</h2>
<p>本家ドキュメントによると以下のものが必要です。</p>
<p><a href="https://safe-stack.github.io/docs/quickstart/#install-pre-requisites" target="_blank" rel="nofollow noopener noreferrer">Quick Start - SAFE Documentation (safe-stack.github.io)</a></p>
<ul>
<li>.NET 6 SDK<sup class="footnote-ref"><a href="#fn-2cd2-2" id="fnref-2cd2-2">[2]</a></sup>
</li>
<li>node.js (v16.x)<sup class="footnote-ref"><a href="#fn-2cd2-3" id="fnref-2cd2-3">[3]</a></sup>
</li>
<li>npm (v8.x)<sup class="footnote-ref"><a href="#fn-2cd2-4" id="fnref-2cd2-4">[4]</a></sup>
</li>
<li>Azure CLI<sup class="footnote-ref"><a href="#fn-2cd2-5" id="fnref-2cd2-5">[5]</a></sup>
<ul>
<li>→ Azure App Service へデプロイする場合のみ必要</li>
</ul>
</li>
</ul>
<h1 id="web-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B">
<a class="header-anchor-link" href="#web-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B" aria-hidden="true"></a> Web アプリケーション開発を始める</h1>
<p>ここから実際に SAFE スタックを使って Web アプリケーション開発を始めていきます。</p>
<p>SAFE プロジェクト用のテンプレートは初回時のみインストールが必要です。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">SAFE プロジェクト用のテンプレートインストール</span></div>
<pre class="language-shell-session"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash">dotnet new <span class="token function">install</span> SAFE.Template</span></span>
</code></pre>
</div><p>以下のコマンドでプロジェクトを作成します。<br>
-o 以降はプロジェクト名なので、適宜よき名前に変更してください。</p>
<div class="code-block-container"><pre class="language-shell-session"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash">dotnet new SAFE <span class="token parameter variable">-o</span> MySAFEApp</span></span>
</code></pre></div><h2 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> ローカル環境で動かしてみる</h2>
<p>ローカル環境で開発用サーバーを動かしてみましょう。<br>
以下のコマンドを実行し、途中でエラーが出て止まったりしなかったら準備 OK。</p>
<div class="code-block-container"><pre class="language-shell-session"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash"><span class="token builtin class-name">cd</span> MySAFEApp</span></span>

<span class="token command"><span class="token shell-symbol important">#</span> <span class="token bash language-bash">ローカル用ツールのインストール</span></span>
<span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash">dotnet tool restore</span></span>

<span class="token command"><span class="token shell-symbol important">#</span> <span class="token bash language-bash">開発用サーバーを動かす</span></span>
<span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash">dotnet run</span></span>
</code></pre></div><p>ブラウザで <a href="http://localhost:8080/" target="_blank" rel="nofollow noopener noreferrer">http://localhost:8080/</a> を開いてください。<br>
以下のような画面が表示されるはずです。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--L0_3KTX9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/044eb2495223f27a3f152609.jpg%3Fsha%3D39ffb517a5e70dd4d3f4715dbd2e876ff78d0a4a" alt="ローカル環境で動かした様子" loading="lazy" class="md-img"></p>
<h1 id="app-service-%E3%81%B8%E3%81%AE-%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#app-service-%E3%81%B8%E3%81%AE-%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> App Service への デプロイ</h1>
<p>最後は App Service にデプロイします。</p>
<p>私が SAFE スタックって良いな～と感じたところのひとつは、Azure ポータルなどを使って事前に自分で App Service 環境を準備しなくても SAFE スタックくんが良い感じ？に用意してくれるところです。</p>
<p>次のコマンドを実行するだけで OK ！<br>
途中で Azure のログインを求められたら指示にしたがってログインしてください。</p>
<div class="code-block-container"><pre class="language-shell-session"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash">dotnet run -- Azure</span></span>
</code></pre></div><p>無事に処理が終われば、以下のように App Service（+ リソースグループ、App Service プラン）が作成され、そこにアプリケーションがデプロイされています。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--3jtsJbZZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/9fcbf80a211a76a59c23a12d.jpg%3Fsha%3D8e8bf632ff7b0cb603ac6c7654fd943221bf75b0" alt="AzureポータルでデプロイしたAppServiceアプリを確認" loading="lazy" class="md-img"></p>
<p>Azure ポータルなどで確認できる URL にアクセスして、先ほどローカル環境で確認したのと同じ（※ 背景はリクエスト毎に変わるみたい）画面が表示されれていれば無事にデプロイが成功したようです。やったね</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--zxHXgleJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/13ad613eccb1a35ec1c2f993.jpg%3Fsha%3De5056aa7ef20734910cb7ccafaad38f4683387ac" alt="AppService上で動いている様子" loading="lazy" class="md-img"></p>
<p>※ デフォルトでは App Service プランの location が WestEurope だったり、Usage Tiers が Free だったりするので、良しなに変更する必要があります。<br>
プロジェクトルートにある <code>Build.fs</code> のここら辺を触ると良さそう（なのですが、時間が足りず未検証です）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__ded8d18feb247" src="https://embed.zenn.studio/github#zenn-embedded__ded8d18feb247" data-content="https%3A%2F%2Fgithub.com%2Ftoku345%2Fmy_safe_app%2Fblob%2F9594d8097bca4adff2c3cea7cd861aa239511220%2FBuild.fs%23L31-L46" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/toku345/my_safe_app/blob/9594d8097bca4adff2c3cea7cd861aa239511220/Build.fs#L31-L46" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/toku345/my_safe_app/blob/9594d8097bca4adff2c3cea7cd861aa239511220/Build.fs#L31-L46</a></p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>SAFE スタックを使って Web アプリケーション開発を始める ～ App Service にデプロイする、をお見せしました。<br>
.NET や Azure CLI のインストールや Azure アカウントの開設を除けば 30 分もかからずに（デフォルトのサンプル）アプリを公開出来ちゃいます。<br>
すごいですね 😮<sup class="footnote-ref"><a href="#fn-2cd2-6" id="fnref-2cd2-6">[6]</a></sup></p>
<p>ぜひ皆さまも、これを機に F# を触ってみては如何でしょうか？</p>
<h1 id="%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99" aria-hidden="true"></a> 参考資料</h1>
<h2 id="f%23-%E3%82%92%E5%AD%A6%E3%81%B6">
<a class="header-anchor-link" href="#f%23-%E3%82%92%E5%AD%A6%E3%81%B6" aria-hidden="true"></a> F# を学ぶ</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7c8da0f0d3c5" src="https://embed.zenn.studio/card#zenn-embedded__7c8da0f0d3c5" data-content="https%3A%2F%2Ffsharp.org%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://fsharp.org/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://fsharp.org/</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__84fd364d502c" src="https://embed.zenn.studio/card#zenn-embedded__84fd364d502c" data-content="https%3A%2F%2Fdotnet.microsoft.com%2Fja-jp%2Flearn%2Ffsharp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://dotnet.microsoft.com/ja-jp/learn/fsharp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dotnet.microsoft.com/ja-jp/learn/fsharp</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__16a611ddadf6f" src="https://embed.zenn.studio/card#zenn-embedded__16a611ddadf6f" data-content="https%3A%2F%2Flearn.microsoft.com%2Fja-jp%2Fdotnet%2Ffsharp%2Fwhat-is-fsharp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://learn.microsoft.com/ja-jp/dotnet/fsharp/what-is-fsharp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/dotnet/fsharp/what-is-fsharp</a></p>
<h2 id="safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E5%AD%A6%E3%81%B6">
<a class="header-anchor-link" href="#safe-%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%82%92%E5%AD%A6%E3%81%B6" aria-hidden="true"></a> SAFE スタックを学ぶ</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__70cfafc52982f" src="https://embed.zenn.studio/card#zenn-embedded__70cfafc52982f" data-content="https%3A%2F%2Fsafe-stack.github.io%2Fdocs%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://safe-stack.github.io/docs/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://safe-stack.github.io/docs/</a></p>
<p>.NET Core、、Azure アカウントの作成方法は本記事では取り上げません。<br>
以下の本家のサイトや、他にもわかりやすく説明されているサイトがたくさんあるのでそちらをご参照ください。</p>
<h2 id=".net-core-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#.net-core-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> .NET Core をインストールする</h2>
<ul>
<li><a href="https://learn.microsoft.com/ja-jp/dotnet/core/install/" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/dotnet/core/install/</a></li>
</ul>
<h2 id="azure-%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B">
<a class="header-anchor-link" href="#azure-%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B" aria-hidden="true"></a> Azure を始める</h2>
<ul>
<li><a href="https://azure.microsoft.com/ja-jp/free/search/" target="_blank" rel="nofollow noopener noreferrer">https://azure.microsoft.com/ja-jp/free/search/</a></li>
</ul>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-2cd2-1" class="footnote-item">
<p>参照: <a href="https://learn.microsoft.com/ja-jp/dotnet/fsharp/scenarios/web-development" target="_blank" rel="nofollow noopener noreferrer">Web 開発での F# | Microsoft Learn</a> <a href="#fnref-2cd2-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-2cd2-2" class="footnote-item">
<p>.NET 7.0.1 でも試してみたのですが動きませんでした。.NET 6.0.404 では動作することが確認できました。 <a href="#fnref-2cd2-2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-2cd2-3" class="footnote-item">
<p>手元の環境で試してみたところ v18.12.1 でも動作することが確認できました。 <a href="#fnref-2cd2-3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-2cd2-4" class="footnote-item">
<p>npm v9.2.0 でも試してみたのですが動きませんでした。npm v8.19.3 では動作することが確認できました。 <a href="#fnref-2cd2-4" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-2cd2-5" class="footnote-item">
<p>2.43.0 で動作することを確認しました <a href="#fnref-2cd2-5" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-2cd2-6" class="footnote-item">
<p>ただ、TODO アプリなのにアプリケーションがアンロードされちゃうとデータが揮発するなど、このままではアプリとしてはちょっと使えないです。私はここら辺を改善できるようチャレンジしてみる予定です。その内容も記事にできるといいな 😅 <a href="#fnref-2cd2-6" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


F# で Web アプリケーション開発を ~App Serviceに添えて~

SAFE スタックを用いた開発にに必要なツール

Web アプリケーション開発を始める

Discussion